Animated Loading Screen CSS

Open In Editor Publish Your Code

.loader {
  position: absolute;
  text-align: center;
  width: 100%;
  height: 2em;
  top: 50%;
  margin-top: -1em;
}
.loader_letter {
  text-transform: uppercase;
  color: #fff;
  font-family: "Helvetica", sans-serif;
  font-weight: bold;
  padding: 0 .2em;
  font-size: 2em;
  line-height: 1;
  position: relative;
  display: inline-block;
  animation: bounce 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) infinite alternate;
}
.loader_letter:nth-child(1) {
  animation-delay: 0s;
}
.loader_letter:nth-child(2) {
  animation-delay: 0.05s;
}
.loader_letter:nth-child(3) {
  animation-delay: 0.1s;
}
.loader_letter:nth-child(4) {
  animation-delay: 0.15s;
}
.loader_letter:nth-child(5) {
  animation-delay: 0.2s;
}
.loader_letter:nth-child(6) {
  animation-delay: 0.25s;
}
.loader_letter:nth-child(7) {
  animation-delay: 0.3s;
}

@keyframes bounce {
  0% {
    transform: translateY(0px);
  }
  100% {
    transform: translateY(-1em);
  }
}
@keyframes hue {
  0% {
    filter: hue-rotate(0deg);
  }
  100% {
    filter: hue-rotate(360deg);
  }
}

Animated Loading Screen CSS

Recommended

NETFLIX LOADING PAGE

Gradient Text CSS Animation

CSS Ghost Animation

HTML

CSS

JS

Recommended

NETFLIX LOADING PAGE

Gradient Text CSS Animation

CSS Ghost Animation

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS