Build Step Progress Bar css and jquery

Question

You ve seen iterations of this type of progress bar on sites like paypal   How does one go about setting this up using CSS and jquery  I have 4 pages and each page is a step    so 4 steps

User · Answer

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:

    <style>

    <!-- Progress with steps -->

    ol.progtrckr {
        margin: 0;
        padding: 0;
        list-style-type: none;
    }

    ol.progtrckr li {
        display: inline-block;
        text-align: center;
        line-height: 3em;
    }

    ol.progtrckr[data-progtrckr-steps="2"] li { width: 49%; }
    ol.progtrckr[data-progtrckr-steps="3"] li { width: 33%; }
    ol.progtrckr[data-progtrckr-steps="4"] li { width: 24%; }
    ol.progtrckr[data-progtrckr-steps="5"] li { width: 19%; }
    ol.progtrckr[data-progtrckr-steps="6"] li { width: 16%; }
    ol.progtrckr[data-progtrckr-steps="7"] li { width: 14%; }
    ol.progtrckr[data-progtrckr-steps="8"] li { width: 12%; }
    ol.progtrckr[data-progtrckr-steps="9"] li { width: 11%; }

    ol.progtrckr li.progtrckr-done {
        color: black;
        border-bottom: 4px solid yellowgreen;
    }
    ol.progtrckr li.progtrckr-todo {
        color: silver; 
        border-bottom: 4px solid silver;
    }

    ol.progtrckr li:after {
        content: "\00a0\00a0";
    }
    ol.progtrckr li:before {
        position: relative;
        bottom: -2.5em;
        float: left;
        left: 50%;
        line-height: 1em;
    }
    ol.progtrckr li.progtrckr-done:before {
        content: "\2713";
        color: white;
        background-color: yellowgreen;
        height: 1.2em;
        width: 1.2em;
        line-height: 1.2em;
        border: none;
        border-radius: 1.2em;
    }
    ol.progtrckr li.progtrckr-todo:before {
        content: "\039F";
        color: silver;
        background-color: white;
        font-size: 1.5em;
        bottom: -1.6em;
    }

</style>

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

<ol class="progtrckr" data-progtrckr-steps="5">
    <li class="progtrckr-done">Order Processing</li>
    <li class="progtrckr-done">Pre-Production</li>
    <li class="progtrckr-done">In Production</li>
    <li class="progtrckr-done">Shipped</li>
    <li class="progtrckr-todo">Delivered</li>
</ol>

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

    <ol class="progtrckr">
        ...
    </ol>

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.

User · Answer

There are a lot of very nice answers on this page and I googled for some more  but none of the answers ticked all the checkboxes on my wish list    CSS only  no Javascript Stick to Tom Kenny s Best Design Practices Layout like the other answers Each step has a name and a number Responsive layout  font size independent Fluid layout  the list and its items scale with the available width The names and numbers are centered in their block The  done  color goes up to and including the active item  but not past it   The active item should stand out graphically   So I mixed the code of several examples  fixed the things that I needed and here is the result     I used the following CSS and HTML    x000D   x000D     Progress Tracker v2    x000D  ol progress data-steps  2   li   width  49     x000D  ol progress data-steps  3   li   width  33     x000D  ol progress data-steps  4   li   width  24     x000D  ol progress data-steps  5   li   width  19     x000D  ol progress data-steps  6   li   width  16     x000D  ol progress data-steps  7   li   width  14     x000D  ol progress data-steps  8   li   width  12     x000D  ol progress data-steps  9   li   width  11     x000D   x000D   progress   x000D      width  100   x000D      list-style  none  x000D      list-style-image  none  x000D      margin  20px 0 20px 0  x000D      padding  0  x000D    x000D   x000D   progress li   x000D      float  left  x000D      text-align  center  x000D      position  relative  x000D    x000D   x000D   progress  name   x000D      display  block  x000D      vertical-align  bottom  x000D      text-align  center  x000D      margin-bottom  1em  x000D      color  black  x000D      opacity  0 3  x000D    x000D   x000D   progress  step   x000D      color  black  x000D      border  3px solid silver  x000D      background-color  silver  x000D      border-radius  50   x000D      line-height  1 2  x000D      width  1 2em  x000D      height  1 2em  x000D      display  inline-block  x000D      z-index  0  x000D    x000D   x000D   progress  step span   x000D      opacity  0 3  x000D    x000D   x000D   progress  active  name  x000D   progress  active  step span   x000D      opacity  1  x000D    x000D   x000D   progress  step before   x000D      content      x000D      display  block  x000D      background-color  silver  x000D      height  0 4em  x000D      width  50   x000D      position  absolute  x000D      bottom  0 6em  x000D      left  0  x000D      z-index  -1  x000D    x000D   x000D   progress  step after   x000D      content      x000D      display  block  x000D      background-color  silver  x000D      height  0 4em  x000D      width  50   x000D      position  absolute  x000D      bottom  0 6em  x000D      right  0  x000D      z-index  -1  x000D    x000D   x000D   progress li first-of-type  step before   x000D      display  none  x000D    x000D   x000D   progress li last-of-type  step after   x000D      display  none  x000D    x000D   x000D   progress  done  step  x000D   progress  done  step before  x000D   progress  done  step after  x000D   progress  active  step  x000D   progress  active  step before   x000D      background-color  yellowgreen  x000D    x000D   x000D   progress  done  step  x000D   progress  active  step   x000D      border  3px solid yellowgreen  x000D    x000D   lt  -- Progress Tracker v2 -- gt  x000D   lt ol class  progress  data-steps  4  gt  x000D       lt li class  done  gt  x000D           lt span class  name  gt Foo lt  span gt  x000D           lt span class  step  gt  lt span gt 1 lt  span gt  lt  span gt  x000D       lt  li gt  x000D       lt li class  done  gt  x000D           lt span class  name  gt Bar lt  span gt  x000D           lt span class  step  gt  lt span gt 2 lt  span gt  lt  span gt  x000D       lt  li gt  x000D       lt li class  active  gt  x000D           lt span class  name  gt Baz lt  span gt  x000D           lt span class  step  gt  lt span gt 3 lt  span gt  lt  span gt  x000D       lt  li gt  x000D       lt li gt  x000D           lt span class  name  gt Quux lt  span gt  x000D           lt span class  step  gt  lt span gt 4 lt  span gt  lt  span gt  x000D       lt  li gt  x000D   lt  ol gt  x000D   x000D   x000D    As can be seen in the example above  there are now two list item classes to take note of  active and done  Use class  active  for the current step  use class  done  for all steps before it   Also note the data-steps  4  in the ol tag  set this to the total number of steps to apply the correct size to all list items   Feel free to play around with the JSFiddle  Enjoy

