Create a progress bar with Smarty and CSS

  Previous article Next article  

Create a progress bar with Smarty and CSS

  Article optimized for CMSMS 2.x

  Author:
  Last tested in: CMSMS 2.2.5
  Last updated: 22-11-2017
  Comments: 0
  http://cms.ms/6jbO

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 todays date on a scale of 100

23%




CMS Made Simple 2.2.5 - Tutorials, tips and tricks - CMSMS 2.2.5

Create a progress bar with Smarty and CSS

  Article optimized for CMSMS 2.x

  Author:
  Last tested in: CMSMS 2.2.5
  Last updated: 22-11-2017
  Comments: 0
  http://cms.ms/6jbO