Square Loading animation using clip-path example.
A Pen by Elior Shalev Tabeka on CodePen.
<div></div> |
Square Loading animation using clip-path example.
A Pen by Elior Shalev Tabeka on CodePen.
@import "compass/css3"; | |
@import "compass/css3"; | |
$color : hsl(30,11%,94%); | |
$duration : 1.75s; | |
$a : 0% 0%, 0% 100%, 2% 98%, 2% 2%, 98% 2%, 98% 98%, 0 98%, 0 100%, 100% 100%, 100% 0; | |
$b : 0% 0%, 0% 100%, 2% 98%, 2% 2%, 98% 2%, 98% 0, 0 0, 0 100%, 100% 100%, 100% 0; | |
@mixin path($path) { | |
-webkit-clip-path: polygon($path); | |
clip-path: polygon($path); | |
} | |
html, body { | |
height: 100%; | |
} | |
body { | |
display: flex; | |
justify-content: center; | |
align-items: center; | |
background: hsl(164,50%,25%); | |
overflow: hidden; | |
animation: spin $duration*1 ease-in-out infinite; | |
} | |
div { | |
width: 100%; | |
height: 100%; | |
max-width: 50px; | |
max-height: 50px; | |
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 { | |
0% { | |
transform: rotate(0deg); | |
} | |
25% { | |
transform: rotate(180deg); | |
} | |
50% { | |
transform: rotate(180deg); | |
} | |
75% { | |
transform: rotate(360deg); | |
} | |
100% { | |
transform: rotate(360deg); | |
} | |
} |