These are gifs you can use in your projects. These animation come from the Material Design language Google introduced (here are some examples of material design).
In need of a CSS Android Lollipop loading animation? Try this codepen.
<svg class="spinner" width="65px" height="65px" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg"> <circle class="path" fill="none" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="30"></circle> </svg>
html, body { height: 100%; }
body {
display: flex;
align-items: center;
justify-content: center;
}
// Here is where the magic happens
$offset: 187;
$duration: 1.4s;
.spinner {
animation: rotator $duration linear infinite;
}
@keyframes rotator {
0% { transform: rotate(0deg); }
100% { transform: rotate(270deg); }
}
.path {
stroke-dasharray: $offset;
stroke-dashoffset: 0;
transform-origin: center;
animation:
dash $duration ease-in-out infinite,
colors ($duration*4) ease-in-out infinite;
}
@keyframes colors {
0% { stroke: #4285F4; }
25% { stroke: #DE3E35; }
50% { stroke: #F7C223; }
75% { stroke: #1B9A59; }
100% { stroke: #4285F4; }
}
@keyframes dash {
0% { stroke-dashoffset: $offset; }
50% {
stroke-dashoffset: $offset/4;
transform:rotate(135deg);
}
100% {
stroke-dashoffset: $offset;
transform:rotate(450deg);
}
}
Hi Thomas,
Very helpful post, I hope it is okay if I download an image from here to use in my projects ?
Yes.
It does not work in Firefox =/
USE CHROME
Does not work :(
could you please make a spinner like google’s new one?i think it’s very goodlooking(*/ω＼*)