JSFiddle - React, Tailwind, and code Playground

by CodeRenaissance

HTML

<div style ="width:300;height:300;">
  <div class="loading-indicator">
    <div>
      <i></i><i></i><i></i><i></i><i></i><i></i>
    </div>
  </div>
</div>

SCSS

@import "variables";

@keyframes loading-indicator-anim {
    0% {
        opacity: 0;
        transform: translateX(-300px);
    }
    33% {
        opacity: 1;
        transform: translateX(0px);
    }
    66% {
        opacity: 1;
        transform: translateX(0px);
    }
    100% {
        opacity: 0;
        transform: translateX(300px);
    }
}

#loading-indicator-container {
    z-index: 999;  // DLW: Assign variable name
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: $white;
}

.loading-indicator {
    z-index: 999;  // DLW: Assign variable name
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    > div {
        transform: translateY(-50%);
        top: 50%;
        position: absolute;
        width: 100%;
        color: #49691A;
        padding: 0 100px;
        text-align: center;

        i,label {
            font-size: 20px;
            opacity: 0;
            display: inline-block;
            padding-left: 4px;
            padding-right: 4px;

            &:before {
                content: $anim-loading-glyph;
            }

            &:nth-child(6) {
                animation: loading-indicator-anim $anim-loading-duration infinite ease-in-out;
            }

            &:nth-child(5) {
                animation: loading-indicator-anim $anim-loading-duration 100ms infinite ease-in-out;
            }

            &:nth-child(4) {
                animation: loading-indicator-anim $anim-loading-duration 200ms infinite ease-in-out;
            }

            &:nth-child(3) {
                animation: loading-indicator-anim $anim-loading-duration 300ms infinite ease-in-out;
            }

            &:nth-child(2) {
                animation: loading-indicator-anim $anim-loading-duration 400ms infinite ease-in-out;
            }

            &:nth-child(1) {
                animation: loading-indicator-anim $anim-loading-duration 500ms infinite ease-in-out;
       ...