Build Step Progress Bar (css and jquery)

Question

You\'ve seen iterations of this type of progress bar on sites like paypal. Ho

Answer 1

I have searched for a solution that will visualize process steps in my web application. I have found the following excellent write-up by Stephen A Thomas:

Tracking Progress in Pure CSS (Original Link now dead)

In his approach Thomas even gets away with just using CSS - no Javascript! In an essence the following CSS code from his article does the trick for me:

As well as HTML tags from his example (I use Grails GSP pages to generate tags and 'done/todo' class dynamically):

    
Order Processing
    
Pre-Production
    
In Production
    
Shipped
    
Delivered

Hope it helps. Works pretty well for me.

---

UPDATE: The following (shortened) version also works well.

    ol.progtrckr {
        display: table;
        list-style-type: none;
        margin: 0;
        padding: 0;
        table-layout: fixed;
        width: 100%;
    }
    ol.progtrckr li {
        display: table-cell;
        text-align: center;
        line-height: 3em;
    }
    ... and the rest of the CSS ...

    

        ...
    

display: table; table-layout: fixed; width: 100% ensure that the list items are automatically sized equally as long as the content does not overflow. There is no need to use data-progtrckr-steps and its associated CSS.