Switch loading animation

index.html

<label class="switch">
    <input type="checkbox">
    <div></div>
    <span>Switch me</span>
</label>

<!-- dribbble -->
<a class="dribbble" href="https://dribbble.com/shots/4772606-Switch-loading-animation" target="_blank"><img src="https://cdn.dribbble.com/assets/dribbble-ball-1col-dnld-e29e0436f93d2f9c430fde5f3da66f94493fdca66351408ab0f96e2ec518ab17.png" alt=""></a>

script.js

$(document).ready(function() {

    $('.switch').on('click', function(e) {
        e.preventDefault();

        var self = $(this);
        var input = self.children('input');

        if(input.is(':checked')) {
            input.prop('checked', false);
        } else {
            self.addClass('load');
            //Fake ajax call
            setTimeout(function() {
                //If finished
                self.removeClass('load');
                input.prop('checked', true);
            }, 2000);
        }

    });

});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>

style.scss

$switchSize: 20px;
$switchBorder: #D1D7E3;
$switchBackground: #D1D7E3;
$switchDot: #fff;
$switchActive: #9EC4FF;
$switchBorderActive: #5D9BFB;

.switch {
    margin: 0;
    cursor: pointer;
    & > span {
        line-height: $switchSize;
        margin: 0 0 0 4px;
        vertical-align: top;
    }
    input {
        display: none;
        & + div {
            width: $switchSize * 2;
            height: $switchSize;
            border: 1px solid $switchBorder;
            background: $switchBackground;
            border-radius: $switchSize / 2;
            vertical-align: top;
            position: relative;
            display: inline-block;
            user-select: none;
            transition: all .4s ease;
            &:before {
                content: '';
                float: left;
                width: $switchSize - 6;
                height: $switchSize - 6;
                background: $switchDot;
                pointer-events: none;
                margin-top: 2px;
                margin-left: 2px;
                border-radius: inherit;
                transition: all .4s ease 0s;
            }
            &:after {
                content: '';
                left: -1px;
                top: -1px;
                width: $switchSize;
                height: $switchSize;
                border: 3px solid transparent;
                border-top-color: $switchBorderActive;
                border-radius: 50%;
                position: absolute;
                opacity: 0;
            }
        }
        &:checked + div {
            background: $switchActive;
            border: 1px solid $switchBorderActive;
            &:before {
                transform: translate($switchSize, 0);
            }
        }
    }
    &.load {
        input {
            & + div {
                width: $switchSize;
                margin: 0 $switchSize / 2;
                &:after {
                    opacity: 1;
                    animation: rotate .9s infinite linear;
                    animation-delay: .2s;
                }
            }
        }
    }
    &:hover {
        input {
            &:disabled + div {
                border-color: $switchBorder;
            }
            &:checked + div {
                background: $switchBorderActive;
            }
        }
    }
}

@keyframes rotate {
    0%,
    15% {
        transform: rotate(0deg);
    }
    50% {
        transform: rotate(290deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

html {
    box-sizing: border-box;
}

* {
    box-sizing: inherit;
    &:before,
    &:after {
        box-sizing: inherit;
    }
}

// Center & dribbble
body {
    min-height: 100vh;
    font-family: Roboto, Arial;
    color: #ADAFB6;
    display: flex;
    justify-content: center;
    align-items: center;
    .dribbble {
        position: fixed;
        display: block;
        right: 20px;
        bottom: 20px;
        opacity: .5;
        transition: all .4s ease;
        &:hover {
            opacity: 1;
        }
        img {
            display: block;
            height: 36px;
        }
    }
}

styles

<link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700" rel="stylesheet" />

switch-loading-animation.markdown

Switch loading animation

Switch for server calls

Dribbble Shot

A Pen by Aaron Iker on CodePen.

License.