Cara Membuat Step Progress bar dengan HTML dan CSS
Sep 13, 2017
Add Comment
Selamat Siang teman-teman kali ini Saya mau membahas cara membuat step progress dengan html dan CSS.apa itu step progress? ketika anda mendaftar di facebook misalnya aka nada beberapa part, misalnya part pertama kita mengisi nama, email dll, kemudian part ke dua kita disuruh mengupload foto, dan part ke 3 di suruh menambahkan beberapa teman. nah di atasnya itu ada step progress, ketika kita udah di part ke dua part ke satunya akan hijau karena telah terlewati dan part selanjutnya yang belum diisi akan berwarna abu-abu. untuk membuat itu kita siapkan dulu struktur htmlnya seperti di bawah:
<!DOCTYPE html>
<html>
<head>
<title>Step Progress Tutorial</title>
</head>
<body>
<div class="container">
<ul class="progressbar">
<li class="active">Step 1</li>
<li>Step 2</li>
<li>Step 3</li>
</ul>
</div>
</body>
</html>
<html>
<head>
<title>Step Progress Tutorial</title>
</head>
<body>
<div class="container">
<ul class="progressbar">
<li class="active">Step 1</li>
<li>Step 2</li>
<li>Step 3</li>
</ul>
</div>
</body>
</html>
kemudian untuk CSS nya seperti di bawah :
.container {
width: 100%;
}
.progressbar {
counter-reset: step;
}
.progressbar li {
list-style-type: none;
float: left;
width: 33.33%;
position: relative;
text-align: center;
}
.progressbar li:before {
content: counter(step);
counter-increment: step;
width: 30px;
height: 30px;
line-height: 30px;
border: 2px solid #ddd;
display: block;
text-align: center;
margin: 0 auto 10px auto;
border-radius: 50%;
background-color: white;
}
.progressbar li:after {
content: '';
position: absolute;
width: 100%;
height: 2px;
background-color: #ddd;
top: 15px;
left: -50%;
z-index: -1;
}
.progressbar li:first-child:after {
content: none;
}
.progressbar li.active {
color: green;
}
.progressbar li.active:before {
border-color: green;
}
.progressbar li.active + li:after {
background-color: green;
}
kemudian jalankan di browser, ok sekian dulu tutorial kali ini semoga bermanfaat.
Autodika.com menyediakan jawaban serta materi seputar tugas kuliah Manajemen Informatika, Sistem Informasi, Teknik Informatika dan berbagai macam tugas kuliah yang berkaitan tentang teknologi.
0 Response to "Cara Membuat Step Progress bar dengan HTML dan CSS"
Post a Comment