:root{--spinner-size:48px;--spinner-thick:4px;--spinner-color:#fff;--spinner-bg:#fff5;--spinner-speed:1s;--spinner-dot-size:10px}.spinner{display:flex;align-items:center;justify-content:center;width:var(--spinner-size);height:var(--spinner-size);position:relative;margin:0 auto}.spinner-dot,.spinner span{width:var(--spinner-dot-size);height:var(--spinner-dot-size);background:var(--spinner-color);border-radius:50%;display:block;position:absolute}.spinner-1{border:var(--spinner-thick) solid var(--spinner-bg);border-top:var(--spinner-thick) solid var(--spinner-color);border-radius:50%;animation:spin var(--spinner-speed) linear infinite}.spinner-2 span{top:50%;left:50%;transform:translate(-50%,-50%) rotate(0deg) translateY(-16px);animation:double-dot-spin 1s linear infinite}.spinner-2 span:nth-child(2){animation-delay:.5s}.spinner-3{width:16px;height:16px;background:var(--spinner-color);border-radius:50%;animation:pulse var(--spinner-speed) infinite alternate;position:static}.spinner-4,.spinner-12,.spinner-18,.spinner-22,.spinner-24,.spinner-28,.spinner-31,.spinner-33,.spinner-38{width:var(--spinner-size);height:16px;display:flex;align-items:flex-end;justify-content:space-between;position:static}.spinner-4 span,.spinner-12 span,.spinner-18 span,.spinner-22 span,.spinner-24 span,.spinner-28 span,.spinner-31 span,.spinner-33 span,.spinner-38 span{position:static;animation:bounce .8s infinite alternate}.spinner-4 span:nth-child(2),.spinner-12 span:nth-child(2),.spinner-18 span:nth-child(2),.spinner-22 span:nth-child(2),.spinner-24 span:nth-child(2),.spinner-28 span:nth-child(2),.spinner-31 span:nth-child(2),.spinner-33 span:nth-child(2),.spinner-38 span:nth-child(2){animation-delay:.2s}.spinner-4 span:nth-child(3),.spinner-12 span:nth-child(3),.spinner-18 span:nth-child(3),.spinner-22 span:nth-child(3),.spinner-24 span:nth-child(3),.spinner-28 span:nth-child(3),.spinner-31 span:nth-child(3),.spinner-33 span:nth-child(3),.spinner-38 span:nth-child(3){animation-delay:.4s}.spinner-5{border:var(--spinner-thick) solid var(--spinner-bg);border-top:var(--spinner-thick) solid var(--spinner-color);border-bottom:var(--spinner-thick) solid var(--spinner-color);border-radius:50%;animation:spin .8s linear infinite}.spinner-6{width:40px;height:8px;background:linear-gradient(90deg,var(--spinner-bg) 0%,var(--spinner-color) 50%,var(--spinner-bg) 100%);border-radius:4px;animation:bar-move 1s linear infinite;background-size:200% 100%;position:static}.spinner-7{border:var(--spinner-thick) solid var(--spinner-bg);border-right:var(--spinner-thick) solid var(--spinner-color);border-radius:50%;animation:spin .7s linear infinite}.spinner-8{width:20px;height:20px;background:var(--spinner-color);animation:scale .8s infinite alternate;border-radius:4px;position:static}.spinner-9 span{top:50%;left:50%;transform:translate(-50%,-50%) rotate(0deg) translateY(-16px);animation:double-dot-spin 1s linear infinite}.spinner-9 span:nth-child(2){transform:translate(-50%,-50%) rotate(180deg) translateY(-16px);animation-delay:.5s}.spinner-10 span{left:50%;top:50%;width:8px;height:8px;transform:translate(-50%,-50%) rotate(calc(var(--i) * 36deg)) translateY(-20px);animation:dot-circle 1s linear infinite;animation-delay:calc(var(--i) * .1s);opacity:.7}.spinner-10 span{--i:0}.spinner-10 span:nth-child(2){--i:1}.spinner-10 span:nth-child(3){--i:2}.spinner-10 span:nth-child(4){--i:3}.spinner-10 span:nth-child(5){--i:4}.spinner-10 span:nth-child(6){--i:5}.spinner-10 span:nth-child(7){--i:6}.spinner-10 span:nth-child(8){--i:7}.spinner-10 span:nth-child(9){--i:8}.spinner-10 span:nth-child(10){--i:9}.spinner-11{display:flex;align-items:center;justify-content:center}.spinner-11::after{content:"";display:block;width:60%;height:4px;background:var(--spinner-color);border-radius:2px;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);transform-origin:center center;animation:spin .7s linear infinite}.spinner-12 span{opacity:.2;animation:fade 1s infinite}.spinner-12 span:nth-child(1){animation-delay:0s}.spinner-12 span:nth-child(2){animation-delay:.2s}.spinner-12 span:nth-child(3){animation-delay:.4s}.spinner-12 span:nth-child(4){animation-delay:.6s}.spinner-12 span:nth-child(5){animation-delay:.8s}.spinner-13::before,.spinner-13::after{content:"";position:absolute;border:3px solid var(--spinner-color);border-radius:50%;opacity:.6;top:8px;left:8px;width:32px;height:32px;animation:ripple 1.2s infinite}.spinner-13::after{animation-delay:.6s}.spinner-14{border:var(--spinner-thick) solid var(--spinner-bg);border-right:var(--spinner-thick) solid var(--spinner-color);border-left:none;border-radius:50%;animation:spin .6s linear infinite}.spinner-15{width:40px;height:8px;position:relative;display:flex;align-items:flex-end;justify-content:space-between}.spinner-15 span{position:static;animation:zigzag 1s infinite}.spinner-15 span:nth-child(2){animation-delay:.2s}.spinner-15 span:nth-child(3){animation-delay:.4s}.spinner-16{width:24px;height:24px;border:4px solid var(--spinner-color);border-radius:4px;animation:spin .7s linear infinite}.spinner-17{width:24px;height:24px;background:var(--spinner-color);animation:flip 1s infinite linear;border-radius:4px;position:static}.spinner-18 span{animation:updown .8s infinite alternate}.spinner-18 span:nth-child(2){animation-delay:.2s}.spinner-18 span:nth-child(3){animation-delay:.4s}.spinner-19{width:0;height:0;border-left:24px solid transparent;border-right:24px solid transparent;border-bottom:42px solid var(--spinner-color);animation:spin 1s linear infinite;border-radius:6px;position:static}.spinner-20 span{left:50%;top:50%;width:8px;height:8px;transform:translate(-50%,-50%) rotate(calc(var(--i) * 72deg)) translateY(-20px);animation:around 1.2s linear infinite;animation-delay:calc(var(--i) * .2s)}.spinner-20 span{--i:0}.spinner-20 span:nth-child(2){--i:1}.spinner-20 span:nth-child(3){--i:2}.spinner-20 span:nth-child(4){--i:3}.spinner-20 span:nth-child(5){--i:4}.spinner-21{width:40px;height:8px;background:var(--spinner-bg);border-radius:4px;overflow:hidden;position:relative}.spinner-21::after{content:"";display:block;height:100%;width:0;background:var(--spinner-color);animation:growbar 1s infinite}.spinner-22 span:nth-child(2){animation-delay:.1s}.spinner-22 span:nth-child(3){animation-delay:.2s}.spinner-22 span:nth-child(4){animation-delay:.3s}.spinner-22 span:nth-child(5){animation-delay:.4s}.spinner-23{position:relative}.spinner-23 span{left:50%;top:50%;width:8px;height:8px;transform:translate(-50%,-50%) rotate(calc(var(--i) * 90deg)) translateY(-18px)}.spinner-23{animation:spin 1s linear infinite}.spinner-23 span{--i:0}.spinner-23 span:nth-child(2){--i:1}.spinner-23 span:nth-child(3){--i:2}.spinner-23 span:nth-child(4){--i:3}.spinner-24 span{animation:scale .8s infinite alternate}.spinner-24 span:nth-child(2){animation-delay:.2s}.spinner-24 span:nth-child(3){animation-delay:.4s}.spinner-25,.spinner-25 span{position:static}.spinner-25{width:var(--spinner-size);height:16px;display:flex;align-items:flex-end;justify-content:space-between}.spinner-25 span{animation:wave 1s infinite}.spinner-25 span:nth-child(2){animation-delay:.1s}.spinner-25 span:nth-child(3){animation-delay:.2s}.spinner-25 span:nth-child(4){animation-delay:.3s}.spinner-25 span:nth-child(5){animation-delay:.4s}.spinner-26{border:var(--spinner-thick) solid var(--spinner-bg);border-top:var(--spinner-thick) solid var(--spinner-color);border-radius:50%;animation:pulse-ring 1s infinite alternate}.spinner-27 span{position:absolute;top:0;width:8px;height:8px;border-radius:50%;background:var(--spinner-color);animation:slide 1s infinite}.spinner-27 span:nth-child(1){left:0;animation-delay:0s}.spinner-27 span:nth-child(2){left:16px;animation-delay:.2s}.spinner-27 span:nth-child(3){left:32px;animation-delay:.4s}.spinner-28 span:nth-child(2){animation-delay:.1s}.spinner-28 span:nth-child(3){animation-delay:.2s}.spinner-28 span:nth-child(4){animation-delay:.3s}.spinner-28 span:nth-child(5){animation-delay:.4s}.spinner-29{position:relative}.spinner-29 span{left:50%;top:50%;width:8px;height:8px;border-radius:2px;background:var(--spinner-color);transform:translate(-50%,-50%) rotate(calc(var(--i) * 90deg)) translateY(-18px)}.spinner-29{animation:spin 1s linear infinite}.spinner-29 span{--i:0}.spinner-29 span:nth-child(2){--i:1}.spinner-29 span:nth-child(3){--i:2}.spinner-29 span:nth-child(4){--i:3}.spinner-30{width:24px;height:24px;background:var(--spinner-color);transform:rotate(45deg);animation:spin 1s linear infinite;border-radius:4px;position:static}.spinner-32{border:var(--spinner-thick) solid var(--spinner-bg);border-top:var(--spinner-thick) solid var(--spinner-color);border-right:none;border-radius:50%;animation:spin .7s linear infinite}.spinner-34{width:32px;height:32px;position:relative;animation:spin 1s linear infinite}.spinner-34::before,.spinner-34::after{content:"";position:absolute;background:var(--spinner-color);border-radius:2px}.spinner-34::before{width:60%;height:4px;top:50%;left:20%;transform:translateY(-50%)}.spinner-34::after{width:4px;height:60%;left:50%;top:20%;transform:translateX(-50%)}.spinner-35 span{left:50%;top:50%;width:8px;height:8px;background:var(--spinner-color);border-radius:50%;transform:translate(-50%,-50%) rotate(calc(var(--i) * 60deg)) translateY(-18px);animation:fade-rotate 1.2s linear infinite;animation-delay:calc(var(--i) * .2s)}.spinner-35 span{--i:0}.spinner-35 span:nth-child(2){--i:1}.spinner-35 span:nth-child(3){--i:2}.spinner-35 span:nth-child(4){--i:3}.spinner-35 span:nth-child(5){--i:4}.spinner-35 span:nth-child(6){--i:5}.spinner-36 span{position:absolute;top:0;width:8px;height:8px;border-radius:50%;background:var(--spinner-color);animation:bar-dot 1s infinite}.spinner-36 span:nth-child(1){left:0;animation-delay:0s}.spinner-36 span:nth-child(2){left:16px;animation-delay:.2s}.spinner-36 span:nth-child(3){left:32px;animation-delay:.4s}.spinner-37{width:32px;height:32px;background:var(--spinner-color);clip-path:polygon(50% 0%,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%);animation:spin 1s linear infinite}.spinner-39{position:relative;width:32px;height:16px;animation:spin 1s linear infinite}.spinner-39 span{left:50%;top:50%;width:8px;height:8px;transform:translate(-50%,-50%) rotate(calc(var(--i) * 120deg)) translateY(-8px)}.spinner-39 span{--i:0}.spinner-39 span:nth-child(2){--i:1}.spinner-39 span:nth-child(3){--i:2}.spinner-40{width:32px;height:32px;position:relative;animation:spin 1s linear infinite}.spinner-40::before,.spinner-40::after{content:"";position:absolute;background:var(--spinner-color);border-radius:2px}.spinner-40::before{width:60%;height:4px;top:50%;left:20%;transform:translateY(-50%) rotate(45deg)}.spinner-40::after{width:4px;height:60%;left:50%;top:20%;transform:translateX(-50%) rotate(45deg)}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse{to{transform:scale(1.5);opacity:.5}}@keyframes bounce{to{transform:translateY(-8px);opacity:.5}}@keyframes bar-move{to{background-position:200% 0}}@keyframes scale{to{transform:scale(1.4);opacity:.4}}@keyframes dot-circle{0%,100%{opacity:.7;}50%{opacity:1;}}@keyframes fade{0%,100%{opacity:.2;}50%{opacity:1;}}@keyframes ripple{0%{transform:scale(.8);opacity:1}100%{transform:scale(1.5);opacity:0}}@keyframes zigzag{0%,100%{bottom:0}50%{bottom:8px}}@keyframes flip{0%{transform:perspective(80px) rotateY(0deg);}100%{transform:perspective(80px) rotateY(360deg);}}@keyframes updown{0%,100%{transform:translateY(0);}50%{transform:translateY(-12px);}}@keyframes around{0%{opacity:1;}80%,100%{opacity:.2;}}@keyframes growbar{0%{width:0}50%{width:100%}100%{width:0}}@keyframes slide{0%{top:0}50%{top:8px}100%{top:0}}@keyframes pulse-ring{0%{transform:scale(1);}100%{transform:scale(1.2);}}@keyframes grow{0%,100%{transform:scale(1);}50%{transform:scale(1.5);}}@keyframes expand{0%,100%{transform:scale(1);}50%{transform:scale(2);}}@keyframes fade-rotate{0%{opacity:1;}80%,100%{opacity:.2;}}@keyframes bar-dot{0%,100%{top:0;}50%{top:8px;}}@keyframes double-dot-spin{100%{transform:translate(-50%,-50%) rotate(360deg) translateY(-16px);}}@keyframes wave{0%,100%{transform:translateY(0);}50%{transform:translateY(-12px);}}