From https://dribbble.com/shots/7030667-Lightning-Pre-loader-animation
A Pen by Aaron Iker on CodePen.
<div class="bolt"> | |
<svg viewBox="0 0 170 57" class="white left"> | |
<path d="M36.2701759,17.9733192 C-0.981139498,45.4810755 -7.86361824,57.6618438 15.6227397,54.5156241 C50.8522766,49.7962945 201.109341,31.1461782 161.361488,2"></path> | |
</svg> | |
<svg viewBox="0 0 170 57" class="white right"> | |
<path d="M36.2701759,17.9733192 C-0.981139498,45.4810755 -7.86361824,57.6618438 15.6227397,54.5156241 C50.8522766,49.7962945 201.109341,31.1461782 161.361488,2"></path> | |
</svg> | |
<div> | |
<span></span> | |
</div> | |
<svg viewBox="0 0 112 44" class="circle"> | |
<path d="M96.9355003,2 C109.46067,13.4022454 131.614152,42 56.9906735,42 C-17.6328048,42 1.51790702,13.5493875 13.0513641,2"></path> | |
</svg> | |
<svg viewBox="0 0 70 3" class="line left"> | |
<path transform="translate(-2.000000, 0.000000)" d="M2,1.5 L70,1.5"></path> | |
</svg> | |
<svg viewBox="0 0 70 3" class="line right"> | |
<path transform="translate(-2.000000, 0.000000)" d="M2,1.5 L70,1.5"></path> | |
</svg> | |
</div> | |
<small>Optimized for<br>Google Chrome Desktop</small> | |
<!-- dribbble --> | |
<a class="dribbble" href="https://dribbble.com/shots/7134825-Lightning-bolt-loader" target="_blank"><img src="https://dribbble.com/assets/logo-small-2x-9fe74d2ad7b25fba0f50168523c15fda4c35534f9ea0b1011179275383035439.png" alt=""></a> |
$('.bolt').each(function(e) { | |
var bolt = $(this), | |
div = $(this).children('div'); | |
bolt.addClass('animate'); | |
var tween = new TimelineMax({ | |
onComplete() { | |
bolt.removeClass('animate'); | |
repeat(); | |
} | |
}).set(div, { | |
rotation: 360 | |
}).to(div, .7, { | |
y: 80, | |
rotation: 370 | |
}).to(div, .6, { | |
y: -140, | |
rotation: 20 | |
}).to(div, .1, { | |
rotation: -24, | |
y: 80 | |
}).to(div, .8, { | |
ease: Back.easeOut.config(1.6), | |
rotation: 0, | |
y: 0 | |
}); | |
function repeat() { | |
setTimeout(() => { | |
bolt.addClass('animate'); | |
tween.restart(); | |
}, 400); | |
} | |
}) |
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TimelineMax.min.js"></script> |
.bolt { | |
--bolt: rgb(242, 222, 16); | |
width: 126px; | |
height: 186px; | |
position: relative; | |
svg { | |
position: absolute; | |
display: block; | |
stroke-width: 4; | |
fill: none; | |
stroke-linecap: round; | |
stroke: var(--bolt); | |
&.circle { | |
left: 7px; | |
top: 100%; | |
width: 112px; | |
height: 44px; | |
stroke-dashoffset: 179px; | |
stroke-dasharray: 0px 178px | |
} | |
&.line { | |
--r: 0deg; | |
top: 95%; | |
width: 70px; | |
height: 3px; | |
stroke-dashoffset: 71px; | |
stroke-dasharray: 0px 70px; | |
transform: rotate(var(--r)); | |
&.left { | |
--r: 130deg; | |
left: -24px; | |
} | |
&.right { | |
--r: 40deg; | |
right: -24px; | |
} | |
} | |
&.white { | |
--r: 0deg; | |
--s: 1; | |
top: 30%; | |
z-index: 1; | |
stroke: #fff; | |
stroke-dashoffset: 241px; | |
stroke-dasharray: 0px 240px; | |
transform: rotate(var(--r)) scaleX(var(--s)); | |
&.left { | |
--r: -20deg; | |
left: 0; | |
} | |
&.right { | |
--r: 20deg; | |
--s: -1; | |
right: 0; | |
} | |
} | |
} | |
div { | |
display: block; | |
position: relative; | |
&:before, | |
&:after { | |
content: ''; | |
position: absolute; | |
left: 50%; | |
top: 44%; | |
} | |
&:before { | |
width: 112px; | |
height: 112px; | |
margin: -56px 0 0 -56px; | |
background: #CDD9ED; | |
filter: blur(124px); | |
} | |
&:after { | |
width: 64px; | |
height: 64px; | |
margin: -32px 0 0 -32px; | |
background: #FFF9BC; | |
z-index: 1; | |
filter: blur(60px); | |
} | |
span { | |
display: block; | |
width: 126px; | |
height: 186px; | |
background: var(--bolt); | |
clip-path: polygon(40% 0%, 100% 0, 65% 40%, 88% 40%, 8% 100%, 36% 50%, 0 50%); | |
} | |
} | |
&.animate { | |
div { | |
&:before, | |
&:after { | |
animation: shine 2s ease; | |
} | |
span { | |
animation: morph 2s ease; | |
} | |
} | |
svg { | |
&.circle { | |
animation: circle .45s cubic-bezier(0.77, 0, 0.175, 1) forwards 1.3s; | |
} | |
&.line { | |
animation: line .45s cubic-bezier(0.77, 0, 0.175, 1) forwards 1.3s; | |
} | |
&.white { | |
animation: white .45s cubic-bezier(0.77, 0, 0.175, 1) forwards 1.45s; | |
&.right { | |
animation-delay: 1.6s; | |
} | |
} | |
} | |
} | |
} | |
@keyframes circle { | |
100% { | |
stroke-dasharray: 178px 178px | |
} | |
} | |
@keyframes white { | |
100% { | |
stroke-dasharray: 240px 240px | |
} | |
} | |
@keyframes line { | |
100% { | |
stroke-dasharray: 70px 70px | |
} | |
} | |
@keyframes shine { | |
30%, | |
70% { | |
opacity: 0; | |
} | |
} | |
@keyframes morph { | |
12% { | |
clip-path: polygon(40% 5%, 100% 0, 65% 40%, 65% 40%, 8% 100%, 24% 50%, 24% 50%); | |
} | |
24%, | |
72% { | |
clip-path: polygon(36% 40%, 82% 40%, 82% 40%, 82% 40%, 36% 71%, 36% 40%, 36% 40%); | |
} | |
84% { | |
clip-path: polygon(40% 5%, 100% 0, 65% 40%, 65% 40%, 8% 100%, 24% 50%, 24% 50%); | |
} | |
} | |
html { | |
box-sizing: border-box; | |
-webkit-font-smoothing: antialiased; | |
} | |
* { | |
box-sizing: inherit; | |
&:before, | |
&:after { | |
box-sizing: inherit; | |
} | |
} | |
// Center & dribbble | |
small { | |
position: absolute; | |
bottom: 32px; | |
font-size: 14px; | |
font-family: Arial; | |
text-align: center; | |
line-height: 19px; | |
color: #6C7486; | |
left: 50%; | |
transform: translateX(-50%); | |
} | |
body { | |
min-height: 100vh; | |
display: flex; | |
justify-content: center; | |
align-items: center; | |
background: #0C0F17; | |
.dribbble { | |
position: fixed; | |
display: block; | |
right: 24px; | |
bottom: 24px; | |
img { | |
display: block; | |
width: 76px; | |
} | |
} | |
} |