Um código por simohdrca

Abrir no Editor Publique Seu Código

Recomendado

27 June 2025

body{
  display:flex;
  justify-content:center;
  align-items:center;
  height:100vh;
  background:#212121;
  overflow:hidden
}
.loader {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}

.loader div {
  position: absolute;
  top: 33px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #c517f0;
  animation-timing-function: cubic-bezier(0, 1, 1, 0);
}

.loader div:nth-child(1) {
  left: 8px;
  animation: flip1 0.6s infinite;
}

.loader div:nth-child(2) {
  left: 8px;
  animation: flip2 0.6s infinite;
}

.loader div:nth-child(3) {
  left: 32px;
  animation: flip2 0.6s infinite;
}

.loader div:nth-child(4) {
  left: 56px;
  animation: flip3 0.6s infinite;
}

@keyframes flip1 {
  0% {
    transform: scale(0);
  }

100% {
    transform: scale(1);
  }
}

@keyframes flip3 {
  0% {
    transform: scale(1);
  }

100% {
    transform: scale(0);
  }
}

@keyframes flip2 {
  0% {
    transform: translate(0, 0);
  }

100% {
    transform: translate(24px, 0);
  }
}

Um código por simohdrca

Recomendado

Um código de Mete

Um Código de Liamgilles76

Um código por codex

HTML

CSS

JS

Recomendado

Um código de Mete

Um Código de Liamgilles76

Um código por codex

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS