Skip to content

Instantly share code, notes, and snippets.

@Tusko
Created April 4, 2016 06:40
Show Gist options
  • Save Tusko/b8ff5c43553689d846c0f65831cd9b49 to your computer and use it in GitHub Desktop.
Save Tusko/b8ff5c43553689d846c0f65831cd9b49 to your computer and use it in GitHub Desktop.
$green: #008744;
$blue: #0057e7;
$red: #d62d20;
$yellow: #ffa700;
// scaling... any units
$width: 30px;
.showbox {
-webkit-transition: all .5s ease;
transition: all .5s ease;
margin: -50px auto 0;
opacity: 0;
&.process {
opacity: 1;
}
}
.loader {
position: relative;
margin: 0px auto;
width: $width;
&:before {
content:'';
display: block;
padding-top: 100%;
}
}
.circular {
animation: rotate 2s linear infinite;
height: 100%;
transform-origin: center center;
width: 100%;
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
margin: auto;
}
.path {
stroke-dasharray: 1,200;
stroke-dashoffset: 0;
animation:
dash 1.5s ease-in-out infinite,
color 6s ease-in-out infinite
;
stroke-linecap: round;
}
@keyframes rotate{
100%{
transform: rotate(360deg);
}
}
@keyframes dash{
0%{
stroke-dasharray: 1,200;
stroke-dashoffset: 0;
}
50%{
stroke-dasharray: 89,200;
stroke-dashoffset: -35px;
}
100%{
stroke-dasharray: 89,200;
stroke-dashoffset: -124px;
}
}
@keyframes color{
100%, 0%{
stroke: $red;
}
40%{
stroke: $blue;
}
66%{
stroke: $green;
}
80%, 90%{
stroke: $yellow;
}
}
<div class="showbox">
<div class="loader">
<svg class="circular" viewBox="25 25 50 50">
<circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10"/>
</svg>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment