Contoh Circle Progressbar untuk Loading Website
Dalam membuat sebuah website, adakalanya diperlukan untuk menambahkan progressbar berbentuk lingkaran (circle) yang berputar, untuk menandakan halaman website sedang dimuat.
Meskipun sederhana, penambahan progressbar ini menurut penulis penting, karena akan memberikan perintah secara halus kepada pengunjung, untuk menunggu dan menandakan bahwa website kita sedang di proses.
Sebab, penulis sendiri, lebih sering untuk pergi ke website lain, ketika website yang sedang penulis kunjungi serasa berhenti (stuck) tanpa adanya tanda progres.
Berikut ini salah satu kode circle progressbar dengan CSS:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.boxloader{
position: fixed;
top: 50%;
right: 50%;
text-align:center;
}
.loader {
border: 5px solid #f3f3f3;
border-radius: 50%;
border-top: 5px solid #3498db;
width: 20px;
height: 20px;
-webkit-animation: spin 0.5s linear infinite;
animation: spin 0.5s linear infinite;
display: inline-block;
}
@-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
</head>
<body>
<h2>Loader Example</h2>
<div style="width:100%;height:100%;">
<div class="boxloader">
<div class="loader"></div>
<div>please wait..</div>
</div>
</div>
</body>
</html>
Komentar
Posting Komentar