Bolt loader animation

bolt-loader-animation.markdown

Bolt loader animation

From https://dribbble.com/shots/7030667-Lightning-Pre-loader-animation

A Pen by Aaron Iker on CodePen.

License.

index.html

<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>

script.js

$('.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);
    }

})

scripts

<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>

style.scss

.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;
        }
    }
}