.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; /* Light grey */
    border-top: 10px solid #3498db; /* Blue */
    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(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    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)}
}