CSS3 Progress Bars

9 Responses

1. Nathan Smith

   Using CSS3 to style stuff more and more lately. This screenshot uses no images (aside from being a screenshot itself, of course).

   This is a data table for a translation app I'm designing for a freelance client. "# Strings" is the count of the number of translated phrases vs. total remaining.

   The progress bars animate when the page loads, and the math is parsed by extracting values from the strings column.

   almost 2 years ago

2. Darren Emory

   Cool, dude.

   almost 2 years ago

3. Pro Chris J. Davis

   Very nice, I have done the same thing on an older project. CSS3 ftw.

   almost 2 years ago

4. David Brooks

   Awesome! Very slick indeed.

   almost 2 years ago

5. Pro Anton Peck

   Why oh why do I now want to go experiment with this?

   almost 2 years ago

6. Daniel Marino

   Nice - I find myself using CSS3 more and more too. Seems like clients are starting to embrace the future.

   almost 2 years ago

7. oVan

   I like it! Is there a reason the numbers are underlined? I guess the user can click on the platform name to see details?

   almost 2 years ago

8. Nathan Smith

   @oVan - The numbers are wrapped in [abbr] tags. Hovering shows the words "Done" and "Completed" respectfully.

   almost 2 years ago

9. Bruno Monteiro

   Nathan, great job. Love the solution.

   almost 2 years ago