Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<div class="loader">
<svg class="circular">
<circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10"/>
</svg>
</div>

Modern Google Loader in Pure CSS ('-' * 32) Modern Google spinning loader animating through four colors.

A Pen by jczimm on CodePen.

License.

$green: #008744;
$blue: #0057e7;
$red: #d62d20;
$yellow: #ffa700;
$white: #eee;
$width: 100px;
$zoom: 1.7;
body {
background-color: $white;
}
.loader {
position: relative;
margin: 0px auto;
width: $width;
height: $width;
zoom: $zoom;
}
.circular {
animation: rotate 2s linear infinite;
height: $width;
position: relative;
width: $width;
}
.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: -35;
}
100%{
stroke-dasharray: 89,200;
stroke-dashoffset: -124;
}
}
@keyframes color{
100%, 0%{
stroke: $red;
}
40%{
stroke: $blue;
}
66%{
stroke: $green;
}
80%, 90%{
stroke: $yellow;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment