CSS लोडिंग एनीमेशन स्निपेट

567 ByBy.inc

संपादक में खोलें अपना कोड प्रकाशित करें

अनुशंसित

25 September 2025

SVG और जावास्क्रिप्ट के साथ एनिमेटेड CSS चेकबॉक्स

14 May 2025

ग्रेडिएंट लॉगिन फॉर्म HTML CSS

10 October 2025

CSS एनीमेशन कंटेनर HTML संरचना

HTML

CSS

/* css_foundation */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

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

/* layers */
    .loading-element {
      /* cor principal do fundo */
      background: #f0f0f0;
      /* tamanhos base */
      width: 5vw;
      height: 5vh;
      /* efeitos */
      aspect-ratio: 9/16;
      border-radius: 50%;
      animation: loading-animation 1s linear infinite;
    }

@keyframes loading-animation {
      to {
        transform: rotateZ(360deg);
        box-shadow: -5vw 5vh 10vw rgba(0, 0, 0, 0.5);
      }
    }

/* micro detalhes */
    @keyframes loading-animation-infinite {
      from {
        box-shadow: -5vw 5vh 10vw rgba(0, 0, 0, 0.5);
      }
      to {
        box-shadow: -5vw 5vh 20vw rgba(0, 0, 0, 0.5);
      }
    }

.loading-element::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 0;
      height: 0;
      border-style: solid;
      border-color: transparent transparent transparent rgba(0, 0, 0, 0.5);
      border-width: 2vh 2vh 2vh 0;
      animation: loading-animation-infinite 1s linear infinite;
    }

/* interdependente */
    @keyframes moving-ripple {
      from {
        transform: translateX(-5vw);
      }
      to {
        transform: translateX(5vw);
      }
    }

.moving-ripple {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 5vw;
      height: 5vh;
      background: rgba(0, 0, 0, 0.5);
      border-radius: 50%;
      animation: moving-ripple 2s linear infinite;
    }

.moving-ripple::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 5vw;
      height: 5vh;
      background: rgba(0, 0, 0, 0.5);
      border-radius: 50%;
      animation: moving-ripple 2s linear infinite;
    }

/* cores e efeitos */
    .loading-element:hover {
      background: rgba(255, 255, 255, 0.5);
      box-shadow: 0 0 5vw rgba(0, 0, 0, 0.5);
    }

.loading-element:hover::after {
      border-width: 2vh 6vh 2vh 0;
    }

अनुशंसित

SVG और जावास्क्रिप्ट के साथ एनिमेटेड CSS चेकबॉक्स

ग्रेडिएंट लॉगिन फॉर्म HTML CSS

CSS एनीमेशन कंटेनर HTML संरचना

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS