tabler.tabler/preview/pages/progress.html

---
layout: default
title: Progress
page-header: Progress
page-menu: base.progress
permalink: progress.html
---

<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-3">
	<div class="col">
		<div class="card">
			<div class="card-body">
				<h3 class="card-title">Default</h3>
				<div class="space-y">
					{% include "ui/progress.html" value="0" %}
					{% include "ui/progress.html" value="20" %}
					{% include "ui/progress.html" value="40" %}
					{% include "ui/progress.html" value="100" %}
				</div>
			</div>
		</div>
	</div>
	<div class="col">
		<div class="card">
			<div class="card-body">
				<h3 class="card-title">With value</h3>
				<div class="space-y">
					{% include "ui/progress.html" value="10" show-value size="lg" %}
					{% include "ui/progress.html" value="20" show-value size="lg" %}
					{% include "ui/progress.html" value="90" show-value size="lg" %}
				</div>
			</div>
		</div>
	</div>
	<div class="col">
		<div class="card">
			<div class="card-body">
				<h3 class="card-title">Colors</h3>
				<div class="space-y">
					{% include "ui/progress.html" color="blue" value="20" %}
					{% include "ui/progress.html" color="green" value="40" %}
					{% include "ui/progress.html" color="yellow" value="60" %}
					{% include "ui/progress.html" color="red" value="80" %}
				</div>
			</div>
		</div>
	</div>
	<div class="col">
		<div class="card">
			<div class="card-body">
				<h3 class="card-title">Sizes</h3>
				<div class="space-y">
					{% include "ui/progress.html" value="20" size="sm" %}
					{% include "ui/progress.html" value="40" %}
					{% include "ui/progress.html" value="60" size="lg" %}
					{% include "ui/progress.html" value="80" size="xl" %}
				</div>
			</div>
		</div>
	</div>
	<div class="col">
		<div class="card">
			<div class="card-body">
				<h3 class="card-title">Indeterminate</h3>
				<div class="space-y">
					{% include "ui/progress.html" indeterminate=true %}
				</div>
			</div>
		</div>
	</div>
	<div class="col">
		<div class="card">
			<div class="card-body">
				<h3 class="card-title">Multiple values</h3>
				<div class="space-y">
					{% include "ui/progress.html" values="20,30,10" %}
					{% include "ui/progress.html" values="10,20,30,40" class="progress-separated" %}
				</div>
			</div>
		</div>
	</div>
	<div class="col">
		<div class="card">
			<div class="card-body">
				<h3 class="card-title">Striped</h3>
				<div class="space-y">
					{% include "ui/progress.html" color="blue" value="20" striped %}
					{% include "ui/progress.html" color="green" value="40" striped %}
					{% include "ui/progress.html" color="yellow" value="60" striped %}
					{% include "ui/progress.html" color="red" value="80" striped %}
				</div>
			</div>
		</div>
	</div>
	<div class="col">
		<div class="card">
			<div class="card-body">
				<h3 class="card-title">Animated</h3>
				<div class="space-y">
					{% include "ui/progress.html" value="20" striped animated %}
					{% include "ui/progress.html" value="40" color="green" striped animated %}
					{% include "ui/progress.html" value="60" color="yellow" striped animated %}
					{% include "ui/progress.html" value="80" color="red" striped animated %}
				</div>
			</div>
		</div>
	</div>
	<div class="col">
		<div class="card">
			<div class="card-body">
				<h3 class="card-title">
					Animated with JavaScript
				</h3>
				<div class="row align-items-center g-0">
					<div class="col">
						{% include "ui/progress.html" value="0" id="progress-animated" %}
					</div>
					<div class="col-2 text-end" id="progress-animated-value">
						0%
					</div>
				</div>
				<div class="btn-list mt-3">
					<button class="btn btn-sm" id="progress-animated-0">0%</button>
					<button class="btn btn-sm" id="progress-animated-10">10%</button>
					<button class="btn btn-sm" id="progress-animated-50">50%</button>
					<button class="btn btn-sm" id="progress-animated-100">100%</button>
					<button class="btn btn-sm ms-3" id="progress-animated-minus-10">-10%</button>
					<button class="btn btn-sm" id="progress-animated-add-10">+10%</button>
				</div>
			</div>
		</div>
	</div>
	<div class="col">
		<div class="card">
			<div class="card-body">
				<h3 class="card-title">
					Steps Progress
				</h3>
				<div class="space-y">
					{% include "ui/progress-steps.html" count=3 %}
					{% include "ui/progress-steps.html" count=5 active=4 %}
					{% include "ui/progress-steps.html" count=10 color="red" %}
					{% include "ui/progress-steps.html" count=8 color="green" active=8 %}
				</div>
			</div>
		</div>
	</div>
	<div class="col">
		<div class="card">
			<div class="card-body">
				<h3 class="card-title">
					Progress Background
				</h3>
				<div class="space-y">
					{% include "ui/progressbg.html" value="85" text="Poland" show-value=true %}
					{% include "ui/progressbg.html" value="65" text="Germany" show-value=true %}
					{% include "ui/progressbg.html" value="45" text="United States" show-value=true %}
					{% include "ui/progressbg.html" value="25" text="France" show-value=true %}
				</div>
			</div>
		</div>
	</div>
	<div class="col">
		<div class="card">
			<div class="card-body">
				<h3 class="card-title">
					Progress Background Colors
				</h3>
				<div class="space-y">
					{% include "ui/progressbg.html" value="75" text="Success" color="success-lt" show-value=true %}
					{% include "ui/progressbg.html" value="60" text="Warning" color="warning-lt" show-value=true %}
					{% include "ui/progressbg.html" value="40" text="Danger" color="danger-lt" show-value=true %}
					{% include "ui/progressbg.html" value="90" text="Info" color="info-lt" show-value=true %}
				</div>
			</div>
		</div>
	</div>
	<div class="col">
		<div class="card">
			<div class="card-body">
				<h3 class="card-title">
					Progress Description
				</h3>
				<div class="space-y">
					{% include "ui/progress-description.html" label="Project completion" value="85" color="green" %}
					{% include "ui/progress-description.html" label="Storage usage" description="2.4GB of 5GB" value="48" color="blue" %}
					{% include "ui/progress-description.html" label="Download progress" value="75" color="yellow" %}
					{% include "ui/progress-description.html" label="Skills assessment" description="HTML/CSS" value="92" color="red" %}
				</div>
			</div>
		</div>
	</div>
	<div class="col">
		<div class="card">
			<div class="card-body">
				<h3 class="card-title">
					Progress Description Sizes
				</h3>
				<div class="space-y">
					{% include "ui/progress-description.html" label="Small progress" value="60" size="sm" color="blue" %}
					{% include "ui/progress-description.html" label="Default progress" value="70" color="green" %}
					{% include "ui/progress-description.html" label="Large progress" value="80" size="lg" color="orange" %}
					{% include "ui/progress-description.html" label="Extra large" value="90" size="xl" color="purple" %}
				</div>
			</div>
		</div>
	</div>
