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.

{$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>

Add this - example - styling to your 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


Buy Me A Coffee

  Comment Form


Click here to open the form



No comments yet...

Buy Me A Coffee

CMS Made Simple - Tutorials, Tips and Tricks - CMSMS

Create a progress bar with Smarty and CSS

  Article optimized for CMSMS 2.x

  Last tested in: CMSMS 2.2.19
  Last updated: 10-06-2019
  Comments: 0

Buy Me A Coffee


Ads help me to help you! Thanks!

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