Skip to content

Instantly share code, notes, and snippets.

@Kunoacc
Created May 30, 2020 22:09
Show Gist options
  • Save Kunoacc/2f4ba04f26987622a70231fa3c508e53 to your computer and use it in GitHub Desktop.
Save Kunoacc/2f4ba04f26987622a70231fa3c508e53 to your computer and use it in GitHub Desktop.
Bolt loader animation
<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;
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment