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>

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.

Belum ada Komentar untuk "Cara Membuat Step Progress bar dengan HTML dan CSS"

Posting Komentar

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel