Create a progress bar with Smarty and CSS

If you want show your visitors i.e. the received money vs. the goal for a charity collection or show the still available tickets to a concert, it is nice to show a progress bar. You can do this with a few lines of Smarty and a bit of CSS.

How to use

Add this Smarty code to your page or template. You can adjust the part and total parameter value to your likings.

template

{$part = '347'}
{$total = '1000'}
{math equation='part/total*100' part=$part total=$total assign='percentage'}

<div class="progress-bar-total">
<div class="progress-bar-part" style="width:{$percentage|round}%">{$percentage|round}%</div>
</div>

Add this - example - styling to your stylesheet:

stylesheet

.progress-bar-total {
width: 100%;
max-width: 400px;
border: #999 solid 2px;
background: #ccc;
}
.progress-bar-part {
padding: 2px 5px;
text-align: right;
background: #ff0;
}

Working example

The output of the code above, where the part value is today's date on a scale of 100

29%

Show related articles:

Comment Form

ReviewManager

GDPR privacy disclaimer
This form will send me your email address and your IP address.
If you don't want that, don't use this form!

ReviewManager

0 Comments

No comments yet...

Create a progress bar with Smarty and CSS

Article optimized for CMSMS 2.x

  Author: Rolf
  Last tested in: CMSMS 2.2.19
  Last updated: 10-06-2019
  Comments: 0
  http://cms.ms/6jbO