Um código por codex

934 codex

Abrir no Editor Publique Seu Código

Recomendado

15 May 2025

Um código do Developer7

HTML

CSS

html, body {
  height: 100%;
}

.content {
  background: #9C27B0;
  animation: hue 10s linear infinite;
  min-height: 100%;
}

.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);
  }
}

Um código por codex

Recomendado

Um código de Mete

Um código de Mete

Um código do Developer7

HTML

CSS

JS

Recomendado

Um código de Mete

Um código de Mete

Um código do Developer7

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS