CSS Loading Animation Example

Open In Editor Video Publish Your Code

```html
<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Resposta</title>
    <style>
        /* Base de cores para os elementos */
        :root {
            --cor-primaria: #f92672;
            --cor-secundaria: #66d9ef;
            --cor-terciaria: #ae81ff;
        }

/* Estilos básicos */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

body {
            background: url("https://vinixodin.com/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; }

/* Container da animação */
        .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;
        }

/* Elemento principal da animação */
        .loading-element {
            border-radius: 50%;
            animation: loading-animation 1s linear infinite;
        }

@keyframes loading-animation {
            0% {
                transform: scale(0.5);
                top: 50%;
                left: 50%;
                opacity: 0;
            }

50% {
                transform: scale(1.2);
                top: 45%;
                left: 55%;
                opacity: 1;
            }

100% {
                transform: scale(0.5);
                top: 50%;
                left: 50%;
                opacity: 0;
            }
        }

/* Pseudo-elementos para criar sombras e efeitos */
        .loading-element::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: var(--cor-primaria);
            border-radius: 50%;
            transform: scale(1.2);
            animation: loading-shadow 1s linear infinite;
        }

@keyframes loading-shadow {
            0% {
                transform: scale(0.5) rotate(0deg);
            }

100% {
                transform: scale(0.5) rotate(360deg);
            }
        }

.loading-element::after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: var(--cor-terciaria);
            border-radius: 50%;
            transform: scale(0.8);
            animation: loading-reflex 1s linear infinite;
        }

@keyframes loading-reflex {
            0% {
                transform: scale(1) rotate(0deg);
            }

100% {
                transform: scale(1) rotate(180deg);
            }
        }

/* Elemento de micro-detalhe */
        .micro-detail {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: var(--cor-secundaria);
            border-radius: 50%;
            width: 10px;
            height: 10px;
            animation: micro-detail-animation 1s linear infinite;
        }

@keyframes micro-detail-animation {
            0% {
                transform: translate(-50%, -50%);
                opacity: 0;
            }

50% {
                transform: translate(-50%, -50%) scale(1.3);
                opacity: 1;
            }

100% {
                transform: translate(-50%, -50%) scale(1);
                opacity: 0;
            }
        }

/* Exemplo de código */
        .codigo {
            <span class="selector">.loading-element</span><span class="brace">{</span>
            <span class="property">border-radius</span>: <span class="value-number">50%</span>;
            <span class="property">animation</span>: <span class="function">loading-animation</span> <span class="value-number">1s</span> <span class="value-string">linear</span> <span class="value-string">infinite</span>;
            <span class="property">animation</span>: <span class="function">loading-shadow</span> <span class="value-number">1s</span> <span class="value-string">linear</span> <span class="value-string">infinite</span>;
            <span class="brace">}</span>
        }
    </style>
</head>
<body>
    <div class="animation-container">
        <div class="loading-element" id="loading-element"></div>
        <div class="loading-element" id="loading-element-2"></div>
        <div class="loading-element" id="loading-element-3"></div>
        <div class="micro-detail" id="micro-detail"></div>
    </div>

</body>
</html>
```

CSS

/* 
  Base 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;
  aspect-ratio: 9/16;
}

.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;
  aspect-ratio: 9/16;
}

/* 
  Layers e motivação emocional
*/
.loading-element {
  background-color: #333333;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  animation: loading-animation 1s linear infinite;
  position: relative;
}

@keyframes loading-animation {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}

.layer1 {
  width: 100%;
  height: 100%;
  background-color: #4D4D4D;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 1s;
}

.layer1::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #3F3F3F;
  width: 20px;
  height: 20px;
  border-radius: 50%;
}

/* 
  Micro-detalhes para o replay value
*/
.layer2 {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #3F3F3F;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  animation: detalhe 2s linear infinite;
}

@keyframes detalhe {
  50% {
    transform: scale(1);
    background-color: #666666;
  }
  100% {
    transform: scale(0);
    background-color: #3F3F3F;
  }
}

/* 
  Interações entre camadas e elementos
*/
.layer3 {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #2F2F2F;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: interacao 2s linear infinite;
}

@keyframes interacao {
  50% {
    transform: scale(1);
    background-color: #777777;
  }
  100% {
    transform: scale(0);
    background-color: #2F2F2F;
  }
}

CSS Loading Animation Example

Recommended

Pure CSS One Div House Responsive Animation

CSS Animated Login Form Design

CSS Pulse Loader

HTML

CSS

JS

Recommended

Pure CSS One Div House Responsive Animation

CSS Animated Login Form Design

CSS Pulse Loader

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS