loading

1,852 tousgreg

Open In Editor Publish Your Code

Recommended

24 December 2025

Loading Page HTML with Progress Bar

12 October 2025

CSS Loading Animation HTML Structure

22 November 2025

CSS Loading Spinner Animation

HTML

CSS

body {
  background: #060b10;
  font-family: 'Segoe UI', sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  margin: 0;
  color: #0ff;
}

.loader-container {
  perspective: 800px;
  text-align: center;
}

.loader-3d {
  width: 320px;
  height: 35px;
  background: #111;
  border-radius: 30px;
  box-shadow: inset 0 0 20px #0ff3, 0 0 10px #0ff2;
  overflow: hidden;
  transform: rotateX(12deg) rotateY(8deg);
  position: relative;
}

.bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #00f, #0ff);
  border-radius: 30px;
  box-shadow: 0 0 25px #0ff;
  position: relative;
  transition: width 0.2s ease;
}

.glow {
  position: absolute;
  top: 0;
  left: -100px;
  width: 100px;
  height: 100%;
  background: radial-gradient(circle, rgba(255,255,255,0.6) 0%, rgba(0,255,255,0.1) 80%);
  animation: moveGlow 2s linear infinite;
  mix-blend-mode: screen;
  pointer-events: none;
}

@keyframes moveGlow {
  0% { left: -100px; }
  100% { left: 100%; }
}

#percent {
  font-size: 1.5em;
  margin-top: 20px;
  text-shadow: 0 0 10px #0ff;
}

JS