csspin/css/csspin-pinwheel.css

CSS Spinners and Loaders - Modular, Customizable and Single HTML Element Code

.cp-spinner{width:48px;height:48px;display:inline-block;box-sizing:border-box;position:relative}.cp-pinwheel{border-radius:50%;width:48px;height:48px;display:inline-block;box-sizing:border-box;border-top:solid 24px #0fd6ff;border-right:solid 24px #58bd55;border-bottom:solid 24px #eb68a1;border-left:solid 24px #f3d53f;animation:cp-pinwheel-animate 1s linear infinite}@keyframes cp-pinwheel-animate{0%{border-top-color:#0fd6ff;border-right-color:#58bd55;border-bottom-color:#eb68a1;border-left-color:#f3d53f;transform:rotate(0)}25%{border-top-color:#eb68a1;border-right-color:#f3d53f;border-bottom-color:#0fd6ff;border-left-color:#58bd55}50%{border-top-color:#0fd6ff;border-right-color:#58bd55;border-bottom-color:#eb68a1;border-left-color:#f3d53f}75%{border-top-color:#eb68a1;border-right-color:#f3d53f;border-bottom-color:#0fd6ff;border-left-color:#58bd55}100%{border-top-color:#0fd6ff;border-right-color:#58bd55;border-bottom-color:#eb68a1;border-left-color:#f3d53f;transform:rotate(360deg)}}