JSFiddle - React, Tailwind, and code Playground

spinner css

by Shah Danial

HTML

<p>

hahahaha <span class="loader">
 <span class="pusing"></span>
</span>

</p>


<br><br>

CSS

* {
  overflow: hidden;
}



.loader {
    /* ubah size (tinggi dah lebar dibawah ) */
    width: 20px;
    height: 20px;
    display: inline-block;
}



/* Spinner CSS */

@keyframes spinner {
  to {transform: rotate(360deg);}
}
 
.pusing:before {
  /* ubah warna diline bawah */
  border: 2px solid #ccc;
  /* ubah warna diline bawah */
  border-top-color: #333;
  
  content: '';
  box-sizing: border-box;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  display: inline-block;
  border-radius: 50%;
  /* ubah kelajuan di line bawah */
  animation: spinner .6s linear infinite;
}