Circle Loading animation using clip-path example.
A Pen by Elior Shalev Tabeka on CodePen.
Circle Loading animation using clip-path example.
A Pen by Elior Shalev Tabeka on CodePen.
<div></div> | |
<div></div> |
@import "compass/css3"; | |
@import "compass/css3"; | |
$color : hsl(30,11%,94%); | |
$background : hsl(24,75%,40%); | |
$duration : 1.75s; | |
$a : 40% at 50% 50%; | |
$b : 25% at 50% 50%; | |
@mixin path($path) { | |
-webkit-clip-path: circle($path); | |
clip-path: circle($path); | |
} | |
html, body { | |
height: 100%; | |
} | |
body { | |
display: flex; | |
justify-content: center; | |
align-items: center; | |
background: $background; | |
overflow: hidden; | |
animation: spin $duration ease-in-out infinite; | |
} | |
div { | |
width: 100%; | |
height: 100%; | |
max-width: 20px; | |
max-height: 20px; | |
background: $color; | |
animation: loader $duration ease-in-out infinite both; | |
} | |
@keyframes loader { | |
0% { | |
@include path($a); | |
} | |
50% { | |
@include path($b); | |
} | |
100% { | |
@include path($a); | |
} | |
} | |
@keyframes spin { | |
to { | |
transform: rotate(5turn); | |
} | |
} |