Animación de carga CSS: Cargador circular

67 ByBy.inc

Abrir en el editor Publica tu código

Animación de carga CSS: Cargador circular

Recomendado

7 January 2024

Página del héroe de la montaña

9 November 2023

Menú de Pestañas en JavaScrip

HTML

CSS

/* foundation css */
    * {
      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;
    }

@keyframes loading-animation {
      0% {
        transform: translateY(0);
        opacity: 0;
      }
      10% {
        transform: translateY(-10px);
        opacity: 0.5;
      }
      50% {
        transform: translateY(20px);
        opacity: 1;
      }
      90% {
        transform: translateY(-10px);
        opacity: 0.5;
      }
      100% {
        transform: translateY(0);
        opacity: 0;
      }
    }

.loading-element {
        border-radius: 50%;
        width: 30px;
        height: 30px;
        animation: loading-animation 1s linear infinite;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: #666;
        box-shadow: 0 0 10px #666;
    }

.circle1 {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background-color: #666;
      animation: loading-animation 2s linear infinite;
      position: absolute;
      top: 70%;
      left: 30%;
      transform: translate(-50%, -50%);
      box-shadow: 0 0 20px #666;
    }

@keyframes ripple-animation {
      0% {
        width: 0;
        height: 0;
        opacity: 0;
      }
      50% {
        width: 100px;
        height: 100px;
        opacity: 0.2;
      }
      100% {
        width: 0;
        height: 0;
        opacity: 0;
      }
    }

.circle2 {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background-color: #666;
      animation: ripple-animation 1.5s ease-out;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      box-shadow: 0 0 10px #666;
    }

.circle3 {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background-color: #333;
      animation: pulse-animation 1.5s ease-out;
      position: absolute;
      top: 75%;
      left: 70%;
      transform: translate(-50%, -50%);
      box-shadow: 0 0 5px #333;
    }

@keyframes pulse-animation {
      0% {
        width: 0;
        height: 0;
        opacity: 0;
      }
      50% {
        width: 80px;
        height: 80px;
        opacity: 0.5;
      }
      100% {
        width: 0;
        height: 0;
        opacity: 0;
      }
    }

.circle4 {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background-color: #666;
      animation: loading-animation 2.5s linear infinite;
      position: absolute;
      top: 80%;
      left: 40%;
      transform: translate(-50%, -50%);
      box-shadow: 0 0 20px #666;
    }

.circle5 {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background-color: #666;
      animation: loading-animation 2.5s linear infinite;
      position: absolute;
      top: 60%;
      left: 80%;
      transform: translate(-50%, -50%);
      box-shadow: 0 0 5px #666;
    }

.circle6 {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background-color: #666;
      animation: ripple-animation 2.5s ease-out;
      position: absolute;
      top: 40%;
      left: 60%;
      transform: translate(-50%, -50%);
      box-shadow: 0 0 5px #666;
    }

Animación de carga CSS: Cargador circular

Recomendado

Cargador de Pulso en CSS

Página del héroe de la montaña

Menú de Pestañas en JavaScrip

HTML

CSS

JS

Recomendado

Cargador de Pulso en CSS

Página del héroe de la montaña

Menú de Pestañas en JavaScrip

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS