Cara Membuat Step Progress Dengan HTML CSS

Dalam kesempatan kali ini saya akan membahas tentang membuat sebuah progress, tentunya desain progress banyak digunakan untuk menunjukkan suatu proses tertentu. Contohnya proses download, proses install ataupun proses lainnya, bagaimana Cara Membuat Step Progress Dengan HTML CSS . Jangan kemana-mana yuuuk ikutin langkah-langkah membuatnya.Langkah pertama siapkan terlebih dahulu struktur HTML seperti berikut ini ;

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Membuat Step Progress Dengan HTML CSS</title>
	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
<body>
	<div class="container">
		<h2><i class="fas fa-store"></i> Membuat Step Progress <i class="fas fa-shopping-cart"></i> Dengan HTML CSS</h2>
		<ul class="progressbar">
			<li class="active"><i class="fas fa-shopping-basket"></i><br>Order</li>
			<li><i class="fas fa-money-check"></i><br>Payment</li> 
			<li><i class="fas fa-shipping-fast"></i><br>Shipping</li> 
			<li><i class="fas fa-box-open"></i></i><br>Delivery</li>
		</ul>
	</div>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Membuat Step Progress Dengan HTML CSS</title>

<body>

<h2><i class="fas fa-store"></i> Membuat Step Progress <i class="fas fa-shopping-cart"></i> Dengan HTML CSS</h2>

<li class="active"><i class="fas fa-shopping-basket"></i><br>Order</li>

<li><i class="fas fa-money-check"></i><br>Payment</li>

<li><i class="fas fa-shipping-fast"></i><br>Shipping</li>

<li><i class="fas fa-box-open"></i></i><br>Delivery</li>

</ul>

</div>

</body>

</html>

sebagai tambahannya supaya menarik tampilannya saya menambahkan Icon dari FontAwesome agar lebih menarik.

Langkah kedua coba berikan style CSS supaya terlihat rapih tampilannya seperti berikut :

<style>
		.container{
			width: 100%;
		}
		.progressbar li{
			list-style-type: none;
			float: left;
			width: 25%;
			position: relative;
			text-align: center;
			font-size: 20px;
		}
		.progressbar li:before{
			width: 30px;
			height: 30px;
			line-height: 30px;
			border:1px solid #ddd;
			display: block;
			text-align: center;
			margin:0 auto 10px auto;
			border-radius:50%;
			background-color: #fff;
		}
		.progressbar li:after{
			content:'';
			position: absolute;
			width: 100%;
			height: 1px;
			background-color: #ddd;
			top:15px;
			left:-50%;
			z-index: -1;
		}
		.progressbar li:first-child:after{
			content: none;
		}
		.progressbar i{
			color:#456345;
			font-size: 25px;
		}
		h2{
			text-align: center;
		}
		h2 i{color:#89d4df;}
	</style>

<style>

.container{

width: 100%;

}

.progressbar li{

list-style-type: none;

float: left;

width: 25%;

position: relative;

text-align: center;

font-size: 20px;

}

.progressbar li:before{

width: 30px;

height: 30px;

line-height: 30px;

border:1px solid #ddd;

display: block;

text-align: center;

margin:0 auto 10px auto;

border-radius:50%;

background-color: #fff;

}

.progressbar li:after{

content:'';

position: absolute;

width: 100%;

height: 1px;

background-color: #ddd;

top:15px;

left:-50%;

z-index: -1;

}

.progressbar li:first-child:after{

content: none;

}

.progressbar i{

color:#456345;

font-size: 25px;

}

h2{

text-align: center;

}

h2 i{color:#89d4df;}

</style>

JIka sudah selesai simpan kedua file diatas ,lalu jalankan pada browser supaya terlihat hasilnya:

Demikian pembahasan artikel kali ini tentang Cara Membuat Step Progress Dengan HTML CSS ,semoga bermanfaat dan jangan lupa tetap semangat belajarnya sampai jumpa dengan kesempatan lainnya.

terima kasih

Facebook DUMET School

Categories