Webleb - UI Elements - CSS Loading Animation HTML Structure

HTML

CSS

* {
    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-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;
  }

.loading-element {
    position: relative;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background-color: #E6DB74;
    animation: loading-animation 1s linear infinite;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2), 0 0 50px rgba(0, 0, 0, 0.5), 0 0 100px rgba(255, 255, 255, 0.5);
  }

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

@keyframes fragment-disappearance {
    0% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }

.fragment-1 {
    position: relative;
    width: 80px;
    height: 100px;
    border-radius: 10px;
    background-color: #66D9EF;
    transform: rotate(25deg);
    animation: fragment-animation 3s linear infinite;
  }

@keyframes fragment-animation {
    0% {
      transform: rotate(25deg) scale(1);
      bottom: -100px;
    }
    20% {
      transform: rotate(25deg) scale(1.5);
      bottom: 150px;
    }
    40% {
      transform: rotate(25deg) scale(1);
      bottom: -100px;
    }
    60% {
      transform: rotate(25deg) scale(0.5);
      bottom: -150px;
    }
    100% {
      transform: rotate(25deg) scale(1);
      bottom: -100px;
    }
  }

@keyframes fragment-disappearance {
    0% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }

.fragment-2 {
    position: relative;
    width: 120px;
    height: 80px;
    border-radius: 10px;
    background-color: #F92672;
    transform: rotate(-30deg);
    animation: fragment-animation-2 2s linear infinite;
  }

@keyframes fragment-animation-2 {
    0% {
      transform: rotate(-30deg) scale(1);
      bottom: -80px;
    }
    20% {
      transform: rotate(-30deg) scale(1.2);
      bottom: 50px;
    }
    40% {
      transform: rotate(-30deg) scale(1);
      bottom: -80px;
    }
    60% {
      transform: rotate(-30deg) scale(0.8);
      bottom: -130px;
    }
    100% {
      transform: rotate(-30deg) scale(1);
      bottom: -80px;
    }
  }

.fragment-3 {
    position: relative;
    width: 150px;
    height: 60px;
    border-radius: 10px;
    background-color: #3E8E41;
    transform: rotate(45deg);
    animation: fragment-animation-3 4s linear infinite;
  }

@keyframes fragment-animation-3 {
    0% {
      transform: rotate(45deg) scale(1);
      bottom: -60px;
    }
    25% {
      transform: rotate(45deg) scale(1.1);
      bottom: 30px;
    }
    50% {
      transform: rotate(45deg) scale(1);
      bottom: -60px;
    }
    75% {
      transform: rotate(45deg) scale(0.9);
      bottom: -120px;
    }
    100% {
      transform: rotate(45deg) scale(1);
      bottom: -60px;
    }
  }

.loading-element::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #E6DB74;
    animation: fragment-disappearance 5s linear infinite;
  }

CSS Loading Animation HTML Structure

Recommended

404 errors html css en français

HTML Button Hover Effects Example

HTML CSS Contact Form

HTML

CSS

JS

Recommended

404 errors html css en français

HTML Button Hover Effects Example

HTML CSS Contact Form

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS