JSFiddle - React, Tailwind, and code Playground

osn spinner

by Csaba Hellinger

HTML

<!--
<div class="parent">
    <div class="vjs-loading-spinner">
    </div>
</div>
-->

<div class="parent2">
    <div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div>
</div>

CSS

body {
    background: black;
}

.parent {
    background: pink;
    font-size: 10px;
    position: absolute;
    left: 31px;
    top: 30px
}

.vjs-loading-spinner {
    /* display: none; */
    position: absolute;
    top: 30%;
    left: 50%;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 4em;
    line-height: 1;
    width: 1em;
    height: 1em;
    margin-left: -.5em;
    margin-top: -.5em;
    opacity: .75;
    //font-family: FontAwesome;
}

.vjs-loading-spinner:before {
    animation: move_left 4s steps(4,end) infinite;
    content: "\25A0";
    color: #5cc4ff;
    font-size: 28px;
    left: -9px;
    top: 12px;
    
    position: absolute;
    width: 1em;
    height: 1em;
    text-align: center;
    text-shadow: 0 0 0.1em #000;
}

.vjs-loading-spinner:after {
    content: "\25A0 \25A0 \25A0 \25A0";
    color: #fff;
    font-size: 20px;
    letter-spacing: 5px;
    // font-family: Arial,Helvetica,sans-serif;
}

@keyframes move_left{to{left:62px}}





.parent2 {
    background: black;
}

.dot {
    display: inline-block;
    background: #bfbfbf;
    width: 10px;
    height: 10px;
    margin: 3.5px; // TODO: wtf?
    outline: 2px solid transparent;
    animation: dot-color 4s steps(4, start) infinite;
}
.dot:nth-child(1) { animation-delay: 0; }
.dot:nth-child(2) { animation-delay: 1s; }
.dot:nth-child(3) { animation-delay: 2s; }
.dot:nth-child(4) { animation-delay: 3s; }


@keyframes dot-color {
    0% {  
        outline-color: #4593bf;
        background: #4593bf;    
    }
    25% {  
        outline-color: #4593bf;
        background: #4593bf;    
    }
    26% {
        outline-color: transparent;
        background: #bfbfbf;
    }
    100% {
        outline-color: transparent;
        background: #bfbfbf;
    }    
}