CSS3 Progress Bars

Tags

1. 2 css3

9 Responses

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

   over 1 year ago

2. Darren Emory

   Cool, dude.

   over 1 year ago

3. Pro Chris J. Davis

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

   over 1 year ago

4. David Brooks

   Awesome! Very slick indeed.

   over 1 year ago

5. Pro Anton Peck

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

   over 1 year ago

6. Daniel Marino

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

   over 1 year ago

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

   over 1 year ago

8. Pro Nathan Smith

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

   over 1 year ago

9. Bruno Monteiro

   Nathan, great job. Love the solution.

   over 1 year ago