JSFiddle - React, Tailwind, and code Playground

Spinner Pure CSS

by Shah Danial

HTML

<p>

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

</p>


<br><br>

<div style="width:100%;height:300px;background:yellow;">

  <span class="loader_full"><span class="pusing"></span></span>

</div>



<!-- uncomment sini untuk activekan. dia akan overlay semua. letakkan element ni di sebelum /body <div class="modal">

  <span class="loader_full"><span class="pusing"></span></span>

</div> -->

CSS

* {
  overflow: hidden;
  position: relative;
  max-width: 100%;
}

img { height: auto; }



.loader {
    display: inline-block;
    vertical-align: middle;
}

.loader_full {
  position: absolute;
  top: 0;
  left:0;
  width: 100%;
  height: 100%;
  text-align: center;
}



/* Spinner CSS */

@keyframes spinner {
  to {transform: rotate(360deg);}
}


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

.loader_full .pusing {
  position: absolute;
  left: 50%;
  top: 50%;
}
 
.pusing:before {
  /* ubah warna diline bawah */
  border: 4px solid #ccc;
  /* ubah warna diline bawah */
  border-top-color: #555;
  
  content: '';
  box-sizing: border-box;
  -moz-box-sizing:border-box;
  -webkit-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;
}

.modal {
  background: #fff;
  opacity: .8;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}