:root{--spinner-size:40px;--spinner-color:#333}.spinner-center{margin:auto}.spinner-plane{width:var(--spinner-size);height:var(--spinner-size);background-color:var(--spinner-color);animation:spinner-plane 1.2s infinite ease-in-out}@keyframes spinner-plane{0%{transform:perspective(120px) rotateX(0) rotateY(0)}50%{transform:perspective(120px) rotateX(-180.1deg) rotateY(0)}100%{transform:perspective(120px) rotateX(-180deg) rotateY(-179.9deg)}}.spinner-chase{width:var(--spinner-size);height:var(--spinner-size);position:relative;animation:spinner-chase 2.5s infinite linear both}.spinner-chase-dot{width:100%;height:100%;position:absolute;left:0;top:0;animation:spinner-chase-dot 2.0s infinite ease-in-out both}.spinner-chase-dot:before{content:'';display:block;width:25%;height:25%;background-color:var(--spinner-color);border-radius:100%;animation:spinner-chase-dot-before 2.0s infinite ease-in-out both}.spinner-chase-dot:nth-child(1){animation-delay:-1.1s}.spinner-chase-dot:nth-child(2){animation-delay:-1.0s}.spinner-chase-dot:nth-child(3){animation-delay:-0.9s}.spinner-chase-dot:nth-child(4){animation-delay:-0.8s}.spinner-chase-dot:nth-child(5){animation-delay:-0.7s}.spinner-chase-dot:nth-child(6){animation-delay:-0.6s}.spinner-chase-dot:nth-child(1):before{animation-delay:-1.1s}.spinner-chase-dot:nth-child(2):before{animation-delay:-1.0s}.spinner-chase-dot:nth-child(3):before{animation-delay:-0.9s}.spinner-chase-dot:nth-child(4):before{animation-delay:-0.8s}.spinner-chase-dot:nth-child(5):before{animation-delay:-0.7s}.spinner-chase-dot:nth-child(6):before{animation-delay:-0.6s}@keyframes spinner-chase{100%{transform:rotate(360deg)}}@keyframes spinner-chase-dot{80%,100%{transform:rotate(360deg)}}@keyframes spinner-chase-dot-before{50%{transform:scale(0.4)}100%,0%{transform:scale(1.0)}}.spinner-bounce{width:var(--spinner-size);height:var(--spinner-size);position:relative}.spinner-bounce-dot{width:100%;height:100%;border-radius:50%;background-color:var(--spinner-color);opacity:.6;position:absolute;top:0;left:0;animation:spinner-bounce 2s infinite cubic-bezier(0.455,0.03,0.515,0.955)}.spinner-bounce-dot:nth-child(2){animation-delay:-1.0s}@keyframes spinner-bounce{0%,100%{transform:scale(0)}45%,55%{transform:scale(1)}}.spinner-wave{width:var(--spinner-size);height:var(--spinner-size);display:flex;justify-content:space-between}.spinner-wave-rect{background-color:var(--spinner-color);height:100%;width:15%;animation:spinner-wave 1.2s infinite ease-in-out}.spinner-wave-rect:nth-child(1){animation-delay:-1.2s}.spinner-wave-rect:nth-child(2){animation-delay:-1.1s}.spinner-wave-rect:nth-child(3){animation-delay:-1.0s}.spinner-wave-rect:nth-child(4){animation-delay:-0.9s}.spinner-wave-rect:nth-child(5){animation-delay:-0.8s}@keyframes spinner-wave{0%,40%,100%{transform:scaleY(0.4)}20%{transform:scaleY(1)}}.spinner-pulse{width:var(--spinner-size);height:var(--spinner-size);background-color:var(--spinner-color);border-radius:100%;animation:spinner-pulse 1.2s infinite cubic-bezier(0.455,0.03,0.515,0.955)}@keyframes spinner-pulse{0%{transform:scale(0)}100%{transform:scale(1);opacity:0}}.spinner-flow{width:calc(var(--spinner-size) * 1.3);height:calc(var(--spinner-size) * 1.3);display:flex;justify-content:space-between}.spinner-flow-dot{width:25%;height:25%;background-color:var(--spinner-color);border-radius:50%;animation:spinner-flow 1.4s cubic-bezier(0.455,0.03,0.515,0.955) 0s infinite both}.spinner-flow-dot:nth-child(1){animation-delay:-0.30s}.spinner-flow-dot:nth-child(2){animation-delay:-0.15s}@keyframes spinner-flow{0%,80%,100%{transform:scale(0.3)}40%{transform:scale(1)}}.spinner-swing{width:var(--spinner-size);height:var(--spinner-size);position:relative;animation:spinner-swing 1.8s infinite linear}.spinner-swing-dot{width:45%;height:45%;position:absolute;top:0;left:0;right:0;margin:auto;background-color:var(--spinner-color);border-radius:100%;animation:spinner-swing-dot 2s infinite ease-in-out}.spinner-swing-dot:nth-child(2){top:auto;bottom:0;animation-delay:-1s}@keyframes spinner-swing{100%{transform:rotate(360deg)}}@keyframes spinner-swing-dot{0%,100%{transform:scale(0.2)}50%{transform:scale(1)}}.spinner-circle{width:var(--spinner-size);height:var(--spinner-size);position:relative}.spinner-circle-dot{width:100%;height:100%;position:absolute;left:0;top:0}.spinner-circle-dot:before{content:'';display:block;width:15%;height:15%;background-color:var(--spinner-color);border-radius:100%;animation:spinner-circle 1.2s infinite ease-in-out both}.spinner-circle-dot:nth-child(1){transform:rotate(30deg)}.spinner-circle-dot:nth-child(2){transform:rotate(60deg)}.spinner-circle-dot:nth-child(3){transform:rotate(90deg)}.spinner-circle-dot:nth-child(4){transform:rotate(120deg)}.spinner-circle-dot:nth-child(5){transform:rotate(150deg)}.spinner-circle-dot:nth-child(6){transform:rotate(180deg)}.spinner-circle-dot:nth-child(7){transform:rotate(210deg)}.spinner-circle-dot:nth-child(8){transform:rotate(240deg)}.spinner-circle-dot:nth-child(9){transform:rotate(270deg)}.spinner-circle-dot:nth-child(10){transform:rotate(300deg)}.spinner-circle-dot:nth-child(11){transform:rotate(330deg)}.spinner-circle-dot:nth-child(1):before{animation-delay:-1.1s}.spinner-circle-dot:nth-child(2):before{animation-delay:-1s}.spinner-circle-dot:nth-child(3):before{animation-delay:-0.9s}.spinner-circle-dot:nth-child(4):before{animation-delay:-0.8s}.spinner-circle-dot:nth-child(5):before{animation-delay:-0.7s}.spinner-circle-dot:nth-child(6):before{animation-delay:-0.6s}.spinner-circle-dot:nth-child(7):before{animation-delay:-0.5s}.spinner-circle-dot:nth-child(8):before{animation-delay:-0.4s}.spinner-circle-dot:nth-child(9):before{animation-delay:-0.3s}.spinner-circle-dot:nth-child(10):before{animation-delay:-0.2s}.spinner-circle-dot:nth-child(11):before{animation-delay:-0.1s}@keyframes spinner-circle{0%,80%,100%{transform:scale(0)}40%{transform:scale(1)}}.spinner-circle-fade{width:var(--spinner-size);height:var(--spinner-size);position:relative}.spinner-circle-fade-dot{width:100%;height:100%;position:absolute;left:0;top:0}.spinner-circle-fade-dot:before{content:'';display:block;width:15%;height:15%;background-color:var(--spinner-color);border-radius:100%;animation:spinner-circle-fade 1.2s infinite ease-in-out both}.spinner-circle-fade-dot:nth-child(1){transform:rotate(30deg)}.spinner-circle-fade-dot:nth-child(2){transform:rotate(60deg)}.spinner-circle-fade-dot:nth-child(3){transform:rotate(90deg)}.spinner-circle-fade-dot:nth-child(4){transform:rotate(120deg)}.spinner-circle-fade-dot:nth-child(5){transform:rotate(150deg)}.spinner-circle-fade-dot:nth-child(6){transform:rotate(180deg)}.spinner-circle-fade-dot:nth-child(7){transform:rotate(210deg)}.spinner-circle-fade-dot:nth-child(8){transform:rotate(240deg)}.spinner-circle-fade-dot:nth-child(9){transform:rotate(270deg)}.spinner-circle-fade-dot:nth-child(10){transform:rotate(300deg)}.spinner-circle-fade-dot:nth-child(11){transform:rotate(330deg)}.spinner-circle-fade-dot:nth-child(1):before{animation-delay:-1.1s}.spinner-circle-fade-dot:nth-child(2):before{animation-delay:-1.0s}.spinner-circle-fade-dot:nth-child(3):before{animation-delay:-0.9s}.spinner-circle-fade-dot:nth-child(4):before{animation-delay:-0.8s}.spinner-circle-fade-dot:nth-child(5):before{animation-delay:-0.7s}.spinner-circle-fade-dot:nth-child(6):before{animation-delay:-0.6s}.spinner-circle-fade-dot:nth-child(7):before{animation-delay:-0.5s}.spinner-circle-fade-dot:nth-child(8):before{animation-delay:-0.4s}.spinner-circle-fade-dot:nth-child(9):before{animation-delay:-0.3s}.spinner-circle-fade-dot:nth-child(10):before{animation-delay:-0.2s}.spinner-circle-fade-dot:nth-child(11):before{animation-delay:-0.1s}@keyframes spinner-circle-fade{0%,39%,100%{opacity:0;transform:scale(0.6)}40%{opacity:1;transform:scale(1)}}.spinner-grid{width:var(--spinner-size);height:var(--spinner-size)}.spinner-grid-cube{width:33.33%;height:33.33%;background-color:var(--spinner-color);float:left;animation:spinner-grid 1.3s infinite ease-in-out}.spinner-grid-cube:nth-child(1){animation-delay:.2s}.spinner-grid-cube:nth-child(2){animation-delay:.3s}.spinner-grid-cube:nth-child(3){animation-delay:.4s}.spinner-grid-cube:nth-child(4){animation-delay:.1s}.spinner-grid-cube:nth-child(5){animation-delay:.2s}.spinner-grid-cube:nth-child(6){animation-delay:.3s}.spinner-grid-cube:nth-child(7){animation-delay:0s}.spinner-grid-cube:nth-child(8){animation-delay:.1s}.spinner-grid-cube:nth-child(9){animation-delay:.2s}@keyframes spinner-grid{0%,70%,100%{transform:scale3D(1,1,1)}35%{transform:scale3D(0,0,1)}}.spinner-fold{width:var(--spinner-size);height:var(--spinner-size);position:relative;transform:rotateZ(45deg)}.spinner-fold-cube{float:left;width:50%;height:50%;position:relative;transform:scale(1.1)}.spinner-fold-cube:before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background-color:var(--spinner-color);animation:spinner-fold 2.4s infinite linear both;transform-origin:100% 100%}.spinner-fold-cube:nth-child(2){transform:scale(1.1) rotateZ(90deg)}.spinner-fold-cube:nth-child(4){transform:scale(1.1) rotateZ(180deg)}.spinner-fold-cube:nth-child(3){transform:scale(1.1) rotateZ(270deg)}.spinner-fold-cube:nth-child(2):before{animation-delay:.3s}.spinner-fold-cube:nth-child(4):before{animation-delay:.6s}.spinner-fold-cube:nth-child(3):before{animation-delay:.9s}@keyframes spinner-fold{0%,10%{transform:perspective(140px) rotateX(-180deg);opacity:0}25%,75%{transform:perspective(140px) rotateX(0);opacity:1}90%,100%{transform:perspective(140px) rotateY(180deg);opacity:0}}.spinner-wander{width:var(--spinner-size);height:var(--spinner-size);position:relative}.spinner-wander-cube{background-color:var(--spinner-color);width:20%;height:20%;position:absolute;top:0;left:0;--spinner-wander-distance:calc(var(--spinner-size) * 0.75);animation:spinner-wander 2.0s ease-in-out -2.0s infinite both}.spinner-wander-cube:nth-child(2){animation-delay:-0.5s}.spinner-wander-cube:nth-child(3){animation-delay:-1.0s}@keyframes spinner-wander{0%{transform:rotate(0)}25%{transform:translateX(var(--spinner-wander-distance)) rotate(-90deg) scale(0.6)}50%{transform:translateX(var(--spinner-wander-distance)) translateY(var(--spinner-wander-distance)) rotate(-179deg)}50.1%{transform:translateX(var(--spinner-wander-distance)) translateY(var(--spinner-wander-distance)) rotate(-180deg)}75%{transform:translateX(0) translateY(var(--spinner-wander-distance)) rotate(-270deg) scale(0.6)}100%{transform:rotate(-360deg)}}