.hon-spinner{margin-left:20px;width:40px;height:40px;display:inline-block;box-sizing:border-box;position:relative;vertical-align:middle}
.sp-loader{border:10px solid #f3f3f3;border-top:10px solid #3498db;border-radius:50%;animation:spin 2s linear infinite}
.sp-circle{border:12px solid #f3f3f3;border-radius:50%;border-top:12px solid #f06318;border-bottom:12px solid #f06318;-webkit-animation:spin 2s linear infinite;animation:spin 2s linear infinite}
@-webkit-keyframes spin{0{-webkit-transform:rotate(0)}
100%{-webkit-transform:rotate(360deg)}
}
@keyframes spin{0{transform:rotate(0)}
100%{transform:rotate(360deg)}
}
.sp-flip{transform-style:preserve-3d;perspective:10em}
.sp-flip:before{display:inline-block;box-sizing:border-box;background:#f56151;content:" ";position:absolute;width:40px;height:40px;top:0;left:0;animation:cp-flip-animate-before 2s linear infinite}
@keyframes cp-flip-animate-before{0{transform:rotateY(0) rotateX(0)}
25%{transform:rotateY(360deg) rotateX(0)}
50%{transform:rotateY(360deg) rotateX(360deg)}
75%{transform:rotateY(0) rotateX(360deg)}
100%{transform:rotateY(0) rotateX(0)}
}
.sp-eclipse{width:12px;height:12px;display:inline-block;box-sizing:border-box;border-radius:50%;background:#f3d53f;animation:cp-eclipse-animate 1s ease-out infinite}
.sp-eclipse:before{border-radius:50%;content:" ";width:40px;height:40px;display:inline-block;box-sizing:border-box;border-top:solid 6px transparent;border-right:solid 6px #f3d53f;border-bottom:solid 6px transparent;border-left:solid 6px transparent;position:absolute;top:-14px;left:-14px}
.sp-eclipse:after{border-radius:50%;content:" ";width:40px;height:40px;display:inline-block;box-sizing:border-box;border-top:solid 6px transparent;border-right:solid 6px transparent;border-bottom:solid 6px transparent;border-left:solid 6px #f3d53f;position:absolute;top:-14px;right:-14px}
@keyframes cp-eclipse-animate{0{transform:rotate(0)}
100%{transform:rotate(360deg)}
}
.sp-meter{border-radius:50%;border-top:solid 6px #0fd6ff;border-right:solid 6px #0fd6ff;border-bottom:solid 6px #0fd6ff;border-left:solid 6px #0fd6ff;display:inline-block;box-sizing:border-box}
.sp-meter:before{border-radius:3px;content:" ";width:6px;height:12px;display:inline-block;box-sizing:border-box;background-color:#0fd6ff;position:absolute;top:3px;left:10px;transform-origin:center bottom;animation:cp-meter-animate-before 1s linear infinite}
@keyframes cp-meter-animate-before{0{transform:rotate(-45deg)}
100%{transform:rotate(315deg)}
}