Tutorial membuat preloader simple enak dipandang

Rafiqi, S.Kom.
Rafiqi, S.Kom.
Juli 19, 2024
5
loader
Hi Web Developer! kembali lagi bersama dengan guru design. kali ini guru design akan membuat tutorial preloader atau animasi unik yang menemani kita saat membuka halaman blog atau website, sebenarnya ini request partner blog minta di buatin tutorial preloader.

Baiklah seperti biasa diharapkan buat para mastah dan suhu agar selalu memantau jika ada kesalahan tolong di koreksi, buat agan-agan semua yuk ikutin tutorilnya.

Pertama kita buka editor HTML agan masing masing lalu tambahkan tag <div> berikut tepat dibawah <body> 

<div class='preloader'></div>

Kemudian tambahkan kode css berikut:

<style type='text/css'> 
/* preloader */
.preloader:before,.preloader:after,.preloader{border-radius:50%;width:2.5em;height:2.5em;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation:load7 1.8s infinite ease-in-out;animation:load7 1.8s infinite ease-in-out}
.preloader{font-size:10px;margin:80px auto;position:fixed;z-index:1000;top:35%;left:47%;text-indent:-9999em;-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);-webkit-animation-delay:-0.16s;animation-delay:-0.16s}
.preloader:before{left:-3.5em;-webkit-animation-delay:-0.32s;animation-delay:-0.32s}
.preloader:after{left:3.5em}
.preloader:before,.preloader:after{content:&#39;&#39;;position:absolute;top:0}
@media(max-width:768px){.preloader{top:32%;left:47%}}@keyframes spin{0%{transform: rotate(0deg);}100% {transform:rotate(360deg);}}
@-webkit-keyframes load7{0%,80%,100%{box-shadow:0 2.5em 0 -1.3em #fff}40%{box-shadow:0 2.5em 0 0 #fff}}
@keyframes load7{0%,80%,100%{box-shadow:0 2.5em 0 -1.3em #fff}40%{box-shadow:0 2.5em 0 0 #039be5}}
</style>

Untuk posisi dan warna bisa anda sesuaikan sendiri.

Terahir tambahkan JavaScript Supaya menghilang animasinya saat halaman berhasil di muat 

<script type='text/javascript'>
//<![CDATA[
// Preloader
$(window).load(function() { $(".preloader").fadeOut("slow");});
//]]>
</script>

Untuk demonya sudah saya terapkan di blog ini.
 jika ada yang tidak dipahami silahkan tanyakan di komentar jangan sungkan.

Terimakasih Semoga Bermanfaat.
Rafiqi, S.Kom.