JSFiddle - React, Tailwind, and code Playground

by Ариан Шапиро

HTML

<div class="loader"></div>

CSS

*, *:before, *:after {
     box-sizing: border-box;
 }
 body {
     background: transparent;
 }

 .loader {
     margin:5px;
     position: absolute;
     width: 100px;
     height: 100px;
     border-radius: 100%;
     border-style: solid;
    -webkit-transform-origin:50px 50px;
     -webkit-animation: loader 2s linear infinite;
     border-width: 1px 1px 2px;
     border-color: hsl(0, 75%, 50%);
 }
 @-webkit-keyframes loader {
     0% {
         -webkit-transform: rotate(0deg);
         -ms-transform: rotate(0deg);
         transform: rotate(0deg);
     }
     100% {
         -webkit-transform: rotate(360deg);
     }
 }

JavaScript

function rand(min, max) {
    return parseInt(Math.random() * (max - min + 1), 10) + min;
}

function get_random_color() {
    var h = rand(1, 360); // color hue between 1 and 360
    var s = rand(75, 75); // saturation 30-100%
    var l = rand(50, 50); // lightness 30-70%
    return 'hsl(' + h + ',' + s + '%,' + l + '%)';
}

$.each($('div'), function () {
    $(this).css('border-color', get_random_color());
});