One of the unique features of Launchpad is the article count meter. Since Launchpad is geared towards being a community-driven article website, it has an “article count” goal. The idea is that the target moves; it grows, exponentially–because as your site gets popular, more and more people should contribute.
Having said this, we display the article count as a progress bar in the dashboard. But how can we have a dynamic progress bar with no images–100% CSS?
The solution is a clever bit of CSS; we have a fixed-width we decide on for the bar (eg. 600px), and we make a bordered div to represent the bar; inside, we have the “progress” area in a second div. We calculate the width of that area based on the number of articles.
Here’s the code:
< span style="margin-right: 6px; color: white; font-weight: bold;"><%= Article.public_count %> / <%= Article.goal_count %> (<%= (Article.percentage_of_goal_count) %>%)
(goal_count is the number of articles in the current goal, eg. 500; and percentage_of_goal_count is the percent of articles we have of our goal; so 50/500 is 10.)
And it works! Because you have the widths “hard-coded”, it looks beautiful in all browsers. The CSS is simple, with only some floats and text-aligns. Even the text percentage is selectable!
Are there any short-comings? Unlike a more advanced progress bar, the text colour doesn’t invert in the progress area. Other than that, great!
Pingback: Websites tagged "progressbar" on Postsaver