A Simple Progress Bar in Drupal Using CSS

I recently responded to a Drupal forum question about adding a simple, visual progress bar to a website. While there are plenty of libraries for sophisticated graphing, since the user had a simple problem I proposed a simple solution based on just a little HTML and CSS.

The user wanted the value of the progress bar to be based on a number stored in his Drupal custom content type. So, I had him create a new theme file named “node-project.tpl.php" and add code to pull out the value and create a two DIV set. The outer DIV is the progress bar container, and the inner DIV displays the progress value.

Since you can’t directly program CSS, the solution uses an in-line style element. While normally you strive to avoid using these, in this case we are limiting its use to controlling only the width of the inner DIV; we will control all over attributes in the CSS, where they belong.

Note that the PHP code includes checks of the progress value. Since the progress is intended to be a percent, it must be a valid number must be between 0 and 100. It also invokes the round() function to ensure it uses a whole number.

<?php
$style = 'display: none;';
$progress = $node->field_progress[0]['value'];
if( is_numeric($progress) && $progress > 0 && $progress <= 100 ) {
  $style = "width: ".round($progress)."%; display: block";
}
?>

Below that, add the HTML with the embedded results of the above variables:

<div id="progress-wrapper">
  <div id="progress-value" style="<?php print $style; ?>"></div>
<div>


Now the solution needs some CSS to make it look like a progress bar. Start with a basic style - just a black border with a gray filling:

<style>
#progress-wrapper {
  border: 1px solid #000000;
  background-color: transparent;
  width: 100px;
  height: 16px;
}
#progress-value {
  background-color: #acacac;
  height: 16px;
}
</style>


Progress (25%)

If you want something fancier, use a gradient image and softer colors:

<style>
#progress-wrapper {
  border: 1px solid #e4e4e4;
  background-color: transparent;
  width: 100px;
  height: 16px;
}
#progress-value {
  background: #ebebeb url(images/progress_bar.gif) repeat-x;
  height: 16px;
}
</style>


Progress (25%)

Have a simple problem? Use a simple solution.