Files
talk/client/coral-ui/components/Spinner.css
T

69 lines
1.1 KiB
CSS

.container {
display: block;
text-align: center;
}
.spinner {
animation: rotator 1.4s linear infinite;
}
@keyframes rotator {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(270deg);
}
}
.path {
stroke: #f67150;
stroke-dasharray: 187;
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: #f67150;
}
100% {
stroke: #f6a47e;
}
}
@keyframes dash {
0% {
stroke-dashoffset: 187;
}
50% {
stroke-dashoffset: 46.75;
transform: rotate(135deg);
}
100% {
stroke-dashoffset: 187;
transform: rotate(450deg);
}
}
@keyframes fullRotator {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/* Hack for IE and Edge as they don't support css animations on SVG elements. */
_:-ms-lang(x), .path {
stroke-dasharray: 160;
}
_:-ms-lang(x), .spinner {
animation: fullRotator 1.4s linear infinite;
}