MENU

Create a progress bar with Smarty and CSS

  Previous article Next article  

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

12%


Advertisement


Ads help me to help you! Thanks!

Ads help me to help you! Buy products from these advertisers!


  Comment Form

Click here to open the form


  0 Comments

No comments yet...

CMS Made Simple - Tutorials, tips and tricks - CMSMS

Create a progress bar with Smarty and CSS

  Article optimized for CMSMS 2.x

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

Advertisement


Ads help me to help you! Thanks!

Ads help me to help you! Buy products from these advertisers!

Advertisement


Ads help me to help you! Thanks!

Ads help me to help you! Buy products from these advertisers!