Progress Bar adalah sesuatu yang muncul saat sedang memproses suatu konten, seperti download, upload, atau mentransfer file, pada tutorial kali ini kita akan membuat progress bar dengan tampilan yang menarik dengan menggunakan CSS3
HTML
<div class="progress-bar blue stripes"> <span style="width: 40%"></span> </div>
Berikut keterangan dari kode di atas
• .progress-bar, mendefinisikan gaya umum untuk progress bar.
• .blue, kelas CSS biru menambahkan style biru untuk progress bar.
• .stripes, jenis animasi untuk progress bar.
• span, Lebar inline set akan membantu Anda menentukan isinya.
CSS
.progress-bar { background-color: #1a1a1a; height: 25px; padding: 5px; width: 350px; margin: 50px 0; border-radius: 5px; box-shadow: 0 1px 5px #000 inset, 0 1px 0 #444; } .progress-bar span { display: inline-block; height: 100%; border-radius: 3px; box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset; transition: width .4s ease-in-out; }
Sekarang kita akan tambahkan beberapa gradasi warna
.blue span { background-color: #34c2e3; } .orange span { background-color: #fecf23; background-image: linear-gradient(top, #fecf23, #fd9215); } .green span { background-color: #a5df41; background-image: linear-gradient(top, #a5df41, #4ca916); }
Stripes
.stripes span { background-size: 30px 30px; background-image: linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); animation: animate-stripes 3s linear infinite; } @keyframes animate-stripes { 0% {background-position: 0 0;} 100% {background-position: 60px 0;} }
Shine
.shine span { position: relative; } .shine span::after { content: ''; opacity: 0; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: #fff; border-radius: 3px; animation: animate-shine 2s ease-out infinite; } @keyframes animate-shine { 0% {opacity: 0; width: 0;} 50% {opacity: .5;} 100% {opacity: 0; width: 95%;} }
Contoh Progress bar CSS3 di bawah ini menggunakan CSS3 :: after pseudo-elemen yang dianimasikan. Saat ini, konten animasi yang dihasilkan dengan CSS3 hanya tersedia pada browser Firefox terbaru.
Glow
Animasi Keyframes CSS3 berdasarkan properti box-shadow:
.glow span { box-shadow: 0 5px 5px rgba(255, 255, 255, .7) inset, 0 -5px 5px rgba(255, 255, 255, .7) inset; animation: animate-glow 1s ease-out infinite; } @keyframes animate-glow { 0% { box-shadow: 0 5px 5px rgba(255, 255, 255, .7) inset, 0 -5px 5px rgba(255, 255, 255, .7) inset;} 50% { box-shadow: 0 5px 5px rgba(255, 255, 255, .3) inset, 0 -5px 5px rgba(255, 255, 255, .3) inset;} 100% { box-shadow: 0 5px 5px rgba(255, 255, 255, .7) inset, 0 -5px 5px rgba(255, 255, 255, .7) inset;} }
Bagaimana tampilannya dengan browser lama?
Progress bar terlihat cukup baik dengan degradasi yang anggun.
Sekian Tutorial kali ini, selamat mencoba