Loading – 12 CSS Loaders & Loading Screen Animation

HTML

<h1>Loading Animations</h1>
<p class="sub">12 pure CSS loaders + a full-page loading screen with progress bar. Click any loader to preview it full screen.</p>
<div class="grid">
  <div class="cell"><div class="l1"></div><span>Spinner</span></div>
  <div class="cell"><div class="l2"><i></i><i></i><i></i></div><span>Bouncing dots</span></div>
  <div class="cell"><div class="l3"></div><span>Dual ring</span></div>
  <div class="cell"><div class="l4"><i></i><i></i><i></i><i></i><i></i></div><span>Equalizer</span></div>
  <div class="cell"><div class="l5"></div><span>Pulse</span></div>
  <div class="cell"><div class="l6"><i></i><i></i><i></i><i></i></div><span>Square grid</span></div>
  <div class="cell"><div class="l7"></div><span>Gradient ring</span></div>
  <div class="cell"><div class="l8">Loading</div><span>Text wave</span></div>
  <div class="cell"><div class="l9"></div><span>Flipping square</span></div>
  <div class="cell"><div class="l10"><i></i></div><span>Progress bar</span></div>
  <div class="cell"><div class="l11"><i></i><i></i></div><span>Orbit</span></div>
  <div class="cell"><div class="l12"></div><span>Hourglass</span></div>
</div>
<div class="screen" id="screen"><div class="holder" id="holder"></div><div class="pct" id="pct">0%</div><div class="pbar"><i id="pbar"></i></div><p>Loading your experience…</p></div>

CSS

* { box-sizing: border-box; margin: 0; padding: 0; }
body { min-height: 100vh; background: #12142a; color: #fff; font-family: "Segoe UI", system-ui, sans-serif; padding: 50px 20px; }
h1 { text-align: center; font-size: 2.6rem; } .sub { text-align: center; opacity: .6; margin: 8px auto 36px; max-width: 560px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; max-width: 1000px; margin: 0 auto; }
.cell { background: #1c1f3f; border-radius: 18px; height: 170px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; cursor: pointer; transition: transform .2s; }
.cell:hover { transform: translateY(-4px); }
.cell span { font-size: .8rem; opacity: .5; }
.l1 { width: 48px; height: 48px; border: 5px solid #2d3160; border-top-color: #4cc9f0; border-radius: 50%; animation: spin 1s linear infinite; }
.l2 { display: flex; gap: 8px; } .l2 i { width: 14px; height: 14px; border-radius: 50%; background: #f72585; animation: bounce .6s infinite alternate; } .l2 i:nth-child(2) { animation-delay: .2s; } .l2 i:nth-child(3) { animation-delay: .4s; }
.l3 { width: 50px; height: 50px; border-radius: 50%; border: 5px solid transparent; border-top-color: #ffd166; border-bottom-color: #ffd166; animation: spin 1.2s ease-in-out infinite; }
.l4 { display: flex; gap: 5px; height: 44px; align-items: flex-end; } .l4 i { width: 7px; background: #06d6a0; border-radius: 4px; animation: eq 1s ease-in-out infinite; }
.l4 i:nth-child(2) { animation-delay: .1s; } .l4 i:nth-child(3) { animation-delay: .2s; } .l4 i:nth-child(4) { animation-delay: .3s; } .l4 i:nth-child(5) { animation-delay: .4s; }
.l5 { width: 50px; height: 50px; border-radius: 50%; background: #ef476f; animation: pulse 1.2s ease-out infinite; }
.l6 { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .l6 i { width: 20px; height: 20px; background: #7209b7; border-radius: 4px; animation: sq 1.2s infinite; }
.l6 i:nth-child(2) { animation-delay: .15s; } .l6 i:nth-child(4) { animation-delay: .3s; } .l6 i:nth-child(3) { animation-delay: .45s; }
.l7 { width: 54px; height: 54px; border-radius: 50%; background: conic-gradient(transparent, #4cc9f0, #f72585); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 0); mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 0); animation: spin 1s linear infinite; }
.l8 { font-size: 1.4rem; font-weight: 800; letter-spacing: 2px; background: linear-gradient(90deg, #555 30%, #fff 50%, #555 70%); background-size: 200%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer 1.5s linear infinite; }
.l9 { width: 40px; height: 40px; background: #ffd166; animation: flip 1.4s infinite; }
.l10 { width: 140px; height: 8px; background: #2d3160; border-radius: 99px; overflow: hidden; } .l10 i { display: block; width: 40%; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #4cc9f0, #f72585); animation: slide 1.2s ease-in-out infinite; }
.l11 { position: relative; width: 56px; height: 56px; animation: spin 1.6s linear infinite; } .l11 i { position: absolute; width: 16px; height: 16px; border-radius: 50%; background: #06d6a0; top: 0; left: 20px; } .l11 i + i { top: auto; bottom: 0; background: #4cc9f0; }
.l12 { width: 0; height: 0; border: 22px solid #ef476f; border-color: #ef476f transparent; animation: hg 1.4s infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes bounce { to { transform: translateY(-18px); opacity: .5; } }
@keyframes eq { 0%, 100% { height: 8px; } 50% { height: 44px; } }
@keyframes pulse { 0% { transform: scale(.2); opacity: 1; } 100% { transform: scale(1.2); opacity: 0; } }
@keyframes sq { 0%, 100% { transform: scale(1); } 50% { transform: scale(.4); opacity: .4; } }
@keyframes shimmer { to { background-position: -200% 0; } }
@keyframes flip { 0% { transform: perspective(120px) rotateX(0) rotateY(0); } 50% { transform: perspective(120px) rotateX(-180deg) rotateY(0); } 100% { transform: perspective(120px) rotateX(-180deg) rotateY(-180deg); } }
@keyframes slide { 0% { transform: translateX(-100%); } 100% { transform: translateX(250%); } }
@keyframes hg { 0% { transform: rotate(0); } 50%, 100% { transform: rotate(180deg); } }
.screen { position: fixed; inset: 0; background: #0b0c1d; z-index: 10; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 18px; }
.screen.on { display: flex; animation: fade .3s; } .screen.out { opacity: 0; transition: opacity .5s; }
@keyframes fade { from { opacity: 0; } }
.holder { transform: scale(1.6); height: 90px; display: grid; place-items: center; }
.pct { font-size: 2.4rem; font-weight: 800; }
.pbar { width: min(320px, 80vw); height: 6px; background: #2d3160; border-radius: 99px; overflow: hidden; } .pbar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #4cc9f0, #f72585); }
.screen p { opacity: .6; }

JS

Loading – 12 CSS Loaders & Loading Screen Animation

Recommended

Comments 0