wassname/talk
1
0
Fork 0
mirror of https://github.com/wassname/talk.git synced 2026-07-15 11:26:58 +08:00
Code Issues Packages Projects Releases Wiki Activity

Simplified Spinner for IE and Edge for Spinner (using css hacks)

Browse Source
This commit is contained in:
Chi Vinh Le
2017-10-24 18:47:55 +02:00
parent ca1ce9ba76
commit 934b630ce2
1 changed files with 23 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/coral-ui/components/Spinner.css
+23 -42
View File
@@ -4,49 +4,28 @@
}
.spinner {
-webkit-animation: rotator 1.4s linear infinite;
animation: rotator 1.4s linear infinite;
}
@-webkit-keyframes rotator {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(270deg);
transform: rotate(270deg);
}
}
@keyframes rotator {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(270deg);
transform: rotate(270deg);
}
}
.path {
stroke: #f67150;
stroke-dasharray: 187;
stroke-dashoffset: 0;
-webkit-transform-origin: center;
transform-origin: center;
-webkit-animation: dash 1.4s ease-in-out infinite, colors 5.6s ease-in-out infinite;
animation: dash 1.4s ease-in-out infinite, colors 5.6s ease-in-out infinite;
}
@-webkit-keyframes colors {
0% {
stroke: #f67150;
}
100% {
stroke: #f6a47e;
}
}
@keyframes colors {
0% {
stroke: #f67150;
@@ -55,33 +34,35 @@
stroke: #f6a47e;
}
}
@-webkit-keyframes dash {
0% {
stroke-dashoffset: 187;
}
50% {
stroke-dashoffset: 46.75;
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
}
100% {
stroke-dashoffset: 187;
-webkit-transform: rotate(450deg);
transform: rotate(450deg);
}
}
@keyframes dash {
0% {
stroke-dashoffset: 187;
}
50% {
stroke-dashoffset: 46.75;
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
}
100% {
stroke-dashoffset: 187;
-webkit-transform: rotate(450deg);
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;
}