/* 12 Pure CSS Loaders - by Rehmat (Animated Creativity) - MIT License
   Every loader uses the current text colour and the --ldr-size variable:
   <span class="ldr ldr-ring" style="color:#7c5cff; --ldr-size:48px"></span>   */
.ldr { --ldr-size: 44px; --ldr-speed: 1s; display: inline-block; position: relative; width: var(--ldr-size); height: var(--ldr-size); color: inherit; box-sizing: border-box; }
.ldr *, .ldr::before, .ldr::after { box-sizing: border-box; }

/* 1. ring */
.ldr-ring { border: calc(var(--ldr-size) / 10) solid color-mix(in srgb, currentColor 22%, transparent); border-top-color: currentColor; border-radius: 50%; animation: ldr-spin var(--ldr-speed) linear infinite; }

/* 2. dual ring */
.ldr-dual::before, .ldr-dual::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: calc(var(--ldr-size) / 11) solid transparent; }
.ldr-dual::before { border-top-color: currentColor; border-bottom-color: currentColor; animation: ldr-spin calc(var(--ldr-speed) * 1.2) linear infinite; }
.ldr-dual::after { inset: 22%; border-left-color: currentColor; border-right-color: currentColor; opacity: .6; animation: ldr-spin calc(var(--ldr-speed) * .9) linear infinite reverse; }

/* 3. arc with a soft tail */
.ldr-arc { border-radius: 50%; background: conic-gradient(from 0deg, transparent 0 20%, currentColor); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--ldr-size) / 9), #000 calc(100% - var(--ldr-size) / 9 + 1px)); mask: radial-gradient(farthest-side, transparent calc(100% - var(--ldr-size) / 9), #000 calc(100% - var(--ldr-size) / 9 + 1px)); animation: ldr-spin var(--ldr-speed) linear infinite; }

/* 4. three bouncing dots: needs <i></i><i></i><i></i> inside */
.ldr-dots { display: inline-flex; align-items: center; justify-content: space-between; }
.ldr-dots i { width: 26%; aspect-ratio: 1; border-radius: 50%; background: currentColor; animation: ldr-bounce calc(var(--ldr-speed) * .9) ease-in-out infinite; }
.ldr-dots i:nth-child(2) { animation-delay: .15s; } .ldr-dots i:nth-child(3) { animation-delay: .3s; }

/* 5. wave of five dots: needs five <i> */
.ldr-wave { display: inline-flex; align-items: center; justify-content: space-between; }
.ldr-wave i { width: 14%; aspect-ratio: 1; border-radius: 50%; background: currentColor; animation: ldr-wave calc(var(--ldr-speed) * 1.1) ease-in-out infinite; }
.ldr-wave i:nth-child(2) { animation-delay: .1s; } .ldr-wave i:nth-child(3) { animation-delay: .2s; } .ldr-wave i:nth-child(4) { animation-delay: .3s; } .ldr-wave i:nth-child(5) { animation-delay: .4s; }

/* 6. equalizer bars: needs four <i> */
.ldr-bars { display: inline-flex; align-items: center; justify-content: space-between; }
.ldr-bars i { width: 16%; height: 100%; border-radius: 99px; background: currentColor; animation: ldr-bars var(--ldr-speed) ease-in-out infinite; }
.ldr-bars i:nth-child(2) { animation-delay: .15s; } .ldr-bars i:nth-child(3) { animation-delay: .3s; } .ldr-bars i:nth-child(4) { animation-delay: .45s; }

/* 7. pulse */
.ldr-pulse::before, .ldr-pulse::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: currentColor; }
.ldr-pulse::before { animation: ldr-pulse calc(var(--ldr-speed) * 1.4) ease-out infinite; }
.ldr-pulse::after { inset: 30%; }

/* 8. ripple */
.ldr-ripple::before, .ldr-ripple::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: calc(var(--ldr-size) / 14) solid currentColor; opacity: 0; animation: ldr-ripple calc(var(--ldr-speed) * 1.6) cubic-bezier(0, .2, .8, 1) infinite; }
.ldr-ripple::after { animation-delay: calc(var(--ldr-speed) * .8); }

/* 9. orbit */
.ldr-orbit { border-radius: 50%; border: calc(var(--ldr-size) / 22) solid color-mix(in srgb, currentColor 25%, transparent); animation: ldr-spin calc(var(--ldr-speed) * 1.2) linear infinite; }
.ldr-orbit::before { content: ""; position: absolute; width: 24%; aspect-ratio: 1; left: 38%; top: -14%; border-radius: 50%; background: currentColor; box-shadow: 0 0 12px currentColor; }

/* 10. flipping square */
.ldr-flip { background: currentColor; border-radius: 14%; animation: ldr-flip calc(var(--ldr-speed) * 1.4) ease-in-out infinite; }

/* 11. grid of nine squares: needs nine <i> */
.ldr-grid { display: inline-grid; grid-template-columns: repeat(3, 1fr); gap: 8%; }
.ldr-grid i { background: currentColor; border-radius: 18%; animation: ldr-fade calc(var(--ldr-speed) * 1.3) ease-in-out infinite; }
.ldr-grid i:nth-child(2), .ldr-grid i:nth-child(4) { animation-delay: .1s; }
.ldr-grid i:nth-child(3), .ldr-grid i:nth-child(5), .ldr-grid i:nth-child(7) { animation-delay: .2s; }
.ldr-grid i:nth-child(6), .ldr-grid i:nth-child(8) { animation-delay: .3s; }
.ldr-grid i:nth-child(9) { animation-delay: .4s; }

/* 12. progress bar without a known end */
.ldr-progress { width: calc(var(--ldr-size) * 2.4); height: calc(var(--ldr-size) / 9); border-radius: 99px; background: color-mix(in srgb, currentColor 20%, transparent); overflow: hidden; }
.ldr-progress::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 40%; border-radius: inherit; background: currentColor; animation: ldr-progress calc(var(--ldr-speed) * 1.3) ease-in-out infinite; }

@keyframes ldr-spin { to { transform: rotate(360deg); } }
@keyframes ldr-bounce { 0%, 80%, 100% { transform: scale(.45); opacity: .5; } 40% { transform: scale(1); opacity: 1; } }
@keyframes ldr-wave { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-160%); } }
@keyframes ldr-bars { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }
@keyframes ldr-pulse { 0% { transform: scale(.3); opacity: .8; } 100% { transform: scale(1); opacity: 0; } }
@keyframes ldr-ripple { 0% { transform: scale(.1); opacity: 1; } 100% { transform: scale(1); opacity: 0; } }
@keyframes ldr-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 ldr-fade { 0%, 70%, 100% { transform: scale(1); opacity: 1; } 35% { transform: scale(.4); opacity: .25; } }
@keyframes ldr-progress { 0% { left: -40%; } 100% { left: 100%; } }

@media (prefers-reduced-motion: reduce) { .ldr, .ldr *, .ldr::before, .ldr::after { animation-duration: 3s !important; } }