</div>

{% capture_script -%}
<!-- BEGIN SCRIPT OF ANIMATION -->
<script>
	/*
	This script is for animation of the last progress bar
	It increases the progress bar value by a random amount every 2 seconds until it reaches 100%
	When it reaches 100%, it changes the color to green and stops the animation

	This is just a demo script to show how to animate the progress bar. You can modify it as needed.
	*/
	document.addEventListener("DOMContentLoaded", function () {
		var width = 0; 
		var setWidth = function(w) {
			width = Math.min(Math.max(w, 0), 100);

			progress.querySelector('.progress-bar').style.width = width + '%';
			progress.querySelector('.progress-bar').setAttribute('aria-valuenow', width);
			document.getElementById('progress-animated-value').innerText = width + '%';

			if (width >= 100) {
				progress.querySelector('.progress-bar').classList.add('bg-green');
			} else {
				progress.querySelector('.progress-bar').classList.remove('bg-green');
			}
		}

		var progress = document.getElementById('progress-animated');
		
		var increment = 0;
		var interval = setInterval(function () {
			increment = Math.ceil(Math.random() * 10);
			setWidth(width + increment);
			
			if (width >= 100) {
				clearInterval(interval);
			}
		}, 2000);

		document.getElementById('progress-animated-0').addEventListener('click', function() {
			setWidth(0);
		});
		
		document.getElementById('progress-animated-add-10').addEventListener('click', function() {
			setWidth(width + 10);
		});
		
		
		document.getElementById('progress-animated-minus-10').addEventListener('click', function() {
			setWidth(width - 10);
		});
		
		
		document.getElementById('progress-animated-100').addEventListener('click', function() {
			setWidth(100);
		});
		
		
	});
</script>
<!-- END SCRIPT OF ANIMATION -->
{%- endcapture_script -%}