Created
June 29, 2020 21:56
-
-
Save FarazPatankar/21fdb98a31b1e2aa663565175e11cf0a to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.Spinner { | |
animation: rotate 1.3s linear infinite; | |
} | |
.SpinnerContainer-large { | |
position: fixed; | |
top: 50%; | |
left: 50%; | |
transform: translate(-50%, -50%); | |
} | |
@keyframes rotate { | |
0% { | |
transform: rotate(0deg); | |
} | |
100% { | |
transform: rotate(270deg); | |
} | |
} | |
.SmallSpinnerPath { | |
stroke-dasharray: 100; | |
stroke-dashoffset: 0; | |
transform-origin: center; | |
animation: SmallDash 1.3s ease-in-out infinite; | |
} | |
@keyframes SmallDash { | |
0% { | |
stroke-dashoffset: 100; | |
} | |
50% { | |
stroke-dashoffset: 50; | |
transform: rotate(135deg); | |
} | |
100% { | |
stroke-dashoffset: 100; | |
transform: rotate(450deg); | |
} | |
} | |
.MediumSpinnerPath { | |
stroke-dasharray: 150; | |
stroke-dashoffset: 0; | |
transform-origin: center; | |
animation: MediumDash 1.3s ease-in-out infinite; | |
} | |
@keyframes MediumDash { | |
0% { | |
stroke-dashoffset: 150; | |
} | |
50% { | |
stroke-dashoffset: 50; | |
transform: rotate(135deg); | |
} | |
100% { | |
stroke-dashoffset: 150; | |
transform: rotate(450deg); | |
} | |
} | |
.LargeSpinnerPath { | |
stroke-dasharray: 200; | |
stroke-dashoffset: 0; | |
transform-origin: center; | |
animation: LargeDash 1.3s ease-in-out infinite; | |
} | |
@keyframes LargeDash { | |
0% { | |
stroke-dashoffset: 200; | |
} | |
50% { | |
stroke-dashoffset: 50; | |
transform: rotate(135deg); | |
} | |
100% { | |
stroke-dashoffset: 200; | |
transform: rotate(450deg); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment