A rather simple Loading animation using only a few CS triangles and animations
A Pen by Felix Rilling on CodePen.
A rather simple Loading animation using only a few CS triangles and animations
A Pen by Felix Rilling on CodePen.
<div id='container'> | |
<div class='triangle'></div> | |
<div class='triangle'></div> | |
<div class='triangle'></div> | |
<div class='triangle'></div> | |
<div class='triangle'></div> | |
</div> | |
<div id="linkBack" style="position:absolute;right:0px;top:0px;background-color:#333;margin:0;width:60px;"><a href="http://www.f-rilling.com/projects/" target="_blank" style="font-size:14px;text-decoration:none;color:#fff;padding:0 0 0 5px;font-family:sans-serif">My Site</a></div> |
$color_1:#90cdf2; | |
$color_2:#d390f2; | |
$color_3:#ea9071; | |
$color_4:#f2c390; | |
$color_5:#f5e983; | |
body { | |
background-color: #444; | |
} | |
#container { | |
width: 600px; | |
margin: 360px auto 0 auto; | |
} | |
triangleCon{ | |
height:600px; | |
} | |
.triangle { | |
width: 0px; | |
height: 0px; | |
opacity: 0.75; | |
margin: auto; | |
position:relative; | |
animation: enlarge_1 2s infinite; | |
} | |
.triangle:nth-child(2) { | |
animation: enlarge_2 2s infinite; | |
animation-delay: 0.2s; | |
} | |
.triangle:nth-child(3) { | |
animation: enlarge_3 2s infinite; | |
animation-delay: 0.4s; | |
} | |
.triangle:nth-child(4) { | |
animation: enlarge_4 2s infinite; | |
animation-delay: 0.6s; | |
}.triangle:nth-child(5) { | |
animation: enlarge_5 2s infinite; | |
animation-delay: 0.8s; | |
} | |
@keyframes enlarge_1 { | |
from { | |
opcatiy: 1; | |
border-left: 2px solid transparent; | |
border-right: 2px solid transparent; | |
border-bottom: 4px solid $color_1; | |
margin-top: 0px; | |
} | |
to { | |
opacity: 0; | |
border-left: 200px solid transparent; | |
border-right: 200px solid transparent; | |
border-bottom: 300px solid $color_1; | |
margin-top: -300px; | |
} | |
} | |
@keyframes enlarge_2 { | |
from { | |
opcatiy: 1; | |
border-left: 2px solid transparent; | |
border-right: 2px solid transparent; | |
border-bottom: 4px solid $color_2; | |
margin-top: -4px; | |
} | |
to { | |
opacity: 0; | |
border-left: 200px solid transparent; | |
border-right: 200px solid transparent; | |
border-bottom: 300px solid $color_2; | |
margin-top: -300px; | |
} | |
} | |
@keyframes enlarge_3 { | |
from { | |
opcatiy: 1; | |
border-left: 2px solid transparent; | |
border-right: 2px solid transparent; | |
border-bottom: 4px solid $color_3; | |
margin-top: -4px; | |
} | |
to { | |
opacity: 0; | |
border-left: 200px solid transparent; | |
border-right: 200px solid transparent; | |
border-bottom: 300px solid $color_3; | |
margin-top: -300px; | |
} | |
} | |
@keyframes enlarge_4 { | |
from { | |
opcatiy: 1; | |
border-left: 2px solid transparent; | |
border-right: 2px solid transparent; | |
border-bottom: 4px solid $color_4; | |
margin-top: -4px; | |
} | |
to { | |
opacity: 0; | |
border-left: 200px solid transparent; | |
border-right: 200px solid transparent; | |
border-bottom: 300px solid $color_4; | |
margin-top: -300px; | |
} | |
} | |
@keyframes enlarge_5 { | |
from { | |
opcatiy: 1; | |
border-left: 2px solid transparent; | |
border-right: 2px solid transparent; | |
border-bottom: 4px solid $color_5; | |
margin-top: -4px; | |
} | |
to { | |
opacity: 0; | |
border-left: 200px solid transparent; | |
border-right: 200px solid transparent; | |
border-bottom: 300px solid $color_5; | |
margin-top: -300px; | |
} | |
} |