Cargador con CSS

2347 frechhh

Abrir en el editor Publica tu código

Recomendado

23 August 2025

Formulario de inicio de sesión HTML con alternancia de contraseña

23 August 2025

Portafolio de desarrolladores web: HTML, CSS, JavaScript

1 November 2024

Sitio web de portafolio HTML con menú lateral

HTML

CSS

.loader {
  width: 80px;
  height: 50px;
  position: relative;
}

.loader-text {
  position: absolute;
  top: 0;
  padding: 0;
  margin: 0;
  color: #C8B6FF;
  animation: text_713 3.5s ease both infinite;
  font-size: .8rem;
  letter-spacing: 1px;
}

.load {
  background-color: #9A79FF;
  border-radius: 50px;
  display: block;
  height: 16px;
  width: 16px;
  bottom: 0;
  position: absolute;
  transform: translateX(64px);
  animation: loading_713 3.5s ease both infinite;
}

.load::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background-color: #D1C2FF;
  border-radius: inherit;
  animation: loading2_713 3.5s ease both infinite;
}

@keyframes text_713 {
  0% {
    letter-spacing: 1px;
    transform: translateX(0px);
  }

40% {
    letter-spacing: 2px;
    transform: translateX(26px);
  }

80% {
    letter-spacing: 1px;
    transform: translateX(32px);
  }

90% {
    letter-spacing: 2px;
    transform: translateX(0px);
  }

100% {
    letter-spacing: 1px;
    transform: translateX(0px);
  }
}

@keyframes loading_713 {
  0% {
    width: 16px;
    transform: translateX(0px);
  }

40% {
    width: 100%;
    transform: translateX(0px);
  }

80% {
    width: 16px;
    transform: translateX(64px);
  }

90% {
    width: 100%;
    transform: translateX(0px);
  }

100% {
    width: 16px;
    transform: translateX(0px);
  }
}

@keyframes loading2_713 {
  0% {
    transform: translateX(0px);
    width: 16px;
  }

40% {
    transform: translateX(0%);
    width: 80%;
  }

80% {
    width: 100%;
    transform: translateX(0px);
  }

90% {
    width: 80%;
    transform: translateX(15px);
  }

100% {
    transform: translateX(0px);
    width: 16px;
  }
}

Recomendado

Formulario de inicio de sesión HTML con alternancia de contraseña

Portafolio de desarrolladores web: HTML, CSS, JavaScript

Sitio web de portafolio HTML con menú lateral

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS