Berpikir dan berprasangka positiflah selalu. Maka hal menakjubkan akan terjadi. Oke pada kesempatan kali ini saya akan berbagi ilmu kepada kalian tentang bagaimana Cara Membuat Loader dengan CSS.
Biasanya banyak website yang memakai loading bervariasi, nah pada tutorial kali saya akan memberitahukan kepada kalian untuk basic nya terlebih dahulu ya teman-teman. Oke langsung saja, berikut Cara Membuat Loader dengan CSS.
Pertama-tama, seperti biasa 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 untuk 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? Cukup mudah bukan?
Sekian untuk tutorial kali ini tentang bagaimana Cara Membuat Loader dengan CSS.
Semoga bermanfaat, terima kasih.
The post Cara Membuat Loader dengan CSS appeared first on Kursus Website Terbaik.