<section class="main">
        <div class="main__content">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>

            <div class="main__content__two">
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </div>
        </div>

// Global Styles

* {
    margin: 0;
    padding: 0;
}

html,
body {
    height: 100%;
    width: 100%;
    box-sizing: border-box;
}

// Main Styles

.main {
    width: 100%;
    height: 100%;
    background: #161616;
    display: flex;
    justify-content: center;
    align-items: center;

    &__content {
        position: relative;
        width: 480px;
        height: 480px;
        box-shadow: 0px 8px 24px rgba($color: #000, $alpha:0.5);
        overflow: hidden;

        li {
            width: 100%;
            height: calc(480px / 12);
            background: #161616;
            box-shadow: 0px -1px 8px rgba($color: #000, $alpha:0.5);
            list-style: none;
        }
    }

    &__content__two {
        position: absolute;
        top: 0;
        left: 0;
        width: 480px;
        height: 480px;
        @for $i from 1 through 12 {
            :nth-child(#{$i}) {
              animation-delay: $i * (2s / random(5));
            }
          }

        li {
            width: 100%;
            height: calc(480px / 12);
            background: slateblue;
            box-shadow: 0px -1px 8px rgba($color: #000, $alpha:0.5);
            list-style: none;
            animation: liAnimation  4s  ease-in-out forwards infinite;
        }
    }

}

@keyframes liAnimation {
    0% {
        width: 100%;
    }

    50% {
        width: 0%;
    }
    100% {
        width: 100%;
    }
}