.png)
Cara Membuat Step Progress bar dengan HTML dan CSS
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.
0 komentar :