@keyframes rotator {
0% { transform: rotate(0deg); }
100% { transform: rotate(270deg); }
}
@keyframes colors {
0% { stroke: #0091EA; }
33% { stroke: #00C853; }
100% { stroke: #0091EA; }
}
@keyframes dash {
0% { stroke-dashoffset: 187; }
50% {
stroke-dashoffset: 46.75;
transform:rotate(135deg);
}
100% {
stroke-dashoffset: 187;
transform:rotate(450deg);
}
}
.container {
position: fixed;
z-index: 1000;
top: 50%;
left: 50%;
margin-top: -32px;
margin-left: -32px;
height: 0;
opacity: 0;
-webkit-transition: all 0.1s;
transition: all 0.1s;
}
.container.visible {
height: 65px;
opacity: 1;
}
.container.absolute {
position: absolute;
}
.spinner {
display: block;
height: 65px;
width: 65px;
margin: 0 auto;
animation: rotator 1.4s linear infinite;
}
.spinner-path {
stroke-width: 3px;
stroke-linecap: round;
stroke-dasharray: 187;
stroke-dashoffset: 0;
transform-origin: center;
animation:
dash 1.4s ease-in-out infinite,
colors 5.6s ease-in-out infinite;
}
|