JSFiddle - React, Tailwind, and code Playground

Loader tumblr pure css

by Shah Danial

HTML

<section class="crt-skin-default">

<div class="vjs-loading-spinner" aria-label="loading"><div class="Knight-Rider-loader centered animate"><div class="Knight-Rider-bar"></div><div class="Knight-Rider-bar"></div><div class="Knight-Rider-bar"></div></div></div>


hahahaha

</section>

CSS

.crt-skin-default { width:100%; height:100%;}

.crt-skin-default .vjs-loading-spinner {
    transition: visibility .4s,opacity .4s,transform .4s;
    transform: scale(.5);
    pointer-events: none;
    position: absolute;
    height: 56px;
    width: 60px;
    bottom: 50%;
    right: 50%;
    margin-right: -30px;
    margin-bottom: -28px;
}


.crt-skin-default.vjs-loading .vjs-loading-spinner, .crt-skin-default.vjs-quality-toggling .vjs-loading-spinner {
    transform: scale(1);
    opacity: 1;
    visibility: visible;
}

/* ..................... */

.Knight-Rider-loader {
    line-height: 0;
}

.Knight-Rider-loader.centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

.crt-skin-default .vjs-loading-spinner .Knight-Rider-loader {
    width: 56px;
    height: 18px;
}

/*.............*/

.Knight-Rider-bar {
    display: none;
    height: 20px;
    width: 20px;
    margin: 0 3px;
    opacity: .5;
    border-radius: 5px;
    background-color: #d0d0d0;
}

.animate>.Knight-Rider-bar {
    display: inline-block;
    animation: Knight-Rider-oscillate ease-in-out .3s infinite alternate;
}


.crt-skin-default .vjs-loading-spinner .Knight-Rider-bar {
    width: 12px;
    height: 12px;
    margin: 0 1px 0 2px;
    border-radius: 2px;
}


/* ........... */

.Knight-Rider-bar:first-child {
    animation-delay: -.2s;
}

.Knight-Rider-bar:nth-child(2) {
    animation-delay: -.1s;
}

@keyframes Knight-Rider-oscillate{0%{transform:scaleY(1);opacity:.5}to{transform:scaleY(1.4);opacity:1}}