_loading.scss

//
// @name Loading indicator
// @description Loading indicator
//
// @page Utilities/Loading indicator
//
// @state .loading-red
// @state .loading-blue
// @state .loading-green
// @state .loading-purple
//
// @markup
// <div class="loading">
//     <div></div>
//     <div></div>
//     <div></div>
//     <div></div>
// </div>
//

$loadingDotSize: 15px;

.loading {
    $duration: 5000ms;

    position: relative;
    background-color: $palette-4;

    max-width: 300px;
    height: 10px;
    border-radius: 5px;

    margin: 0 auto;
    overflow: hidden;

    div {
        position: absolute;
        top: 0;
        left: 0;
        height: 10px;
        width: 10px;
        border-radius: 5px;
    }

    div:nth-of-type(1) {
        background-color: $palette-1;
        width: 20px;
        animation: 2000ms loading-bar-1 ease-in-out infinite;
        z-index: 3;
    }

    div:nth-of-type(2) {
        background-color: $palette-2;
        width: 40px;
        animation: 2000ms loading-bar-2 ease-in-out infinite;
        right: 0;
        left: auto;
    }

    div:nth-of-type(3) {
        background-color: $palette-3;
        width: 60px;
        animation: 2000ms loading-bar-3 ease-in-out infinite;
    }

    div:nth-of-type(4) {
        background-color: $palette-5;
         width: 25px;
        animation: 2000ms loading-bar-4 ease-in-out infinite;
        right: 0;
        left: auto;
    }
}

.loading.loading-red {
    background-color: $palette-red-4;

    div:nth-of-type(1) {
        background-color: $palette-red-1;
    }

    div:nth-of-type(2) {
        background-color: $palette-red-2;
    }

    div:nth-of-type(3) {
        background-color: $palette-red-3;
    }

    div:nth-of-type(4) {
        background-color: $palette-red-5;
    }
}

.loading.loading-blue {
    background-color: $palette-blue-4;

    div:nth-of-type(1) {
        background-color: $palette-blue-1;
    }

    div:nth-of-type(2) {
        background-color: $palette-blue-2;
    }

    div:nth-of-type(3) {
        background-color: $palette-blue-3;
    }

    div:nth-of-type(4) {
        background-color: $palette-blue-5;
    }
}

.loading.loading-green {
    background-color: $palette-green-4;

    div:nth-of-type(1) {
        background-color: $palette-green-1;
    }

    div:nth-of-type(2) {
        background-color: $palette-green-2;
    }

    div:nth-of-type(3) {
        background-color: $palette-green-3;
    }

    div:nth-of-type(4) {
        background-color: $palette-green-5;
    }
}

.loading.loading-purple {
    background-color: $palette-purple-4;

    div:nth-of-type(1) {
        background-color: $palette-purple-1;
    }

    div:nth-of-type(2) {
        background-color: $palette-purple-2;
    }

    div:nth-of-type(3) {
        background-color: $palette-purple-3;
    }

    div:nth-of-type(4) {
        background-color: $palette-purple-5;
    }
}

@keyframes loading-bar-4 {
    0% {
        right: 0;
    }

    25% {
        right: 80px;
    }

    50% {
        right: 30px;
    }

    75% {
        right: 190px;
    }

    100% {
        right: 0;
    }
}

@keyframes loading-bar-3 {
    0% {
        left: 0;
    }

    25% {
        left: 10px;
    }

    50% {
        left: 110px;
    }

    75% {
        left: 40px;
    }

    100% {
        left: 0;
    }
}

@keyframes loading-bar-2 {
    0% {
        right: 0;
    }

    25% {
        right: 180px;
    }

    50% {
        right: 20px;
    }

    75% {
        right: 60px;
    }

    100% {
        right: 0;
    }
}

@keyframes loading-bar-1 {
    0% {
        left: 0;
    }

    25% {
        left: 170px;
    }

    50% {
        left: 100px;
    }

    75% {
        left: 110px;
    }

    100% {
        left: 0;
    }
}