JSFiddle - React, Tailwind, and code Playground

by Alex Alex

HTML

<div class="style-2">
    content
</div>

CSS

.loading:before {
    content: '';
    background: rgba(255,255,255,0.5);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9998;
}

.loading:after {
    content: '';
    background: url(data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAATCAYAAACdkl3yAAAC0UlEQVQ4EY1US2tTQRT+5s69uUlt7EMlPlrcFAShoC5Eq9AsqhURXEgE8Q8UH1Cs4EpoFyJUi3Gj0JXgMhvdCK4qxBYXLehChCoo1EdrbaxtbHJfM34TSUkDLZnL5c6d853vnDnznRFaa2w2RDa/B4FMQYYCMbmgr534vim2nkiMz7RgtXwJSvfD0p10jAEixv8YpFjg/AVc55G+enSpllTUEon7r9OwxCAi1cqvQ6ANDRdCxCH4VcIGIjP3IdSgvtGbq5JZ1Yl4MHWegCFoHSdJAG0FjK4A/YmYWWilYEWSa3yRhJZPt99+OVT1ZwSasvkjJLnMyCQwC1iB0I/hpKb09S6vgnnyJY6luTPE3ANUZ7JQdC2lztE2VrFjYsLGtGOMuwmSzOYj/NKovtX3xwDqhxh7tTNZKD2zlA6X755NV+0WZnCM0VuYhQdbriAhHm5GYpz0UPqXCytTS2LWLSjZzbqElTfwn+uBnp/GsNVYvNP/o97OGom9rItPgwXb+VAPaPTfpnuCGuFx8gG+NepYjzM6KcIWRiuaCm4moFQPauTfplrnmdE+ghVCtgOw2IijyEHiItMYNugRKjcSs9zeLqqWgsMh7u89pbR5A9KNGIHPk00YDjTaOwIUeiMLgf0OWlB0kU/1ppDNHzYxthyjk80oxV1sd9mHSy6QVpVeE9k3fdBRN5SiDGyeYPQW+09O6wyiWkIxwpzb8zvwVyThSg/l0EdLVNJX0sX/ROMzDla8C6xVK8WpWHyPvcbujuZYugKiRICE5ula21AsUCjJMuCFaI2tYaBn0ZRivft5fTSR7BRjtkFFIdGmw/2KNKQsIZLcesQAOoBKeIj7q+g4Pl/Nep3IbEHkchJfOw5ChAcQerwZXA+OXWbwkFeLz5upzExZz9I8bp6uZFLd+gai9UWz1eXVFBy3DWHo8IxCSHsN5bXf6Cos60xmQ+2M3z85EjXX78RgxgAAAABJRU5ErkJggg==) no-repeat 0 0;
    -webkit-animation: spin 1s linear infinite;
    -moz-animation: spin 1s linear infinite;
    -o-animation: spin 1s linear infinite;
    animation: spin 1s linear infinite;
    width: 18px;
    height: 18px;
    -webkit-background-size: 100% 100%;
    background-size: 100% 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -9px 0 0 -9px;
    z-index: 9999;
}

.style-2 {
  border-style: double;
  border-color: #ccc transparent;
}

@-webkit-keyframes spin {
  100% { -webkit-transform: rotate(359deg); }
  }

@-moz-keyframes spin {
  100% { -moz-transform: rotate(359deg); }
}

@-o-keyframes spin {
  100% { -moz-transform: rotate(359deg); }
}

@keyframes spin {
 ...

JavaScript

$(document.body).addClass('loading');