User · Answer

I had the same requirements to create a kind of step progress tracker so I created a JavaScript plugin for that purpose  Here is the JsFiddle for the demo for this step progress tracker  You can access its code on GitHub as well   What it basically does is  it takes the json data in a particular format described below  as input and creates the progress tracker based on that  Highlighted steps indicates the completed steps   It s html will somewhat look like shown below with default CSS but you can customize it as per the theme of your application  There is an option to show tool-tip text for each steps as well    Here is some code snippet for that     container div   lt div id  tracker1  style  width  700px  gt   lt  div gt     sample JSON data var sampleJson1     ToolTipPosition   bottom   data     order  1  Text   Foo   ToolTipText   Step1-Foo   highlighted  true          order  2  Text   Bar   ToolTipText   Step2-Bar   highlighted  true          order  3  Text   Baz   ToolTipText   Step3-Baz   highlighted  false          order  4  Text   Quux   ToolTipText   Step4-Quux   highlighted  false              Invoking the plugin   document  ready function                  tracker1   progressTracker sampleJson1             Hopefully it will be useful for somebody else as well

User · Answer

This is how I have achieved it using purely CSS and HTML  no JavaScript images etc     http   jsfiddle net tuPrn   It gracefully degrades in most browsers  I do need to add in a fix for lack of last-of-type in   lt  IE9

User · Answer

This is what I did    Create jQuery  progressbar   to load a div into a progress bar  Create the step title on the bottom of the progress bar  Position them with CSS  Then I create function in jQuery that change the value of the progressbar everytime user move on to next step    HTML   lt div id  divProgress  gt  lt  div gt   lt div id  divStepTitle  gt       lt span class  spanStep  gt Step 1 lt  span gt   lt span class  spanStep  gt Step 2 lt  span gt   lt span class  spanStep  gt Step 3 lt  span gt   lt  div gt    lt input type  button  id  btnPrev  name  btnPrev  value  Prev    gt   lt input type  button  id  btnNext  name  btnNext  value  Next    gt    CSS   divProgress       width  600px      divStepTitle       width  600px      spanStep       text-align  center      width  200px      Javascript jQuery  var progress   0     function         set step progress bar         divProgress   progressbar           event handler for prev and next button         btnPrev   btnNext   click function            step   this                 function step obj          switch to prev next page     if  obj val       Prev                   set new value for progress bar         progress -  20              divProgress   progressbar   value  progress                do extra step for showing previous page           else if  obj val       Next                   set new value for progress bar         progress    20              divProgress   progressbar   value  progress                do extra step for showing next page

User · Answer

Here is how to make one     http   24ways org 2008 checking-out-progress-meters  Here are some inspiration examples     http   www smashingmagazine com 2010 01 15 progress-trackers-in-web-design-examples-and-best-design-practices

User · Answer

What I would do is use the same trick often use for hovering on buttons   Prepare an image that has 2 parts   1  a top half which is greyed out  meaning incomplete  and  2  a bottom half which is colored in  meaning completed   Use the same image 4 times to make up the 4 steps of the progress bar  and align top for incomplete steps  and align bottom for incomplete steps   In order to take advantage of image alignment  you d have to use the image as the background for 4 divs  rather than using the img element     This is the CSS for background image alignment   div progress-incomplete     background-position  top    div progress-finished     background-position  bottom

[jquery] Build Step Progress Bar (css and jquery)

Examples related to jquery

Examples related to css

Examples related to progress-bar

Examples related to multi-step