CSS Progress Bar

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:

<div style="width: <%= (600 - (Article.percentage_of_goal_count * 6))%>px; background: #DDD; border: 2px solid black; height: 20px;">
<div style="text-align: right; float: left; background: #0B0; width: <%= (Article.percentage_of_goal_count * 6) %>px;">
< span style="margin-right: 6px; color: white; font-weight: bold;"><%= Article.public_count %> / <%= Article.goal_count %> (<%= (Article.percentage_of_goal_count) %>%)
</div>
</div>

(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!

Tags: css, launchpad     Posted in Development

Rate this article:

(1 votes, average: 2 out of 5)

 Loading ...

---

Related Content

---