نوار پیشرفت


پیش فرض

								
									<div class="progress" role="progressbar" aria-label="Basic example" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
										  <div class="progress-bar" style="width: 0%"></div>
										</div>
										<div class="progress" role="progressbar" aria-label="Basic example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
										  <div class="progress-bar" style="width: 25%"></div>
										</div>
										<div class="progress" role="progressbar" aria-label="Basic example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
										  <div class="progress-bar" style="width: 50%"></div>
										</div>
										<div class="progress" role="progressbar" aria-label="Basic example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
										  <div class="progress-bar" style="width: 75%"></div>
										</div>
										<div class="progress" role="progressbar" aria-label="Basic example" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
										  <div class="progress-bar" style="width: 100%"></div>
										</div>
								
							

تغییر ارتفاع

ما فقط مقدار height را روی .progress تغییر می دهیم، و ارتفاع .progress-bar نیز به طور خودکار تغییر خواهد کرد.

								
									<div class="progress" role="progressbar" aria-label="Example 1px high" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="height: 1px">
									  <div class="progress-bar" style="width: 25%"></div>
									</div>
									<div class="progress" role="progressbar" aria-label="Example 20px high" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="height: 20px">
									  <div class="progress-bar" style="width: 25%"></div>
									</div>
								
							

رنگ بندی

از کلاس های مربوط به پس زمینه برای تغییر ظاهر progress bar می توانید استفاده کنید.

								
									<div class="progress" role="progressbar" aria-label="Success example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
									  <div class="progress-bar bg-success" style="width: 25%"></div>
									</div>
									<div class="progress" role="progressbar" aria-label="Info example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
									  <div class="progress-bar bg-info" style="width: 50%"></div>
									</div>
									<div class="progress" role="progressbar" aria-label="Warning example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
									  <div class="progress-bar bg-warning" style="width: 75%"></div>
									</div>
									<div class="progress" role="progressbar" aria-label="Danger example" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
									  <div class="progress-bar bg-danger" style="width: 100%"></div>
									</div>
								
							

Striped

افزودن .progress-bar-striped به هر .progress-bar برای تغییر پس زمینه بصورت گرادیان

								
									<div class="progress" role="progressbar" aria-label="Default striped example" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">
									  <div class="progress-bar progress-bar-striped" style="width: 10%"></div>
									</div>
									<div class="progress" role="progressbar" aria-label="Success striped example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
									  <div class="progress-bar progress-bar-striped bg-success" style="width: 25%"></div>
									</div>
									<div class="progress" role="progressbar" aria-label="Info striped example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
									  <div class="progress-bar progress-bar-striped bg-info" style="width: 50%"></div>
									</div>
									<div class="progress" role="progressbar" aria-label="Warning striped example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
									  <div class="progress-bar progress-bar-striped bg-warning" style="width: 75%"></div>
									</div>
									<div class="progress" role="progressbar" aria-label="Danger striped example" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
									  <div class="progress-bar progress-bar-striped bg-danger" style="width: 100%"></div>
									</div>
								
							

کسب اطلاعات بیشتر در سایت رسمی Bootstrap