Webleb - Snippet di Codice - Frammento di animazione di caricamento CSS

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 rules */
    @keyframes loading {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }

.loading-element {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 50px;
      height: 50px;
      border-radius: 50%;
      animation: loading 2s linear infinite;
    }

.loading-element::before {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background-color: #f92672;
      animation: loading 1s linear infinite;
    }

.loading-element:nth-child(3) {
      animation-delay: 2s;
    }

.loading-element:nth-child(3)::before {
      animation-delay: 1s;
    }

/* animated layers */
    .layer-1 {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 100%;
      height: 50%;
      background-color: #66d9ef;
      z-index: 1;
    }

.layer-1::after {
      content: "";
      position: absolute;
      top: 100%;
      left: 0;
      width: 0%;
      height: 100%;
      background-color: #66d9ef;
      z-index: -1;
      animation: animate-layer 2s linear infinite;
    }

.layer-2 {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 100%;
      height: 50%;
      background-color: #a6e22e;
      z-index: 2;
    }

.layer-2::after {
      content: "";
      position: absolute;
      top: 100%;
      left: 0;
      width: 0%;
      height: 100%;
      background-color: #a6e22e;
      z-index: -2;
      animation: animate-layer 2s linear infinite;
      animation-delay: 1s;
    }

/* additional elements */
    .dot-1 {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) rotate(0deg);
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background-color: #f8f8f2;
    }

.dot-1::before {
      content: "";
      position: absolute;
      top: 50%;
      left: 0;
      transform: translate(-50%, -50%);
      width: 20px;
      height: 2px;
      background-color: #f8f8f2;
      animation: animate-dot 2s linear infinite;
    }

.dot-2 {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) rotate(0deg);
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background-color: #f8f8f2;
    }

.dot-2::before {
      content: "";
      position: absolute;
      top: 50%;
      left: 0;
      transform: translate(-50%, -50%);
      width: 20px;
      height: 2px;
      background-color: #f8f8f2;
      animation: animate-dot 2s linear infinite;
      animation-delay: 1s;
    }

/* animation functions */
    @keyframes animate-layer {
      0% {
        width: 0%;
      }
      100% {
        width: 100%;
      }
    }

@keyframes animate-dot {
      0% {
        transform: translate(-50%, -50%) rotate(0deg);
      }
      25% {
        transform: translate(-50%, -50%) rotate(45deg);
      }
      50% {
        transform: translate(-50%, -50%) rotate(0deg);
      }
      100% {
        transform: translate(-50%, -50%) rotate(0deg);
      }
    }

Frammento di animazione di caricamento CSS

Consigliato

Un codice di hunganh

Un codice di ytr3d3

Il sussurratore del codice

HTML

CSS

JS

Consigliato

Un codice di hunganh

Un codice di ytr3d3

Il sussurratore del codice

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS