Cara Membuat Css Loader

Baca Juga

Blog Ponsel Si Oon - Cara Membuat Css Loader Selamat malam pemirsa :D pembaca setia Blog Oon .. oopss tapi mungkin lebih tepat Blogger Trash ( Blogger Sampah ) kali ya .. hahaha tapi ya sudahlah .. mau apapun juga gk apa - apa .. yang penting happy :D .. ok dweh next pada kesempatan malam ini .. admin mau sedikit berbagi cara buat loader dengan menggunakan CSS .. tapi sebelumnya sudah pada tahu belum ni ?? Apa yang saya maksud ini ?? Jika tidak tahu .. ya sudah .. saya juga gk tahu harus dimulai dari mana dulu .. yang pasti lagi BeTe ( BT ) banget .. dan tanpa basa basi lagi .. dibawah ini contoh / model - model loader .. berupa gambar dan sebenarnya masih banyak model - model nya tetapi tidak akan saya buatkan semuanya karena terlalu banyak .. jadi disini saya cuma ngasih cara buat css nya beberapa model aja ya ..

Dari beberapa model yang ada di contoh pada gambar diatas .. akan saya buatkan cuma 3 jenis saja .. yaitu pada bentuk yang lebih besar dari gambar - gambar yang lain nya .. kenapa cuma 3 ?? Karena cara buatnya tidak jauh berbeda .. sama saja untuk kerangka nya kita buat dengan css dan HTML .. namun jika diterapkan untuk Loader page ( loading halaman ) .. kita harus sedikit menambahkan kode lain .. yakni kode JavaScript dan sejenisnya ..

Contoh CSS & HTML

01. Kode Css Loader

.loader {
border-top: 16px solid blue;
border-bottom: 16px solid blue;
}

02. Cara Pasangnya

Kode Loader HTML

<div class="loader"></div>

Hasilnya :

Gimana setelah lihat hasilnya ?? Mudahkan ?? Tidak terlalu ribet dan panjang .. banyak kode ?? Yalah diatas cuma sepenggal css nya doank .. makanya pendek .. cuma 2 baris saja hehehe .. untuk mengetahui keseluruhan Css nya .. copas aja semua kode yang ada di bawah ini ..

<style>
.loader {
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style>



<div class="loader"></div>

Memang dari keseluruhan CSS nya saja sangat pendek kan ?? Tidak terlalu banyak kode .. dan kode css yang di atas dengan model yang berbeda dari pada contoh asli di atas .. contoh asli cuma satu warna saja .. yaitu warna Blue ( Biru ) .. namun kode yang berada di textarea .. dengan model 4 warna .. tetapi hasilnya tetep menjadi 1 warna saja .. yaitu biru .. maka dari itu .. jika loader nya ingin berwarna menjadi 4 warna dalam 1 lingkaran nya .. kita hanya cuma menambahkan beberapa kode warna saja .. kurang lebihnya .. silahkan lihat CSS di bawah ini .. dan contohnya lihat pada gambar di atas ( gambar loader yang berada di samping tulisan kode CSS ) ..

Contoh CSS Loader 4 Warna ( Blue / Red / Pink / Green )

.loader {
 border-top: 16px solid blue;
 border-right: 16px solid green;
 border-bottom: 16px solid red;
 border-left: 16px solid pink;
}

Setelah kode css diatas dibuat .. lalu tambahkan kode border radius nya .. untuk membuat loader menjadi melengkung ( bulat ) menjadi lingkaran .. dengan menambahkan kode seperti dibawah ini :

border-radius: 50%;
width: 120px;
height: 120px;
animation: spin 2s linear infinite;

Keterangan :

border-top : Border atas dengan ukuran lebar 16px
border-right : Border kanan dengan ukuran lebar 16px
border-bottom : Border bawah dengan ukuran lebar 16px
border-left : Border kiri dengan ukuran lebar 16px
Kode 16px supaya imbang / rata .. maka atas / bawah / kanan / kiri dengan nilai angka yang sama ..
border-radius: 50% : loader dengan bentuk bulatatan 50%
dan Width : 120px; / Height: 120px; .. jumlah angka besar kecilnya bulatan loader tersebut .. ( width : lebar kesamping ) dan ( height : lebar kebawah ) maka keduanya harus dengan jumlah angka yang sama .. supaya pas ..

Udah cukup segitu .. sangat mudah bukan ?? Dan saya rasa cukup sampe disini perjumpaan kita pada malam hari ini .. semoga sedikit berguna :D dan terimakasih sudah meluangkan waktunya mampir ke sini .. untuk memabaca Cara Membuat Css Loader jika sobat minat ingin buatnya silahkan copas dan pelajari lagi sendiri .. dari stiap masing - masing kodenya .. dan dibawah ini sekedar tambahan saja ..