JSFiddle - React, Tailwind, and code Playground

by Nick Iaconis

HTML

<div class="spinner-container">
    <div class="spinner">
    </div>
</div>

CSS

* {
    margin: 0;
}
body {
    background: gray;
    box-shadow: inset 0 0 100px rgba(0,0,0,.3);
}
.spinner-container {
    background-color: black;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
}
.spinner:after {
    content: '';
    width: 192%;
    height: 96%;
    background: gray;
    display: block;
    position: absolute;
    top: 50%;
    left: 100%;
    -webkit-transform: translate(-50%,-50%);
    border-radius: 50%;
}
@-webkit-keyframes spin-right {
    0%   { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(-360deg); }
}
@-webkit-keyframes spin-left {
    0%   { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
}
.spinner:before {
    content: '';
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 100%;
    -webkit-transform-origin: left center;
    -webkit-animation: spin-left 1s linear infinite;
    border-radius: 0 100% 100% 0 / 50%;
    background-repeat: no-repeat;
    background-size: 200% 100%;
    background-position: right;
    background-image:...

JavaScript

// pure css indeterminate progress spinner