Belajar Bootstrap (12. Progress Bar)

Belajar Bootstrap (12. Progress Bar)

Progress bar dalam bootstrap

Kali ini kita akan membahas tentang progress pada bootstrap. class progress kita gunakan sebagai penyedia informasi seberapa jauh proses berjalan. check it code dibawah kawan.

<!DOCTYPE html>
<html>
	<head>
		<link rel="stylesheet" href="../css/bootstrap.min.css">
  		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  		<script src="../js/bootstrap.min.js"></script>
 	</head>
	<body>
		<div class="container">
			<h2>syntax dasar progress</h2>
			<div class="progress">
				<div class="progress-bar" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemas="100" style="width:80%">
					80%
				</div>
			</div>	
		</div>
	</body>
</html>

hasil

untuk menambahkan warna kita tinggal memberi tambahan progress-bar-success. Tentunya saudara sudah tau bukan hanya success, tapi bisa yang lain misal info, warning, dan lainya.

<!DOCTYPE html>
<html>
	<head>
		<link rel="stylesheet" href="../css/bootstrap.min.css">
 		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  		<script src="../js/bootstrap.min.js"></script>
 	</head>
	<body>
		<div class="container">
			<h2>memberi warna progress</h2>
			<div class="progress">
				<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemas="100" style="width:80%">
					80% prosesnya kakak
				</div>
			</div>	
		</div>
	</body>
</html>

hasil

untuk memberi efek strip dan animasinya tinggal menambah progress-bar-striped dan active (untuk animasinya)

<!DOCTYPE html>
<html>
	<head>
		<link rel="stylesheet" href="../css/bootstrap.min.css">
		  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
		  <script src="../js/bootstrap.min.js"></script>
 	</head>
	<body>
		<div class="container">
			<h2>menambah animasi</h2>
				<div class="progress">
					<div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemas="100" style="width:80%">
						80%
					</div>
				</div>	
		</div>
	</body>
</html>

hasil

kita dapat membuat progress seperti partisi. Konsepnya yaitu meletakan beberapa progress-bar dalam satu class progress. check it

<!DOCTYPE html>
<html>
	<head>
		<link rel="stylesheet" href="../css/bootstrap.min.css">
	  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
	  <script src="../js/bootstrap.min.js"></script>
	 	</head>
	<body>
		<div class="container">
			<h2>berbentuk partisi</h2>
			<div class="progress">
				<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemas="100" style="width:60%">
					sehat wal afiat
				</div>
				<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemas="100" style="width:20%">
					sakit
				</div>
				<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemas="100" style="width:20%">
					meninggal
				</div>
			</div>	
		</div>
	</body>
</html>

hasil

Semoga bermanfaat, sampai jumpa di postingan selanjutnya.

Written by @akhi_syabab

Leave a Reply

Your email address will not be published.Required fields are marked *