53 lines
841 B
HTML
53 lines
841 B
HTML
// from http://codepen.io/mrrocks/
|
|
|
|
.spinner-container {
|
|
z-index:100;
|
|
position:absolute;
|
|
top:50%;
|
|
left:50%;
|
|
width:33;
|
|
height:33;
|
|
margin-left: -17px;
|
|
margin-top: -17px;
|
|
}
|
|
.spinner {
|
|
animation: rotator 1.4s linear infinite;
|
|
}
|
|
|
|
@keyframes rotator {
|
|
0% { transform: rotate(0deg); }
|
|
100% { transform: rotate(270deg); }
|
|
}
|
|
|
|
.path {
|
|
stroke-dasharray: 184;
|
|
stroke-dashoffset: 0;
|
|
transform-origin: center;
|
|
animation:
|
|
dash 1.4s ease-in-out infinite,
|
|
colors 5.6s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes colors {
|
|
0% { stroke: #4285F4; }
|
|
25% { stroke: #DE3E35; }
|
|
50% { stroke: #F7C223; }
|
|
75% { stroke: #1B9A59; }
|
|
100% { stroke: #4285F4; }
|
|
}
|
|
|
|
@keyframes dash {
|
|
0% { stroke-dashoffset: 184; }
|
|
50% {
|
|
stroke-dashoffset: 46;
|
|
transform:rotate(135deg);
|
|
}
|
|
100% {
|
|
stroke-dashoffset: 184;
|
|
transform:rotate(450deg);
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|