Fragmento de animación de carga de CSS

755 byby.createsite

Abrir en el editor Video Publica tu código

Recomendado

12 July 2025

Encabezado fijo controlado por desplazamiento

20 August 2024

Página de inicio de sesión de Facebook

23 April 2025

Un código de Metehan

HTML

CSS

/* 
css_foundation 
*/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background:url("./thumb.jpg") no-repeat center center;
  background-color: black;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
}

.codigo {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  background: #272822;
  color: #F8F8F2;
  font-family: 'Consolas', 'Monaco', monospace;
  font-size: 18px;
  padding: 20px;
  border-radius: 8px;
  white-space: pre-line;
  text-align: left;
  line-height: 1.6;
  max-height: 25%;
  max-width: 75%;
  width: 75%;
  height: 25%;
  top:15%;
  overflow-y: hidden;
  box-shadow: -8px 10px 18px rgba(0, 0, 0, 0.55);
}

.selector       { color: #F92672; }
.property       { color: #66D9EF; }
.value-number   { color: #AE81FF; }
.value-string   { color: #E6DB74; }
.value-color    { color: #A6E22E; }
.function       { color: #A6E22E; }

.animation-container {
  position: absolute;
  top: 75%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 50%;
  overflow: hidden;
  background: transparent;
}

/* Animação da fragmentação de foco */
.loading-element {
  position: absolute;
  width: 20px;
  height: 20px;
  background-color: #F8F8F2;
  border-radius: 50%;
  animation: loading-animation 2s linear infinite;
}

@keyframes loading-animation {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  25% {
    transform: scale(1.2);
    opacity: 0.6;
  }
  50% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
.loading-element:before {
  content: '';
  position: absolute;
  width: 50%;
  height: 50%;
  background-color: currentColor;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.loading-element:after {
  content: '';
  position: absolute;
  width: 10%;
  height: 10%;
  background-color: currentColor;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Camadas de fratura de foco */
.frag-1 {
  z-index: 1;
}
.frag-2 {
  z-index: 2;
}
.frag-3 {
  z-index: 3;
}
.frag-1:before {
  content: '';
  position: absolute;
  width: 50%;
  height: 50%;
  background-color: currentColor;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: frag-1-animation 2s linear infinite;
}
.frag-2:before {
  content: '';
  position: absolute;
  width: 10%;
  height: 10%;
  background-color: currentColor;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: frag-2-animation 2s linear infinite;
}
.frag-3:before {
  content: '';
  position: absolute;
  width: 5%;
  height: 5%;
  background-color: currentColor;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: frag-3-animation 2s linear infinite;
}

/* Animações de fraguras */
@keyframes frag-1-animation {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  25% {
    transform: scale(1.2);
    opacity: 0.6;
  }
  50% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes frag-2-animation {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  25% {
    transform: scale(1.1);
    opacity: 0.8;
  }
  50% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes frag-3-animation {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  25% {
    transform: scale(1.05);
    opacity: 0.9;
  }
  50% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

Recomendado

Encabezado fijo controlado por desplazamiento

Página de inicio de sesión de Facebook

Un código de Metehan

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS