Simple Animation Preloader

Preloader ini akan muncul saat halaman sedang dimuat atau ketika ada aksi yang membutuhkan loading, seperti submit form atau fetch data dengan AJAX.

Cascading Style Sheets

<style>
/* Preloader container */
#preloader {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(255, 255, 255, 0.8);
   display: flex;
   justify-content: center;
   align-items: center;
   z-index: 9999;
}

/* Spinner */
.spinner {
   width: 56px;
   height: 56px;
   display: grid;
   animation: spinner-plncf9 4s infinite;
}

.spinner::before,
.spinner::after {
   content: "";
   grid-area: 1/1;
   border: 9px solid;
   border-radius: 50%;
   border-color: #05486f #05486f #0000 #0000;
   mix-blend-mode: darken;
   animation: spinner-plncf9 1s infinite linear;
}

.spinner::after {
   border-color: #0000 #0000 #dbdcef #dbdcef;
   animation-direction: reverse;
}

@keyframes spinner-plncf9 {
   100% {
      transform: rotate(1turn);
   }
}
</style>

JavaScript

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
   // Hilangkan preloader setelah halaman selesai dimuat
   $("#preloader").fadeOut("slow");

   // Tampilkan preloader saat submit form
   $("form").on("submit", function() {
      $("#preloader").fadeIn();
   });

   // Tampilkan preloader saat AJAX request
   $(document).ajaxStart(function() {
      $("#preloader").fadeIn();
   }).ajaxStop(function() {
      $("#preloader").fadeOut();
   });
});
</script>

Hypertext Markup Language

<!-- Preloader -->
<div id="preloader">
   <div class="spinner"></div>
</div>

Source:
https://10015.io/tools/css-loader-generator