Counters and Progress Bar

Counters and Progress bars are regularly used elements to represents statistics in dashboard style pages

Counters:


Using ‘is–success’
4 / 10
30% last week
Using ‘is–primary’
280 / 500
56% last week
Using ‘is–warning’
80%
3% last week

Using ‘is–danger’
62%
8% last week
Using ‘is–default’
346 / 1000
3% last week 
<div class="app-counter is--success">

	<!-- modify width height values for sizes -->
	<svg viewBox="0 0 36 36" class="counter__wrap" width="140px" height="140px" >
		<path class="counter__circle-bg" stroke="#efefef"
			d="M18 2.0845a 15.9155 15.9155 0 0 1 0 31.831a 15.9155 15.9155 0 0 1 0 -31.831" />

		<!-- add % value in stroke 'stroke-dasharray' property -->	
		<path class="counter__circle" stroke-dasharray="30, 100"
		d="M18 2.0845a 15.9155 15.9155 0 0 1 0 31.831a 15.9155 15.9155 0 0 1 0 -31.831" />
		<text x="18" y="20.35" class="counter__percentage">4 / 10</text>
	</svg>
	<div class="counter__data">
		<strong><i class="fa fa-caret-down is--danger"></i> 30%  </strong> last week 
	</div>
</div>

<!-- modify 'is--primary' class for different colors -->
<div class="app-counter is--primary">
	<svg viewBox="0 0 36 36" class="counter__wrap" width="140px" height="140px">
		<path class="counter__circle-bg" stroke="#efefef"
		d="M18 2.0845a 15.9155 15.9155 0 0 1 0 31.831a 15.9155 15.9155 0 0 1 0 -31.831" />
		<path class="counter__circle" stroke-dasharray="56, 100"
		d="M18 2.0845a 15.9155 15.9155 0 0 1 0 31.831a 15.9155 15.9155 0 0 1 0 -31.831" />
		<text x="18" y="20.35" class="counter__percentage">280 / 500</text>
	</svg>
	<div class="counter__data">
		<strong><i class="fa fa-caret-up is--success"></i> 56%  </strong> last week 
	</div>
</div>

Progress Bars:


Default
62%
62%

Primary
28%
28%

Success
84%
82%
Info
72%
72%

Warning
56%
56%

Danger
38%
38% 
<div class="progressbar">
	<div class="app-flex is--center-aligned">
		<div class="flex__col is--col-50 progressbar__lbl">Default</div>
		<div class="flex__col is--col-50 progressbar__val">62%</div>
	</div>
	<progress class="progressbar__progress" value="62" max="100">62%</progress>
</div>
<!-- modify 'is--primary' 'is--success' class for different colors -->
<div class="progressbar is--success">
	<div class="app-flex is--center-aligned">
		<div class="flex__col is--col-50 progressbar__lbl">Default</div>
		<div class="flex__col is--col-50 progressbar__val">84%</div>
	</div>
	<progress class="progressbar__progress" value="84" max="100">84%</progress>
</div>

Appivo Courses

Self-paced, video-based content will teach you everything you need to know to build apps using best-practices, and some tips and tricks as well.

Coming Soon

Need Help?

Looking for more information? Browse our community forum or post a new question.

Appivo Forum