JSFiddle - React, Tailwind, and code Playground

by ppgab

HTML

<body class="body">
<h1 class="loading">
  If you increase this width too much it overflows, since the sizing is based on width
</h1>
<h3>
But if you reduce the width too much it gets ugly :(
</h3>
<button style="font-size:2rem;width:200px;margin:1rem"class="loading loading-sm">
Button
</button>
<div class="inner-div loading">
This fixed element doesn't work either
</div>
</body>

CSS

/*Spinner with overlay and no mouse events*/
@keyframes spinner {
    to {transform: rotate(360deg);}
}
.loading::before {
    position:absolute;
    content : '';
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: gray;
    z-index: 2;
    opacity: 0.2;
}
.loading::after {
    content: '';
    box-sizing: border-box;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 25%;
    margin-top: -12.5%;
    margin-left: -12.5%;
    border-radius: 50%;
    border: solid transparent;
    border-top-color: #07d;
    border-bottom-color: #07d;
    animation: spinner 1s ease infinite;
    z-index: 3;
    padding-top: calc(12.5% - .5em);
    border-width: .5em;
    padding-bottom: calc(12.5% - .5em);
}
.loading.loading-sm::after {
    content: '';
    box-sizing: border-box;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 25%;
    margin-top: -12.5%;
    margin-left: -12.5%;
    border-radius: 50%;
    border: solid transparent;
    border-top-color: #07d;
    border-bottom-color: #07d;
    animation: spinner 1s ease infinite;
    z-index: 3;
    padding-top: calc(12.5% - .1em);
    border-width: .1em;
    padding-bottom: calc(12.5% - .1em);
}
.loading {
    position: relative;
    pointer-events: none;
    cursor: wait;
}

.body {
  text-align:center;
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
  padding : 1rem;
  align-items: center;
}

.inner-div {
  background-color: red;
  width: 500px;
  height: 100px;
}