react-spinkit

Version:

A collection of loading indicators animated with CSS for React

2 lines • 81.2 kB

HTML

<!DOCTYPE html> <html lang="en"><head><title>React Spinkit</title><meta charset="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><meta name="viewport" content="width=device-width, initial-scale=1.0 maximum-scale=5.0"/><link href="//fonts.googleapis.com/css?family=Raleway:800|Libre+Baskerville:400,400i,700" rel="stylesheet" type="text/css"/><style id="typography.js">html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block}audio:not([controls]){display:none;height:0}progress{vertical-align:baseline}[hidden],template{display:none}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:inherit;font-weight:bolder}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}svg:not(:root){overflow:hidden}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}figure{margin:1em 40px}hr{box-sizing:content-box;height:0;overflow:visible}button,input,optgroup,select,textarea{font:inherit;margin:0}optgroup{font-weight:700}button,input{overflow:visible}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-input-placeholder{color:inherit;opacity:.54}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}html{font-size:100%;line-height:1.5em;box-sizing:border-box;overflow-y:scroll;}*{box-sizing:inherit;}*:before{box-sizing:inherit;}*:after{box-sizing:inherit;}body{color:hsl(0,0%,20%);font-family:Libre Baskerville;font-weight:400;word-wrap:break-word;}img{max-width:100%;margin-left:0;margin-right:0;margin-top:0;padding:0;margin-bottom:1rem;}h1{margin-left:0;margin-right:0;margin-top:0;padding:0;margin-bottom:1rem;color:hsl(0,0%,0%);font-family:Raleway;font-weight:800;text-rendering:optimizeLegibility;font-size:2.5rem;line-height:3rem;}h2{margin-left:0;margin-right:0;margin-top:0;padding:0;margin-bottom:1rem;color:hsl(0,0%,0%);font-family:Raleway;font-weight:800;text-rendering:optimizeLegibility;font-size:2.08138rem;line-height:3rem;}h3{margin-left:0;margin-right:0;margin-top:0;padding:0;margin-bottom:1rem;color:hsl(0,0%,0%);font-family:Raleway;font-weight:800;text-rendering:optimizeLegibility;font-size:1.73286rem;line-height:2.25rem;}h4{margin-left:0;margin-right:0;margin-top:0;padding:0;margin-bottom:1rem;color:hsl(0,0%,0%);font-family:Raleway;font-weight:800;text-rendering:optimizeLegibility;font-size:1.4427rem;line-height:2.25rem;}h5{margin-left:0;margin-right:0;margin-top:0;padding:0;margin-bottom:1rem;color:hsl(0,0%,0%);font-family:Raleway;font-weight:800;text-rendering:optimizeLegibility;font-size:1.20112rem;line-height:1.5rem;}h6{margin-left:0;margin-right:0;margin-top:0;padding:0;margin-bottom:1rem;color:hsl(0,0%,0%);font-family:Raleway;font-weight:800;text-rendering:optimizeLegibility;font-size:1rem;line-height:1.5rem;}hgroup{margin-left:0;margin-right:0;margin-top:0;padding:0;margin-bottom:1rem;}ul{margin-left:1.5rem;margin-right:0;margin-top:0;padding:0;margin-bottom:1rem;list-style-position:outside;list-style-image:none;}ol{margin-left:1.5rem;margin-right:0;margin-top:0;padding:0;margin-bottom:1rem;list-style-position:outside;list-style-image:none;}dl{margin-left:0;margin-right:0;margin-top:0;padding:0;margin-bottom:1rem;}dd{margin-left:0;margin-right:0;margin-top:0;padding:0;margin-bottom:1rem;}p{margin-left:0;margin-right:0;margin-top:0;padding:0;margin-bottom:1rem;}figure{margin-left:0;margin-right:0;margin-top:0;padding:0;margin-bottom:1rem;}pre{margin-left:0;margin-right:0;margin-top:0;padding:1rem;margin-bottom:1rem;font-size:0.85rem;line-height:1.42;background:hsl(0,0%,97%);border-radius:3px;overflow:auto;}table{margin-left:0;margin-right:0;margin-top:0;padding:0;margin-bottom:1rem;font-size:1rem;line-height:1.5rem;border-collapse:collapse;width:100%;}fieldset{margin-left:0;margin-right:0;margin-top:0;padding:0;margin-bottom:1rem;}blockquote{margin-left:1rem;margin-right:1rem;margin-top:1rem;padding:0;margin-bottom:1rem;color:hsl(0,0%,26.6%);border-left:4px solid #999;padding-left:1rem;}form{margin-left:0;margin-right:0;margin-top:0;padding:0;margin-bottom:1rem;}noscript{margin-left:0;margin-right:0;margin-top:0;padding:0;margin-bottom:1rem;}iframe{margin-left:0;margin-right:0;margin-top:0;padding:0;margin-bottom:1rem;}hr{margin-left:0;margin-right:0;margin-top:0;padding:0;margin-bottom:calc(1rem - 1px);background:hsl(0,0%,80%);border:none;height:1px;}address{margin-left:0;margin-right:0;margin-top:0;padding:0;margin-bottom:1rem;}b{font-weight:700;}strong{font-weight:700;}dt{font-weight:700;}th{font-weight:700;}li{margin-bottom:calc(1rem / 2);}ol li{padding-left:0;}ul li{padding-left:0;}li > ol{margin-left:1.5rem;margin-bottom:calc(1rem / 2);margin-top:calc(1rem / 2);}li > ul{margin-left:1.5rem;margin-bottom:calc(1rem / 2);margin-top:calc(1rem / 2);}code{font-size:0.85rem;line-height:1.5rem;}kbd{font-size:0.85rem;line-height:1.5rem;}samp{font-size:0.85rem;line-height:1.5rem;}abbr{border-bottom:1px dotted hsl(0,0%,50%);cursor:help;}acronym{border-bottom:1px dotted hsl(0,0%,50%);cursor:help;}abbr[title]{border-bottom:1px dotted hsl(0,0%,50%);cursor:help;text-decoration:none;}thead{text-align:left;}td,th{text-align:left;border-bottom:1px solid hsl(0,0%,88%);padding-left:1rem;padding-right:1rem;padding-top:0.75rem;padding-bottom:calc(0.75rem - 1px);}th:first-child,td:first-child{padding-left:0;}th:last-child,td:last-child{padding-right:0;}@media only screen and (max-width:768px){h1{font-size:2.5rem;line-height:3rem;}h2{font-size:2.08138rem;line-height:3rem;}h3{font-size:1.73286rem;line-height:2.25rem;}h4{font-size:1.4427rem;line-height:2.25rem;}h5{font-size:1.20112rem;line-height:1.5rem;}h6{font-size:1rem;line-height:1.5rem;}}tt,code{background-color:rgba(0,0,0,0.04);border-radius:3px;font-family:Consolas,"Liberation Mono",Menlo,Courier,monospace;padding:0;padding-top:0.2em;padding-bottom:0.2em;}pre code{background:hsl(0,0%,97%);line-height:1.42;}code:before,code:after,tt:before,tt:after{letter-spacing:-0.2em;content:" ";}pre code:before,pre code:after,pre tt:before,pre tt:after{content:"";}@media only screen and (max-width:480px){html{font-size:80%;line-height:1.5em;}}a{font-weight:bold;color:#00f;text-decoration:none;}a:hover{text-decoration:underline;}</style><style>.ball-pulse>div:nth-child(0){animation:scale .75s -.36s infinite cubic-bezier(.2,.68,.18,1.08)}.ball-pulse>div:first-child{animation:scale .75s -.24s infinite cubic-bezier(.2,.68,.18,1.08)}.ball-pulse>div:nth-child(2){animation:scale .75s -.12s infinite cubic-bezier(.2,.68,.18,1.08)}.ball-pulse>div:nth-child(3){animation:scale .75s 0s infinite cubic-bezier(.2,.68,.18,1.08)}.ball-pulse>div{background-color:#fff;width:15px;height:15px;border-radius:100%;margin:2px;animation-fill-mode:both;display:inline-block}@keyframes ball-pulse-sync{33%{transform:translateY(10px)}66%{transform:translateY(-10px)}to{transform:translateY(0)}}.ball-pulse-sync>div:nth-child(0){animation:ball-pulse-sync .6s -.21s infinite ease-in-out}.ball-pulse-sync>div:first-child{animation:ball-pulse-sync .6s -.14s infinite ease-in-out}.ball-pulse-sync>div:nth-child(2){animation:ball-pulse-sync .6s -.07s infinite ease-in-out}.ball-pulse-sync>div:nth-child(3){animation:ball-pulse-sync .6s 0s infinite ease-in-out}.ball-pulse-sync>div{background-color:#fff;width:15px;height:15px;border-radius:100%;margin:2px;animation-fill-mode:both;display:inline-block}@keyframes ball-scale{0%{transform:scale(0)}to{transform:scale(1);opacity:0}}.ball-scale>div{background-color:#fff;width:15px;height:15px;border-radius:100%;margin:2px;animation-fill-mode:both;display:inline-block;height:60px;width:60px;animation:ball-scale 1s 0s ease-in-out infinite}.ball-scale-random{width:37px;height:40px}.ball-scale-random>div{background-color:#fff;width:15px;height:15px;border-radius:100%;margin:2px;animation-fill-mode:both;position:absolute;display:inline-block;height:30px;width:30px;animation:ball-scale 1s 0s ease-in-out infinite}.ball-scale-random>div:first-child{margin-left:-7px;animation:ball-scale 1s .2s ease-in-out infinite}.ball-scale-random>div:nth-child(3){margin-left:-2px;margin-top:9px;animation:ball-scale 1s .5s ease-in-out infinite}.ball-rotate,.ball-rotate>div{position:relative}.ball-rotate>div{background-color:#fff;width:15px;height:15px;border-radius:100%;margin:2px;animation-fill-mode:both}.ball-rotate>div:first-child{animation:rotate 1s 0s cubic-bezier(.7,-.13,.22,.86) infinite}.ball-rotate>div:after,.ball-rotate>div:before{background-color:#fff;width:15px;height:15px;border-radius:100%;margin:2px;content:"";position:absolute;opacity:.8}.ball-rotate>div:before{top:0;left:-28px}.ball-rotate>div:after{top:0;left:25px}.ball-clip-rotate>div{background-color:#fff;width:15px;height:15px;border-radius:100%;margin:2px;animation-fill-mode:both;border:2px solid #fff;border-bottom-color:transparent;height:25px;width:25px;background:transparent!important;display:inline-block;animation:rotate .75s 0s linear infinite}@keyframes scale{30%{transform:scale(.3)}to{transform:scale(1)}}.ball-clip-rotate-pulse{position:relative;transform:translateY(-15px)}.ball-clip-rotate-pulse>div{animation-fill-mode:both;position:absolute;top:0;left:0;border-radius:100%}.ball-clip-rotate-pulse>div:first-child{background:#fff;height:16px;width:16px;top:7px;left:-7px;animation:scale 1s 0s cubic-bezier(.09,.57,.49,.9) infinite}.ball-clip-rotate-pulse>div:last-child{position:absolute;border:2px solid #fff;width:30px;height:30px;left:-16px;top:-2px;background:transparent;border:2px solid;border-color:#fff transparent;animation:rotate 1s 0s cubic-bezier(.09,.57,.49,.9) infinite;animation-duration:1s}@keyframes rotate{0%{transform:rotate(0deg) scale(1)}50%{transform:rotate(180deg) scale(.6)}to{transform:rotate(1turn) scale(1)}}.ball-clip-rotate-multiple{position:relative}.ball-clip-rotate-multiple>div{animation-fill-mode:both;position:absolute;left:-20px;top:-20px;border:2px solid #fff;border-bottom-color:transparent;border-top-color:transparent;border-radius:100%;height:35px;width:35px;animation:rotate 1s 0s ease-in-out infinite}.ball-clip-rotate-multiple>div:last-child{display:inline-block;top:-10px;left:-10px;width:15px;height:15px;animation-duration:.5s;border-color:#fff transparent;animation-direction:reverse}@keyframes ball-scale-ripple{0%{transform:scale(.1);opacity:1}70%{transform:scale(1);opacity:.7}to{opacity:0}}.ball-scale-ripple>div{animation-fill-mode:both;height:50px;width:50px;border-radius:100%;border:2px solid #fff;animation:ball-scale-ripple 1s 0s infinite cubic-bezier(.21,.53,.56,.8)}@keyframes ball-scale-ripple-multiple{0%{transform:scale(.1);opacity:1}70%{transform:scale(1);opacity:.7}to{opacity:0}}.ball-scale-ripple-multiple{position:relative;transform:translateY(-25px)}.ball-scale-ripple-multiple>div:nth-child(0){animation-delay:-.8s}.ball-scale-ripple-multiple>div:first-child{animation-delay:-.6s}.ball-scale-ripple-multiple>div:nth-child(2){animation-delay:-.4s}.ball-scale-ripple-multiple>div:nth-child(3){animation-delay:-.2s}.ball-scale-ripple-multiple>div{animation-fill-mode:both;position:absolute;top:-2px;left:-26px;width:50px;height:50px;border-radius:100%;border:2px solid #fff;animation:ball-scale-ripple-multiple 1.25s 0s infinite cubic-bezier(.21,.53,.56,.8)}@keyframes ball-beat{50%{opacity:.2;transform:scale(.75)}to{opacity:1;transform:scale(1)}}.ball-beat>div{background-color:#fff;width:15px;height:15px;border-radius:100%;margin:2px;animation-fill-mode:both;display:inline-block;animation:ball-beat .7s 0s infinite linear}.ball-beat>div:nth-child(2n-1){animation-delay:-.35s!important}@keyframes ball-scale-multiple{0%{transform:scale(0);opacity:0}5%{opacity:1}to{transform:scale(1);opacity:0}}.ball-scale-multiple{position:relative;transform:translateY(-30px)}.ball-scale-multiple>div:nth-child(2){animation-delay:-.4s}.ball-scale-multiple>div:nth-child(3){animation-delay:-.2s}.ball-scale-multiple>div{background-color:#fff;width:15px;height:15px;border-radius:100%;margin:2px;animation-fill-mode:both;position:absolute;left:-30px;top:0;opacity:0;margin:0;width:60px;height:60px;animation:ball-scale-multiple 1s 0s linear infinite}@keyframes ball-triangle-path-1{33%{transform:translate(25px,-50px)}66%{transform:translate(50px)}to{transform:translate(0)}}@keyframes ball-triangle-path-2{33%{transform:translate(25px,50px)}66%{transform:translate(-25px,50px)}to{transform:translate(0)}}@keyframes ball-triangle-path-3{33%{transform:translate(-50px)}66%{transform:translate(-25px,-50px)}to{transform:translate(0)}}.ball-triangle-path{position:relative;transform:translate(-29.994px,-37.50938px)}.ball-triangle-path>div:first-child{animation-name:ball-triangle-path-1;animation-delay:0;animation-duration:2s;animation-timing-function:ease-in-out;animation-iteration-count:infinite}.ball-triangle-path>div:nth-child(2){animation-name:ball-triangle-path-2;animation-delay:0;animation-duration:2s;animation-timing-function:ease-in-out;animation-iteration-count:infinite}.ball-triangle-path>div:nth-child(3){animation-name:ball-triangle-path-3;animation-delay:0;animation-duration:2s;animation-timing-function:ease-in-out;animation-iteration-count:infinite}.ball-triangle-path>div{animation-fill-mode:both;position:absolute;width:10px;height:10px;border-radius:100%;border:1px solid #fff}.ball-triangle-path>div:first-of-type{top:50px}.ball-triangle-path>div:nth-of-type(2){left:25px}.ball-triangle-path>div:nth-of-type(3){top:50px;left:50px}@keyframes ball-pulse-rise-even{0%{transform:scale(1.1)}25%{transform:translateY(-30px)}50%{transform:scale(.4)}75%{transform:translateY(30px)}to{transform:translateY(0);transform:scale(1)}}@keyframes ball-pulse-rise-odd{0%{transform:scale(.4)}25%{transform:translateY(30px)}50%{transform:scale(1.1)}75%{transform:translateY(-30px)}to{transform:translateY(0);transform:scale(.75)}}.ball-pulse-rise>div{background-color:#fff;width:15px;height:15px;border-radius:100%;margin:2px;animation-fill-mode:both;display:inline-block;animation-duration:1s;animation-timing-function:cubic-bezier(.15,.46,.9,.6);animation-iteration-count:infinite;animation-delay:0}.ball-pulse-rise>div:nth-child(2n){animation-name:ball-pulse-rise-even}.ball-pulse-rise>div:nth-child(2n-1){animation-name:ball-pulse-rise-odd}@keyframes ball-grid-beat{50%{opacity:.7}to{opacity:1}}.ball-grid-beat{width:57px}.ball-grid-beat>div:first-child{animation-delay:.44s;animation-duration:1.27s}.ball-grid-beat>div:nth-child(2){animation-delay:.2s;animation-duration:1.52s}.ball-grid-beat>div:nth-child(3){animation-delay:.14s;animation-duration:.61s}.ball-grid-beat>div:nth-child(4){animation-delay:.15s;animation-duration:.82s}.ball-grid-beat>div:nth-child(5){animation-delay:-.01s;animation-duration:1.24s}.ball-grid-beat>div:nth-child(6){animation-delay:-.07s;animation-duration:1.35s}.ball-grid-beat>div:nth-child(7){animation-delay:.29s;animation-duration:1.44s}.ball-grid-beat>div:nth-child(8){animation-delay:.63s;animation-duration:1.19s}.ball-grid-beat>div:nth-child(9){animation-delay:-.18s;animation-duration:1.48s}.ball-grid-beat>div{background-color:#fff;width:15px;height:15px;border-radius:100%;margin:2px;animation-fill-mode:both;display:inline-block;float:left;animation-name:ball-grid-beat;animation-iteration-count:infinite;animation-delay:0}@keyframes ball-grid-pulse{0%{transform:scale(1)}50%{transform:scale(.5);opacity:.7}to{transform:scale(1);opacity:1}}.ball-grid-pulse{width:57px}.ball-grid-pulse>div:first-child{animation-delay:.58s;animation-duration:.9s}.ball-grid-pulse>div:nth-child(2){animation-delay:.01s;animation-duration:.94s}.ball-grid-pulse>div:nth-child(3){animation-delay:.25s;animation-duration:1.43s}.ball-grid-pulse>div:nth-child(4){animation-delay:-.03s;animation-duration:.74s}.ball-grid-pulse>div:nth-child(5){animation-delay:.21s;animation-duration:.68s}.ball-grid-pulse>div:nth-child(6){animation-delay:.25s;animation-duration:1.17s}.ball-grid-pulse>div:nth-child(7){animation-delay:.46s;animation-duration:1.41s}.ball-grid-pulse>div:nth-child(8){animation-delay:.02s;animation-duration:1.56s}.ball-grid-pulse>div:nth-child(9){animation-delay:.13s;animation-duration:.78s}.ball-grid-pulse>div{background-color:#fff;width:15px;height:15px;border-radius:100%;margin:2px;animation-fill-mode:both;display:inline-block;float:left;animation-name:ball-grid-pulse;animation-iteration-count:infinite;animation-delay:0}@keyframes ball-spin-fade-loader{50%{opacity:.3;transform:scale(.4)}to{opacity:1;transform:scale(1)}}.ball-spin-fade-loader{position:relative;top:-10px;left:-10px}.ball-spin-fade-loader>div:first-child{top:25px;left:0;animation:ball-spin-fade-loader 1s -.96s infinite linear}.ball-spin-fade-loader>div:nth-child(2){top:17.04545px;left:17.04545px;animation:ball-spin-fade-loader 1s -.84s infinite linear}.ball-spin-fade-loader>div:nth-child(3){top:0;left:25px;animation:ball-spin-fade-loader 1s -.72s infinite linear}.ball-spin-fade-loader>div:nth-child(4){top:-17.04545px;left:17.04545px;animation:ball-spin-fade-loader 1s -.6s infinite linear}.ball-spin-fade-loader>div:nth-child(5){top:-25px;left:0;animation:ball-spin-fade-loader 1s -.48s infinite linear}.ball-spin-fade-loader>div:nth-child(6){top:-17.04545px;left:-17.04545px;animation:ball-spin-fade-loader 1s -.36s infinite linear}.ball-spin-fade-loader>div:nth-child(7){top:0;left:-25px;animation:ball-spin-fade-loader 1s -.24s infinite linear}.ball-spin-fade-loader>div:nth-child(8){top:17.04545px;left:-17.04545px;animation:ball-spin-fade-loader 1s -.12s infinite linear}.ball-spin-fade-loader>div{background-color:#fff;width:15px;height:15px;border-radius:100%;margin:2px;animation-fill-mode:both;position:absolute}@keyframes ball-spin-loader{75%{opacity:.2}to{opacity:1}}.ball-spin-loader{position:relative}.ball-spin-loader>span:first-child{top:45px;left:0;animation:ball-spin-loader 2s .9s infinite linear}.ball-spin-loader>span:nth-child(2){top:30.68182px;left:30.68182px;animation:ball-spin-loader 2s 1.8s infinite linear}.ball-spin-loader>span:nth-child(3){top:0;left:45px;animation:ball-spin-loader 2s 2.7s infinite linear}.ball-spin-loader>span:nth-child(4){top:-30.68182px;left:30.68182px;animation:ball-spin-loader 2s 3.6s infinite linear}.ball-spin-loader>span:nth-child(5){top:-45px;left:0;animation:ball-spin-loader 2s 4.5s infinite linear}.ball-spin-loader>span:nth-child(6){top:-30.68182px;left:-30.68182px;animation:ball-spin-loader 2s 5.4s infinite linear}.ball-spin-loader>span:nth-child(7){top:0;left:-45px;animation:ball-spin-loader 2s 6.3s infinite linear}.ball-spin-loader>span:nth-child(8){top:30.68182px;left:-30.68182px;animation:ball-spin-loader 2s 7.2s infinite linear}.ball-spin-loader>div{animation-fill-mode:both;position:absolute;width:15px;height:15px;border-radius:100%;background:green}@keyframes ball-zig{33%{transform:translate(-15px,-30px)}66%{transform:translate(15px,-30px)}to{transform:translate(0)}}@keyframes ball-zag{33%{transform:translate(15px,30px)}66%{transform:translate(-15px,30px)}to{transform:translate(0)}}.ball-zig-zag{position:relative;transform:translate(-15px,-15px)}.ball-zig-zag>div{background-color:#fff;width:15px;height:15px;border-radius:100%;margin:2px;animation-fill-mode:both;position:absolute;margin-left:15px;top:4px;left:-7px}.ball-zig-zag>div:first-child{animation:ball-zig .7s 0s infinite linear}.ball-zig-zag>div:last-child{animation:ball-zag .7s 0s infinite linear}@keyframes ball-zig-deflect{17%{transform:translate(-15px,-30px)}34%{transform:translate(15px,-30px)}50%{transform:translate(0)}67%{transform:translate(15px,-30px)}84%{transform:translate(-15px,-30px)}to{transform:translate(0)}}@keyframes ball-zag-deflect{17%{transform:translate(15px,30px)}34%{transform:translate(-15px,30px)}50%{transform:translate(0)}67%{transform:translate(-15px,30px)}84%{transform:translate(15px,30px)}to{transform:translate(0)}}.ball-zig-zag-deflect{position:relative;transform:translate(-15px,-15px)}.ball-zig-zag-deflect>div{background-color:#fff;width:15px;height:15px;border-radius:100%;margin:2px;animation-fill-mode:both;position:absolute;margin-left:15px;top:4px;left:-7px}.ball-zig-zag-deflect>div:first-child{animation:ball-zig-deflect 1.5s 0s infinite linear}.ball-zig-zag-deflect>div:last-child{animation:ball-zag-deflect 1.5s 0s infinite linear}@keyframes line-scale{0%{transform:scaley(1)}50%{transform:scaley(.4)}to{transform:scaley(1)}}.line-scale>div:first-child{animation:line-scale 1s -.4s infinite cubic-bezier(.2,.68,.18,1.08)}.line-scale>div:nth-child(2){animation:line-scale 1s -.3s infinite cubic-bezier(.2,.68,.18,1.08)}.line-scale>div:nth-child(3){animation:line-scale 1s -.2s infinite cubic-bezier(.2,.68,.18,1.08)}.line-scale>div:nth-child(4){animation:line-scale 1s -.1s infinite cubic-bezier(.2,.68,.18,1.08)}.line-scale>div:nth-child(5){animation:line-scale 1s 0s infinite cubic-bezier(.2,.68,.18,1.08)}.line-scale>div{background-color:#fff;width:4px;height:35px;border-radius:2px;margin:2px;animation-fill-mode:both;display:inline-block}@keyframes line-scale-party{0%{transform:scale(1)}50%{transform:scale(.5)}to{transform:scale(1)}}.line-scale-party>div:first-child{animation-delay:-.09s;animation-duration:.83s}.line-scale-party>div:nth-child(2){animation-delay:.33s;animation-duration:.64s}.line-scale-party>div:nth-child(3){animation-delay:.32s;animation-duration:.39s}.line-scale-party>div:nth-child(4){animation-delay:.47s;animation-duration:.52s}.line-scale-party>div{background-color:#fff;width:4px;height:35px;border-radius:2px;margin:2px;animation-fill-mode:both;display:inline-block;animation-name:line-scale-party;animation-iteration-count:infinite;animation-delay:0}@keyframes line-scale-pulse-out{0%{transform:scaley(1)}50%{transform:scaley(.4)}to{transform:scaley(1)}}.line-scale-pulse-out>div{background-color:#fff;width:4px;height:35px;border-radius:2px;margin:2px;animation-fill-mode:both;display:inline-block;animation:line-scale-pulse-out .9s -.6s infinite cubic-bezier(.85,.25,.37,.85)}.line-scale-pulse-out>div:nth-child(2),.line-scale-pulse-out>div:nth-child(4){animation-delay:-.4s!important}.line-scale-pulse-out>div:first-child,.line-scale-pulse-out>div:nth-child(5){animation-delay:-.2s!important}@keyframes line-scale-pulse-out-rapid{0%{transform:scaley(1)}80%{transform:scaley(.3)}90%{transform:scaley(1)}}.line-scale-pulse-out-rapid>div{background-color:#fff;width:4px;height:35px;border-radius:2px;margin:2px;animation-fill-mode:both;display:inline-block;animation:line-scale-pulse-out-rapid .9s -.5s infinite cubic-bezier(.11,.49,.38,.78)}.line-scale-pulse-out-rapid>div:nth-child(2),.line-scale-pulse-out-rapid>div:nth-child(4){animation-delay:-.25s!important}.line-scale-pulse-out-rapid>div:first-child,.line-scale-pulse-out-rapid>div:nth-child(5){animation-delay:0s!important}@keyframes line-spin-fade-loader{50%{opacity:.3}to{opacity:1}}.line-spin-fade-loader{position:relative;top:-10px;left:-4px}.line-spin-fade-loader>div:first-child{top:20px;left:0;animation:line-spin-fade-loader 1.2s -.84s infinite ease-in-out}.line-spin-fade-loader>div:nth-child(2){top:13.63636px;left:13.63636px;transform:rotate(-45deg);animation:line-spin-fade-loader 1.2s -.72s infinite ease-in-out}.line-spin-fade-loader>div:nth-child(3){top:0;left:20px;transform:rotate(90deg);animation:line-spin-fade-loader 1.2s -.6s infinite ease-in-out}.line-spin-fade-loader>div:nth-child(4){top:-13.63636px;left:13.63636px;transform:rotate(45deg);animation:line-spin-fade-loader 1.2s -.48s infinite ease-in-out}.line-spin-fade-loader>div:nth-child(5){top:-20px;left:0;animation:line-spin-fade-loader 1.2s -.36s infinite ease-in-out}.line-spin-fade-loader>div:nth-child(6){top:-13.63636px;left:-13.63636px;transform:rotate(-45deg);animation:line-spin-fade-loader 1.2s -.24s infinite ease-in-out}.line-spin-fade-loader>div:nth-child(7){top:0;left:-20px;transform:rotate(90deg);animation:line-spin-fade-loader 1.2s -.12s infinite ease-in-out}.line-spin-fade-loader>div:nth-child(8){top:13.63636px;left:-13.63636px;transform:rotate(45deg);animation:line-spin-fade-loader 1.2s 0s infinite ease-in-out}.line-spin-fade-loader>div{background-color:#fff;width:4px;height:35px;border-radius:2px;margin:2px;animation-fill-mode:both;position:absolute;width:5px;height:15px}@keyframes triangle-skew-spin{25%{transform:perspective(100px) rotateX(180deg) rotateY(0)}50%{transform:perspective(100px) rotateX(180deg) rotateY(180deg)}75%{transform:perspective(100px) rotateX(0) rotateY(180deg)}to{transform:perspective(100px) rotateX(0) rotateY(0)}}.triangle-skew-spin>div{animation-fill-mode:both;width:0;height:0;border-left:20px solid transparent;border-right:20px solid transparent;border-bottom:20px solid #fff;animation:triangle-skew-spin 3s 0s cubic-bezier(.09,.57,.49,.9) infinite}@keyframes square-spin{25%{transform:perspective(100px) rotateX(180deg) rotateY(0)}50%{transform:perspective(100px) rotateX(180deg) rotateY(180deg)}75%{transform:perspective(100px) rotateX(0) rotateY(180deg)}to{transform:perspective(100px) rotateX(0) rotateY(0)}}.square-spin>div{animation-fill-mode:both;width:50px;height:50px;background:#fff;border:1px solid red;animation:square-spin 3s 0s cubic-bezier(.09,.57,.49,.9) infinite}@keyframes rotate_pacman_half_up{0%{transform:rotate(270deg)}50%{transform:rotate(1turn)}to{transform:rotate(270deg)}}@keyframes rotate_pacman_half_down{0%{transform:rotate(90deg)}50%{transform:rotate(0deg)}to{transform:rotate(90deg)}}@keyframes pacman-balls{75%{opacity:.7}to{transform:translate(-100px,-6.25px)}}.pacman{position:relative}.pacman>div:nth-child(2){animation:pacman-balls 1s -.99s infinite linear}.pacman>div:nth-child(3){animation:pacman-balls 1s -.66s infinite linear}.pacman>div:nth-child(4){animation:pacman-balls 1s -.33s infinite linear}.pacman>div:nth-child(5){animation:pacman-balls 1s 0s infinite linear}.pacman>div:first-of-type{animation:rotate_pacman_half_up .5s 0s infinite}.pacman>div:first-of-type,.pacman>div:nth-child(2){width:0;height:0;border-right:25px solid transparent;border-top:25px solid #fff;border-left:25px solid #fff;border-bottom:25px solid #fff;border-radius:25px;position:relative;left:-30px}.pacman>div:nth-child(2){animation:rotate_pacman_half_down .5s 0s infinite;margin-top:-50px}.pacman>div:nth-child(3),.pacman>div:nth-child(4),.pacman>div:nth-child(5),.pacman>div:nth-child(6){background-color:#fff;width:15px;height:15px;border-radius:100%;margin:2px;width:10px;height:10px;position:absolute;transform:translateY(-6.25px);top:25px;left:70px}@keyframes cube-transition{25%{transform:translateX(50px) scale(.5) rotate(-90deg)}50%{transform:translate(50px,50px) rotate(-180deg)}75%{transform:translateY(50px) scale(.5) rotate(-270deg)}to{transform:rotate(-1turn)}}.cube-transition{position:relative;transform:translate(-25px,-25px)}.cube-transition>div{animation-fill-mode:both;width:10px;height:10px;position:absolute;top:-5px;left:-5px;background-color:#fff;animation:cube-transition 1.6s 0s infinite ease-in-out}.cube-transition>div:last-child{animation-delay:-.8s}@keyframes spin-rotate{0%{transform:rotate(0deg)}50%{transform:rotate(180deg)}to{transform:rotate(1turn)}}.semi-circle-spin{position:relative;width:35px;height:35px;overflow:hidden}.semi-circle-spin>div{position:absolute;border-width:0;border-radius:100%;animation:spin-rotate .6s 0s infinite linear;background-image:linear-gradient(transparent,transparent 70%,#fff 0,#fff);width:100%;height:100%}@keyframes bar-progress{0%{transform:scaleY(20%);opacity:1}25%{transform:translateX(6%) scaleY(10%);opacity:.7}50%{transform:translateX(20%) scaleY(20%);opacity:1}75%{transform:translateX(6%) scaleY(10%);opacity:.7}to{transform:scaleY(20%);opacity:1}}.bar-progress{width:30%;height:12px}.bar-progress>div{position:relative;width:20%;height:12px;border-radius:10px;background-color:#fff;animation:bar-progress 3s cubic-bezier(.57,.1,.44,.93) infinite;opacity:1}@keyframes bar-swing{0%{left:0}50%{left:70%}to{left:0}}.bar-swing,.bar-swing>div{width:30%;height:8px}.bar-swing>div{position:relative;border-radius:10px;background-color:#fff;animation:bar-swing 1.5s infinite}@keyframes bar-swing-container{0%{left:0;transform:translateX(0)}50%{left:70%;transform:translateX(-4px)}to{left:0;transform:translateX(0)}}.bar-swing-container{width:20%;height:8px;position:relative}.bar-swing-container div:first-child{position:absolute;width:100%;background-color:hsla(0,0%,100%,.2);height:12px;border-radius:10px}.bar-swing-container div:nth-child(2){position:absolute;width:30%;height:8px;border-radius:10px;background-color:#fff;animation:bar-swing-container 2s cubic-bezier(.91,.35,.12,.6) infinite;margin:2px 2px 0}.sk-spinner{color:#333}.sk-spinner>div{background-color:currentColor}.ball-scale-ripple-multiple>div,.ball-scale-ripple>div,.ball-triangle-path>div{background-color:transparent;background-color:initial;border-color:currentColor}.ball-clip-rotate>div{background-color:transparent;background-color:initial;border-top-color:currentColor;border-right-color:currentColor;border-left-color:currentColor}.ball-clip-rotate-pulse>div:first-child{background-color:currentColor}.ball-clip-rotate-pulse>div:last-child{background-color:transparent;background-color:initial;border-top-color:currentColor;border-bottom-color:currentColor}.ball-clip-rotate-multiple>div:first-child{background-color:transparent;background-color:initial;border-right-color:currentColor;border-left-color:currentColor}.ball-clip-rotate-multiple>div:last-child{border-top-color:currentColor}.ball-clip-rotate-multiple>div:last-child,.pacman>div:first-child,.pacman>div:nth-child(2),.triangle-skew-spin>div{background-color:transparent;background-color:initial;border-bottom-color:currentColor}.pacman>div:first-child,.pacman>div:nth-child(2){border-top-color:currentColor;border-left-color:currentColor}.pacman>div:nth-child(3),.pacman>div:nth-child(4),.pacman>div:nth-child(5){background-color:currentColor}@keyframes sk-fade-in{0%{opacity:0}50%{opacity:0}to{opacity:1}}.sk-fade-in{animation:sk-fade-in 2s}.sk-fade-in-half-second{animation:sk-fade-in 1s}.sk-fade-in-quarter-second{animation:sk-fade-in .5s}.sk-chasing-dots{width:27px;height:27px;position:relative;animation:sk-rotate 2s infinite linear}.sk-chasing-dots>div{width:60%;height:60%;display:inline-block;position:absolute;top:0;background-color:currentColor;border-radius:100%;animation:sk-bounce 2s infinite ease-in-out}.sk-chasing-dots>div:last-child{top:auto;bottom:0;animation-delay:-1s}@keyframes sk-rotate{to{transform:rotate(1turn);-webkit-transform:rotate(1turn)}}@keyframes sk-bounce{0%,to{transform:scale(0);-webkit-transform:scale(0)}50%{transform:scale(1);-webkit-transform:scale(1)}}.sk-circle{width:22px;height:22px;position:relative}.sk-circle>div{background-color:transparent;background-color:initial;width:100%;height:100%;position:absolute;left:0;top:0}.sk-circle>div:before{content:"";display:block;margin:0 auto;width:20%;height:20%;background-color:currentColor;border-radius:100%;animation:sk-bouncedelay 1.2s infinite ease-in-out;animation-fill-mode:both}.sk-circle>div:nth-child(2){transform:rotate(30deg)}.sk-circle>div:nth-child(3){transform:rotate(60deg)}.sk-circle>div:nth-child(4){transform:rotate(90deg)}.sk-circle>div:nth-child(5){transform:rotate(120deg)}.sk-circle>div:nth-child(6){transform:rotate(150deg)}.sk-circle>div:nth-child(7){transform:rotate(180deg)}.sk-circle>div:nth-child(8){transform:rotate(210deg)}.sk-circle>div:nth-child(9){transform:rotate(240deg)}.sk-circle>div:nth-child(10){transform:rotate(270deg)}.sk-circle>div:nth-child(11){transform:rotate(300deg)}.sk-circle>div:nth-child(12){transform:rotate(330deg)}.sk-circle>div:nth-child(2):before{animation-delay:-1.1s}.sk-circle>div:nth-child(3):before{animation-delay:-1s}.sk-circle>div:nth-child(4):before{animation-delay:-.9s}.sk-circle>div:nth-child(5):before{animation-delay:-.8s}.sk-circle>div:nth-child(6):before{animation-delay:-.7s}.sk-circle>div:nth-child(7):before{animation-delay:-.6s}.sk-circle>div:nth-child(8):before{animation-delay:-.5s}.sk-circle>div:nth-child(9):before{animation-delay:-.4s}.sk-circle>div:nth-child(10):before{animation-delay:-.3s}.sk-circle>div:nth-child(11):before{animation-delay:-.2s}.sk-circle>div:nth-child(12):before{animation-delay:-.1s}@keyframes sk-bouncedelay{0%,80%,to{transform:scale(0)}40%{transform:scale(1)}}.sk-cube-grid{width:27px;height:27px}.sk-cube-grid>div{width:33%;height:33%;background-color:currentColor;float:left;animation:sk-scaleDelay 1.3s infinite ease-in-out}.sk-cube-grid>div:first-child{animation-delay:.2s}.sk-cube-grid>div:nth-child(2){animation-delay:.3s}.sk-cube-grid>div:nth-child(3){animation-delay:.4s}.sk-cube-grid>div:nth-child(4){animation-delay:.1s}.sk-cube-grid>div:nth-child(5){animation-delay:.2s}.sk-cube-grid>div:nth-child(6){animation-delay:.3s}.sk-cube-grid>div:nth-child(7){animation-delay:0s}.sk-cube-grid>div:nth-child(8){animation-delay:.1s}.sk-cube-grid>div:nth-child(9){animation-delay:.2s}@keyframes sk-scaleDelay{0%,70%,to{transform:scale3D(1,1,1)}35%{transform:scale3D(0,0,1)}}.sk-double-bounce{width:27px;height:27px;position:relative}.sk-double-bounce>div{width:100%;height:100%;border-radius:50%;background-color:currentColor;opacity:.6;position:absolute;top:0;left:0;animation:sk-bounce 2s infinite ease-in-out}.sk-double-bounce>div:last-child{animation-delay:-1s}@keyframes sk-bounce{0%,to{transform:scale(0);-webkit-transform:scale(0)}50%{transform:scale(1);-webkit-transform:scale(1)}}.sk-folding-cube{width:27px;height:27px;position:relative;transform:rotate(45deg)}.sk-folding-cube>div{background-color:transparent;background-color:initial;float:left;width:50%;height:50%;position:relative;transform:scale(1.1)}.sk-folding-cube>div:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-color:currentColor;animation:sk-foldCubeAngle 2.4s infinite linear both;transform-origin:100% 100%}.sk-folding-cube>div:nth-child(2){transform:scale(1.1) rotate(90deg)}.sk-folding-cube>div:nth-child(4){transform:scale(1.1) rotate(180deg)}.sk-folding-cube>div:nth-child(3){transform:scale(1.1) rotate(270deg)}.sk-folding-cube>div:nth-child(2):before{animation-delay:.3s}.sk-folding-cube>div:nth-child(4):before{animation-delay:.6s}.sk-folding-cube>div:nth-child(3):before{animation-delay:.9s}@keyframes sk-foldCubeAngle{0%,10%{transform:perspective(140px) rotateX(-180deg);opacity:0}25%,75%{transform:perspective(140px) rotateX(0deg);opacity:1}90%,to{transform:perspective(140px) rotateY(180deg);opacity:0}}.sk-pulse>div{width:27px;height:27px;background-color:currentColor;border-radius:100%;animation:sk-scaleout 1s infinite ease-in-out}@keyframes sk-scaleout{0%{transform:scale(0);-webkit-transform:scale(0)}to{transform:scale(1);-webkit-transform:scale(1);opacity:0}}.sk-rotating-plane>div{width:27px;height:27px;background-color:currentColor;animation:sk-rotateplane 1.2s infinite ease-in-out}@keyframes sk-rotateplane{0%{transform:perspective(120px) rotateX(0deg) rotateY(0deg);-webkit-transform:perspective(120px) rotateX(0deg) rotateY(0deg)}50%{transform:perspective(120px) rotateX(-180.1deg) rotateY(0deg);-webkit-transform:perspective(120px) rotateX(-180.1deg) rotateY(0deg)}to{transform:perspective(120px) rotateX(-180deg) rotateY(-179.9deg);-webkit-transform:perspective(120px) rotateX(-180deg) rotateY(-179.9deg)}}.sk-three-bounce{height:18px}.sk-three-bounce>div{width:18px;height:18px;background-color:currentColor;border-radius:100%;display:inline-block;animation:sk-bouncedelay 1.4s infinite ease-in-out;animation-fill-mode:both}.sk-three-bounce>div:first-child{animation-delay:-.32s}.sk-three-bounce>div:nth-child(2){animation-delay:-.16s}@keyframes sk-bouncedelay{0%,80%,to{transform:scale(0);-webkit-transform:scale(0)}40%{transform:scale(1);-webkit-transform:scale(1)}}.sk-wandering-cubes{width:52px;height:52px;position:relative}.sk-wandering-cubes>div{background-color:currentColor;width:10px;height:10px;position:absolute;top:0;left:0;animation:sk-cubemove 1.8s infinite ease-in-out}.sk-wandering-cubes>div:last-child{animation-delay:-.9s}@keyframes sk-cubemove{25%{transform:translateX(42px) rotate(-90deg) scale(.5);-webkit-transform:translateX(42px) rotate(-90deg) scale(.5)}50%{transform:translateX(42px) translateY(42px) rotate(-179deg);-webkit-transform:translateX(42px) translateY(42px) rotate(-179deg)}50.1%{transform:translateX(42px) translateY(42px) rotate(-180deg);-webkit-transform:translateX(42px) translateY(42px) rotate(-180deg)}75%{transform:translateX(0) translateY(42px) rotate(-270deg) scale(.5);-webkit-transform:translateX(0) translateY(42px) rotate(-270deg) scale(.5)}to{transform:rotate(-1turn);-webkit-transform:rotate(-1turn)}}.sk-wave{width:30px;height:27px}.sk-wave>div{background-color:currentColor;height:100%;width:6px;display:inline-block;animation:sk-stretchdelay 1.2s infinite ease-in-out}.sk-wave>div:nth-child(2){animation-delay:-1.1s}.sk-wave>div:nth-child(3){animation-delay:-1s}.sk-wave>div:nth-child(4){animation-delay:-.9s}.sk-wave>div:nth-child(5){animation-delay:-.8s}@keyframes sk-stretchdelay{0%,40%,to{transform:scaleY(.4);-webkit-transform:scaleY(.4)}20%{transform:scaleY(1);-webkit-transform:scaleY(1)}}.sk-wordpress>div{width:27px;height:27px;background-color:currentColor;display:inline-block;border-radius:27px;position:relative;animation:sk-inner-circle 1s linear infinite}.sk-wordpress>div:after{content:"";display:block;background-color:#fff;width:8px;height:8px;position:absolute;border-radius:8px;top:5px;left:5px}@keyframes sk-inner-circle{0%{transform:rotate(0);-webkit-transform:rotate(0)}to{transform:rotate(1turn);-webkit-transform:rotate(1turn)}}</style></head><body><div id="react-mount"><div style="margin-bottom:1.5rem;" data-reactroot="" data-reactid="1" data-react-checksum="1835174340"><div style="max-width:960px;margin-left:auto;margin-right:auto;padding:1.5rem 1.125rem;padding-top:3rem;" data-reactid="2"><div data-reactid="3"><h1 data-reactid="4">React-Spinkit</h1><a href="https://github.com/KyleAMathews/react-spinkit" data-reactid="5">Browse code on GitHub</a><br data-reactid="6"/><br data-reactid="7"/><br data-reactid="8"/><h3 data-reactid="9">Spinkit Spinners</h3><div data-reactid="10"><div style="display:inline-block;width:50%;" data-reactid="11"><code data-reactid="12"><Spinner name="circle" /></code><div class="sk-fade-in sk-spinner sk-circle" data-reactid="16"><div data-reactid="17"></div><div data-reactid="18"></div><div data-reactid="19"></div><div data-reactid="20"></div><div data-reactid="21"></div><div data-reactid="22"></div><div data-reactid="23"></div><div data-reactid="24"></div><div data-reactid="25"></div><div data-reactid="26"></div><div data-reactid="27"></div><div data-reactid="28"></div></div></div><div style="display:inline-block;width:50%;" data-reactid="29"><code data-reactid="30"><Spinner name="circle" color="orange"/></code><div color="orange" style="color:orange;" class="sk-fade-in sk-spinner sk-circle" data-reactid="36"><div data-reactid="37"></div><div data-reactid="38"></div><div data-reactid="39"></div><div data-reactid="40"></div><div data-reactid="41"></div><div data-reactid="42"></div><div data-reactid="43"></div><div data-reactid="44"></div><div data-reactid="45"></div><div data-reactid="46"></div><div data-reactid="47"></div><div data-reactid="48"></div></div></div><br data-reactid="49"/><br data-reactid="50"/><br data-reactid="51"/></div><div data-reactid="52"><div style="display:inline-block;width:50%;" data-reactid="53"><code data-reactid="54"><Spinner name="cube-grid" /></code><div class="sk-fade-in sk-spinner sk-cube-grid" data-reactid="58"><div data-reactid="59"></div><div data-reactid="60"></div><div data-reactid="61"></div><div data-reactid="62"></div><div data-reactid="63"></div><div data-reactid="64"></div><div data-reactid="65"></div><div data-reactid="66"></div><div data-reactid="67"></div></div></div><div style="display:inline-block;width:50%;" data-reactid="68"><code data-reactid="69"><Spinner name="cube-grid" color="blue"/></code><div color="blue" style="color:blue;" class="sk-fade-in sk-spinner sk-cube-grid" data-reactid="75"><div data-reactid="76"></div><div data-reactid="77"></div><div data-reactid="78"></div><div data-reactid="79"></div><div data-reactid="80"></div><div data-reactid="81"></div><div data-reactid="82"></div><div data-reactid="83"></div><div data-reactid="84"></div></div></div><br data-reactid="85"/><br data-reactid="86"/><br data-reactid="87"/></div><div data-reactid="88"><div style="display:inline-block;width:50%;" data-reactid="89"><code data-reactid="90"><Spinner name="wave" /></code><div class="sk-fade-in sk-spinner sk-wave" data-reactid="94"><div data-reactid="95"></div><div data-reactid="96"></div><div data-reactid="97"></div><div data-reactid="98"></div><div data-reactid="99"></div></div></div><div style="display:inline-block;width:50%;" data-reactid="100"><code data-reactid="101"><Spinner name="wave" color="fuchsia"/></code><div color="fuchsia" style="color:fuchsia;" class="sk-fade-in sk-spinner sk-wave" data-reactid="107"><div data-reactid="108"></div><div data-reactid="109"></div><div data-reactid="110"></div><div data-reactid="111"></div><div data-reactid="112"></div></div></div><br data-reactid="113"/><br data-reactid="114"/><br data-reactid="115"/></div><div data-reactid="116"><div style="display:inline-block;width:50%;" data-reactid="117"><code data-reactid="118"><Spinner name="folding-cube" /></code><div class="sk-fade-in sk-spinner sk-folding-cube" data-reactid="122"><div data-reactid="123"></div><div data-reactid="124"></div><div data-reactid="125"></div><div data-reactid="126"></div></div></div><div style="display:inline-block;width:50%;" data-reactid="127"><code data-reactid="128"><Spinner name="folding-cube" color="aqua"/></code><div color="aqua" style="color:aqua;" class="sk-fade-in sk-spinner sk-folding-cube" data-reactid="134"><div data-reactid="135"></div><div data-reactid="136"></div><div data-reactid="137"></div><div data-reactid="138"></div></div></div><br data-reactid="139"/><br data-reactid="140"/><br data-reactid="141"/></div><div data-reactid="142"><div style="display:inline-block;width:50%;" data-reactid="143"><code data-reactid="144"><Spinner name="three-bounce" /></code><div class="sk-fade-in sk-spinner sk-three-bounce" data-reactid="148"><div data-reactid="149"></div><div data-reactid="150"></div><div data-reactid="151"></div></div></div><div style="display:inline-block;width:50%;" data-reactid="152"><code data-reactid="153"><Spinner name="three-bounce" color="fuchsia"/></code><div color="fuchsia" style="color:fuchsia;" class="sk-fade-in sk-spinner sk-three-bounce" data-reactid="159"><div data-reactid="160"></div><div data-reactid="161"></div><div data-reactid="162"></div></div></div><br data-reactid="163"/><br data-reactid="164"/><br data-reactid="165"/></div><div data-reactid="166"><div style="display:inline-block;width:50%;" data-reactid="167"><code data-reactid="168"><Spinner name="double-bounce" /></code><div class="sk-fade-in sk-spinner sk-double-bounce" data-reactid="172"><div data-reactid="173"></div><div data-reactid="174"></div></div></div><div style="display:inline-block;width:50%;" data-reactid="175"><code data-reactid="176"><Spinner name="double-bounce" color="blue"/></code><div color="blue" style="color:blue;" class="sk-fade-in sk-spinner sk-double-bounce" data-reactid="182"><div data-reactid="183"></div><div data-reactid="184"></div></div></div><br data-reactid="185"/><br data-reactid="186"/><br data-reactid="187"/></div><div data-reactid="188"><div style="display:inline-block;width:50%;" data-reactid="189"><code data-reactid="190"><Spinner name="wandering-cubes" /></code><div class="sk-fade-in sk-spinner sk-wandering-cubes" data-reactid="194"><div data-reactid="195"></div><div data-reactid="196"></div></div></div><div style="display:inline-block;width:50%;" data-reactid="197"><code data-reactid="198"><Spinner name="wandering-cubes" color="purple"/></code><div color="purple" style="color:purple;" class="sk-fade-in sk-spinner sk-wandering-cubes" data-reactid="204"><div data-reactid="205"></div><div data-reactid="206"></div></div></div><br data-reactid="207"/><br data-reactid="208"/><br data-reactid="209"/></div><div data-reactid="210"><div style="display:inline-block;width:50%;" data-reactid="211"><code data-reactid="212"><Spinner name="chasing-dots" /></code><div class="sk-fade-in sk-spinner sk-chasing-dots" data-reactid="216"><div data-reactid="217"></div><div data-reactid="218"></div></div></div><div style="display:inline-block;width:50%;" data-reactid="219"><code data-reactid="220"><Spinner name="chasing-dots" color="green"/></code><div color="green" style="color:green;" class="sk-fade-in sk-spinner sk-chasing-dots" data-reactid="226"><div data-reactid="227"></div><div data-reactid="228"></div></div></div><br data-reactid="229"/><br data-reactid="230"/><br data-reactid="231"/></div><div data-reactid="232"><div style="display:inline-block;width:50%;" data-reactid="233"><code data-reactid="234"><Spinner name="rotating-plane" /></code><div class="sk-fade-in sk-spinner sk-rotating-plane" data-reactid="238"><div data-reactid="239"></div></div></div><div style="display:inline-block;width:50%;" data-reactid="240"><code data-reactid="241"><Spinner name="rotating-plane" color="green"/><