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...