Sharing Teknologi – Membuat Simple Progress Bar Animation Effect HTML CSS Di WordPress. HTML (HyperText Markup Language) adalah bahasa markup yang digunakan untuk membuat dan mengorganisir struktur dasar halaman web.
Dikembangkan oleh Tim Berners-Lee pada tahun 1991, HTML menggunakan serangkaian “tags” atau tanda untuk mendefinisikan elemen-elemen seperti teks, gambar, tautan, dan formulir dalam suatu dokumen. Setiap tag memiliki peran spesifik, seperti <head> untuk informasi metadata dan <body> untuk konten utama. HTML memberikan kerangka kerja yang memungkinkan penampil web untuk memahami dan menampilkan informasi dengan benar.
CSS (Cascading Style Sheets) adalah bahasa gaya yang berkolaborasi dengan HTML untuk mengontrol tampilan dan presentasi halaman web. Dengan CSS, pengembang dapat mengatur properti seperti warna, jenis font, tata letak, dan dekorasi elemen HTML. Pendekatan ini memungkinkan pemisahan antara struktur dan desain, memudahkan perubahan gaya tanpa memengaruhi struktur dasar. Selektor CSS memilih elemen yang akan diubah, sementara properti menentukan bagaimana perubahan tersebut diterapkan.
HTML dan CSS bekerja bersama untuk menciptakan pengalaman pengguna yang kaya dan estetis. HTML memberikan dasar struktural, sementara CSS menambahkan dimensi estetika dan desain. Bersama-sama, keduanya memungkinkan pembuat web untuk membuat halaman yang menarik, responsif, dan konsisten di berbagai perangkat. Dengan kemajuan HTML5 dan CSS3, pengembang dapat memanfaatkan fitur-fitur baru untuk meningkatkan kreativitas dan fungsionalitas, menjadikan kombinasi ini sebagai fondasi utama dalam pengembangan web modern.
NB: kami menggunakan tambahan CSS dari bootstrap.
Membuat Simple Progress Bar Animation
Silakan Copas kode dibawah ini. Rekan-rekan bisa mengubahnya sesuai dengan kebutuhan.
Untuk contoh hasilnya ada di paling bawah ya, silakan scroll ke bawah.
HTML
<div class="position-relative p-3 my-1 overflow-hidden">
<div class="simpleprogressbar">
<div class="container">
<div class="progress"></div>
</div>
</div>
</div>
Style CSS
.simpleprogressbar {
margin: 0;
padding: 0;
background-color: #151515;
min-height: 200px;
display: flex;
align-items: center;
justify-content: center;
}
.simpleprogressbar .container {
background-color: #f9f9f9;
width: 300px;
height: 40px;
border-radius: 1rem;
position: relative;
left: 0;
animation: .5s linear 5.2s 1 normal backwards running progressComplete;
margin: 0 !important;
padding: 0 !important;
}
.simpleprogressbar .progress {
background: linear-gradient(40deg, #ff6ec4, #7873f5);
width: 20px;
height: inherit;
border-radius: inherit;
animation: 5s linear .3s 1 normal forwards running barProgress;
border: 3px solid #f9f9f9;
}
@keyframes barProgress{
from { width: 20px; }
to { width: inherit; }
}
@keyframes progressComplete {
0% { left: 0; }
25% { left: 8px; }
50% { left: 0; }
75% { left: 4px; }
100% { left: 0; }
}
Hasil
Tampilannya kurang lebih bisa dilihat dibawah ini.
Terima kasih telah mengunjungi website kami.
Share jika bermanfaat, jika ada kritik, tambahan, pertanyaan atau saran silakan hubungi kami atau silakan isi di kolom komentar.
Komentar