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

59 ByBy.inc

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

अनुशंसित

21 July 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: 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;
}

/* Animação da fragmentação de foco */
.loading-element {
  position: absolute;
  width: 20px;
  height: 20px;
  background-color: #F8F8F2;
  border-radius: 50%;
  animation: loading-animation 2s linear infinite;
}

@keyframes loading-animation {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  25% {
    transform: scale(1.2);
    opacity: 0.6;
  }
  50% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
.loading-element:before {
  content: '';
  position: absolute;
  width: 50%;
  height: 50%;
  background-color: currentColor;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.loading-element:after {
  content: '';
  position: absolute;
  width: 10%;
  height: 10%;
  background-color: currentColor;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Camadas de fratura de foco */
.frag-1 {
  z-index: 1;
}
.frag-2 {
  z-index: 2;
}
.frag-3 {
  z-index: 3;
}
.frag-1:before {
  content: '';
  position: absolute;
  width: 50%;
  height: 50%;
  background-color: currentColor;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: frag-1-animation 2s linear infinite;
}
.frag-2:before {
  content: '';
  position: absolute;
  width: 10%;
  height: 10%;
  background-color: currentColor;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: frag-2-animation 2s linear infinite;
}
.frag-3:before {
  content: '';
  position: absolute;
  width: 5%;
  height: 5%;
  background-color: currentColor;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: frag-3-animation 2s linear infinite;
}

/* Animações de fraguras */
@keyframes frag-1-animation {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  25% {
    transform: scale(1.2);
    opacity: 0.6;
  }
  50% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes frag-2-animation {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  25% {
    transform: scale(1.1);
    opacity: 0.8;
  }
  50% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes frag-3-animation {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  25% {
    transform: scale(1.05);
    opacity: 0.9;
  }
  50% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

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

अनुशंसित

UNO कार्ड HTML CSS उदाहरण

टेक्स्ट होवर एनीमेशन प्रभाव

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

HTML

CSS

JS

अनुशंसित

UNO कार्ड HTML CSS उदाहरण

टेक्स्ट होवर एनीमेशन प्रभाव

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

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS