Loading Animation

Code Runner

/* Soft Golden Shine */
#loader::before {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 130%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent,
    rgba(212,175,55,0.35),
    rgba(255,223,120,0.45),
    rgba(184,134,11,0.3),
    transparent
  );
  transform: skewX(-18deg);
  animation: shine 0.5s linear 1 forwards;
}

/* Secondary Glow */
#loader::after {
  content: "";
  position: absolute;
  top: 0;
  left: -150%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent,
    rgba(255,215,0,0.25),
    rgba(255,200,80,0.2),
    transparent
  );
  transform: skewX(-18deg);
  animation: shine2 0.5s linear 1 forwards;
}

/* Sweep */
@keyframes shine {
  0% { left: -120%; }
  100% { left: 130%; }
}

@keyframes shine2 {
  0% { left: -150%; }
  100% { left: 130%; }
}

/* Fade */
.fade-out {
  animation: fade 0.5s ease forwards;
}

@keyframes fade {
  from { opacity: 1; }
  to { opacity: 0; }
}
</style>

setTimeout(function () {
    loader.classList.add("fade-out");

setTimeout(function () {
      loader.style.display = "none";
    }, 500);

}, 900);
});
</script>

Social Media

Search

Shubham Singh

Loading Animation