CSS Loading Animation Snippet

Open In Editor Publish Your Code

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

/* animation */
        .loading-element {
            position: relative;
            width: 100px;
            height: 100px;
            border-radius: 50%;
            /* criar uma sensação de realidade distorcida */
            animation: loading-animation 1s linear infinite;
        }
        @keyframes loading-animation {
            0% {
                border-radius: 50%;
                transform: scale(1) rotate(0deg);
            }
            100% {
                border-radius: 50%;
                transform: scale(1.5) rotate(360deg);
            }
        }
        /* criar uma sensação de perda de controle */
        .loading-element::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(255, 0, 0, 0.5);
            mix-blend-mode: screen;
            border-radius: 50%;
            animation: loading-animation-2 1s linear infinite;
        }
        @keyframes loading-animation-2 {
            0% {
                transform: scale(1) rotate(0deg);
            }
            100% {
                transform: scale(0.5) rotate(360deg);
            }
        }
        /* criar uma sensação de desintegração */
        .loading-element::after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 255, 0.5);
            mix-blend-mode: screen;
            border-radius: 50%;
            animation: loading-animation-3 1s linear infinite;
        }
        @keyframes loading-animation-3 {
            0% {
                transform: scale(1) rotate(0deg);
            }
            100% {
                transform: scale(0.5) rotate(360deg);
                opacity: 0;
            }
        }

CSS Loading Animation Snippet

Recommended

On Scroll Text Animation

Footer Design using HTML and CSS

Dark Mode Switch CSS

HTML

CSS

JS

Recommended

On Scroll Text Animation

Footer Design using HTML and CSS

Dark Mode Switch CSS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS