Cara Membuat Loader dengan CSS
Berpikir dan berprasangka positiflah selalu. Karenanya hal menakjubkan akan terjadi. Oke di kesempatan kali ini saya akan berbagi ilmu kepada kalian mengenai bagaimana Cara Merancang Loader dengan CSS.
Biasanya banyak laman yang memakai loading bervariasi, nah di panduan kali saya akan memberitahukan kepada kalian bagi basic nya terlebih dahulu ya teman-teman. Oke seketika saja, berikut Cara Merancang Loader dengan CSS.
Pertama-tama-tama, seperti biasanya siapkan file index.html nya.
Kemudian, isi di bagian <body> tag-tag HTML berikut.
<h2>How To Create A Loader</h2>
<p><strong>Note:</strong> The -webkit- and -ms- prefixes are for browsers that do not support animation and transform properties.</p>
<div class=loader></div>
Dan setelah itu, isi bagi bagian CSS nya.
.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); }
}Bagaimana teman-teman? Lumayan gampang bukan?
Sekianlah bagi panduan kali ini mengenai bagaimana Cara Merancang Loader dengan CSS.
Semoga bermanfaat, terima kasih.
Sumber https://kursuswebsite.org
