JSFiddle - React, Tailwind, and code Playground

by Alexandru Gatea

HTML

<div class="loading-mask">
    <div class="loader">Se proceseaza...</div>
</div>

SCSS

// loading mask

$circle: 120px;
$circle-before: 90px;
$circle-after: 60px;

$circle-color: #006295;
$circle-before-color: #bd2031;
$circle-after-color: #999;

.loading-mask {
    position: fixed;
    top:0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(#ffffff, 0.8);
    pointer-events: all;
    user-select: none;
    box-sizing: border-box;
    
    &:before {
        content: "";
        border-radius: 50%;
        position: absolute;
        top: 50%;
        left: 50%;
        box-sizing: border-box;
        border-radius: 50%;
        border: 4px solid $circle-color;
        border-right: 4px solid transparent;
        box-sizing: border-box;
        width: $circle;
        height: $circle;
        margin-top: -$circle / 2;
        margin-left: -$circle / 2;
        animation: rotating 1.5s infinite cubic-bezier(0.785, 0.135, 0.15, 0.86);
    }

    .loader {
        position: relative;
        width: $circle * 2;
        height: $circle * 2;
        display: flex;
        align-items: flex-end;
        justify-content: center;

        &:before, &:after {
            content: "";
            border-radius: 50%;
            position: absolute;
            top: 50%;
            left: 50%;
            box-sizing: border-box;
        }

        &:before {
            width: $circle-before;
            height: $circle-before;
            margin-top: -$circle-before / 2;
            margin-left: -$circle-before / 2;
            border: 4px solid $circle-before-color;
            border-top: 4px solid transparent;
            animation: rotating 1.5s infinite cubic-bezier(0.785, 0.135, 0.15, 0.86) reverse;
        }

        &:after {
            width: $circle-after;
            height: $circle-after;
            margin-top: -$circle-after / 2;
            margin-left: -$circle-after / 2;
            border: 4px solid...