loading

by jpeter06

HTML

<div class="aa cargando">
AA
</div>

<div class="bb cargando">
BB
</div>
<div class="cc" onclick="toggleCarga('cc')">
CC <button onclick="toggleClass('cc')">
toggle
</button>
</div>

<div class="inline cargando">
  <textArea class="cargando">
    Patattas fritas
  </textArea>
</div>

CSS

html, body{
  width:100%; height:100%; margin:0px;padding:0px;
  display:flex;
  flex-direction:column;
  gap:20px;
  align-items:flex-start;
}
.aa , .cc{
  background:red;
  height:100px;
  width:40%;
  position:relative;
}

.bb{
  background:green;
  width:60%;
  height:200px;
  position:relative;
}

textarea{position:relative; width:50vw; height:40vh;}

.inline { display:inline-block; 
      position:relative; 
      background:tan; 
      padding:5px;
}
      
.cargando:after {
  position:absolute;
  --radius: 44px;
  --color: #fa0;
  top:50%;
  left:50%;
  margin-top: calc( 0px - (var(--radius) / 2));
  margin-left: calc( 0px - (var(--radius) / 2));
  text-align:center;
  content: "";
  display: inline-block;
  width: var(--radius);
  height: var(--radius);
  border-radius: 50%;
  border: calc(var(--radius) / 7) solid var(--color);
  border-color: var(--color) transparent var(--color) transparent;
  animation: rotate360 1.2s linear infinite;
  z-index:2;
}

@keyframes rotate360 {
  0% {   transform: rotate(0deg);  }
  100% {    transform: rotate(360deg);  }
}

JavaScript

function toggleCarga(clase){
	document.getElementsByClassName(clase)[0].classList.toggle("cargando")
}