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.2
  Last updated: 28-01-2015
  Comments: 0

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;
}

A2 Webhosting CMS Made Simple

  Working example

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

18%


A2 Webhosting CMS Made Simple

  Comments

  Click here to leave a comment






This is a captcha-picture. It is used to prevent mass-access by robots. (see: www.captcha.net)
  « Enter the CAPTCHA code (lower case)

Your IP address will be stored on submit. I reserve the right to change or delete your response without notice!
In case of abuse your IP address will be blocked!


Can I have your attention for a moment?

Did this tutorial help you solving a problem at your (clients) website and it saved you many hours of work? Great!!
Consider buying Rolf a cup of coffee in return! [ Click here ]


  0 Comments

No comments yet...

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

Create a progress bar with Smarty and CSS

  Article optimized for CMSMS 2.x

  Author:
  Last tested in: CMSMS 2.2.2
  Last updated: 28-01-2015
  Comments: 0

A2 Webhosting CMS Made Simple