Tela de carregamento animada em CSS com efeito de código

995 byby.createsite

Abrir no Editor Video Publique Seu Código

Tela de carregamento animada em CSS com efeito de código

Recomendado

16 January 2025

Pilotos de F1 2024 - galeria circular com polegares

29 August 2025

Gerenciador de Tarefas HTML: Adicionar, Excluir e Concluir Tarefas

30 November 2024

Animações orientadas por rolagem

HTML

<html lang="pt-BR">
<head>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

body {
            background:url("https://vinixodin.com/thumb.jpg") no-repeat center center;
            background-color: #4C516D;
            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;
        }

/* Fragmentos de código */

.fragmento{
            position: relative;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-color: #A6E22E;
            animation: loading-animation 1s linear infinite;
            box-shadow: -8px 10px 18px rgba(0, 0, 0, 0.25);
        }

.fragmento:after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-color: transparent;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.35);
        }

/* Camada de sombra */

.sombra {
            position: relative;
            width: 200px;
            height: 200px;
            animation: sombra-animation 5s forwards;
        }

.sombra:before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-color: rgba(0, 0, 0, 0.2);
        }

/* Camada de código */

.codigo-layer {
            position: relative;
            width: 200px;
            height: 200px;
            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;
            overflow-y: hidden;
            animation: codigo-animation 3s forwards;
        }

.codigo-layer .linha {
            position: absolute;
            width: 100px;
            height: 2px;
            background-color: #F8F8F2;
            animation: linha-animation 3s infinite;
        }

.codigo-layer .linha:before {
            content: '';
            position: absolute;
            width: 2px;
            height: 10px;
            background-color: rgba(0, 0, 0, 0.2);
            animation: linha-animation 3s infinite;
        }

/* Elementos animados */

@keyframes loading-animation {
            0% {
                transform: scale(1);
                background-color: #A6E22E;
            }
            20% {
                transform: scale(0.9);
                background-color: #66D9EF;
            }
            40% {
                transform: scale(1);
                background-color: #F92672;
            }
            60% {
                transform: scale(0.9);
                background-color: #A6E22E;
            }
            80% {
                transform: scale(1);
                background-color: #66D9EF;
            }
            100% {
                transform: scale(1);
                background-color: #F92672;
            }
        }

@keyframes sombra-animation {
            0% {
                box-shadow: -8px 10px 18px rgba(0, 0, 0, 0.25);
            }
            50% {
                box-shadow: 0 0 10px rgba(0, 0, 0, 0.35);
            }
            100% {
                box-shadow: -8px 10px 18px rgba(0, 0, 0, 0.25);
            }
        }

@keyframes codigo-animation {
            0% {
                opacity: 0;
            }
            50% {
                opacity: 1;
            }
            100% {
                opacity: 0;
            }
        }

@keyframes linha-animation {
            0% {
                transform: translate(0, 0);
                background-color: rgba(0, 0, 0, 0.2);
            }
            50% {
                transform: translate(0, 10px);
                background-color: rgba(0, 0, 0, 0.2);
            }
            100% {
                transform: translate(0, 0);
                background-color: rgba(0, 0, 0, 0.2);
            }
        }
    </style>
</head>
<body>
    <div class="animation-container">
        <div class="fragmento"></div>
        <div class="sombra"></div>
        <div class="codigo-layer">
            <div class="linha"></div>
            <div class="linha"></div>
            <div class="linha"></div>
        </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;
  }
}

Recomendado

Pilotos de F1 2024 - galeria circular com polegares

Gerenciador de Tarefas HTML: Adicionar, Excluir e Concluir Tarefas

Animações orientadas por rolagem

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS