Build step progress line (css and jquery)

Question

You have seen repetitions of this type of progress bar on sites like paypal. How to do this using CSS and jquery ? I have 4 pages and each page is a step ... so there are 4 steps.

Answer 1

I was looking for a solution that would visualize the process steps in my web application. I found the following excellent review by Stephen Thomas:

Tracking progress in pure CSS ( Source link is now dead )

In his approach, Thomas even quits using CSS - without Javascript! Essentially, 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> 

Like the HTML tags from his example (I use Grails GSP pages to generate tags and the dynamic class "done / todo"):

 <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 this helps. Works well for me.

---

UPDATE The next (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% display: table; table-layout: fixed; width: 100% make sure the list items are automatically equal in size until the content overflows. There is no need to use data-progtrckr-steps and the associated CSS.

Answer 2

Here's how to do it:

http://24ways.org/2008/checking-out-progress-meters

Here are some examples of inspiration:

http://www.smashingmagazine.com/2010/01/15/progress-trackers-in-web-design-examples-and-best-design-practices/

Answer 3

This is how I did it using pure CSS and HTML (no JavaScript / images, etc.).

http://jsfiddle.net/tuPrn/

It competently degrades in most browsers (I need to add a fix due to the absence of the latter type in <IE9).

Answer 4

There are many very good answers on this page, and I searched googled even more, but none of the answers checked all the checkboxes in my wish list:

• CSS only, no javascript
• Stick Tom Kenny Best Design Techniques
• Layout, like other answers
• Each step has a name and number.
• Responsive Layout: Independent Font Size
• Liquid layout: the list and its elements are scaled to the available width.
• Names and numbers are concentrated in their block.
• The color "made" increases to and includes the active element, but does not pass by it.
• Active element should be highlighted graphically.

So, I mixed the code of several examples, fixed what I needed, and here is the result:

I used the following CSS and HTML:

 /* Progress Tracker v2 */ ol.progress[data-steps="2"] li { width: 49%; } ol.progress[data-steps="3"] li { width: 33%; } ol.progress[data-steps="4"] li { width: 24%; } ol.progress[data-steps="5"] li { width: 19%; } ol.progress[data-steps="6"] li { width: 16%; } ol.progress[data-steps="7"] li { width: 14%; } ol.progress[data-steps="8"] li { width: 12%; } ol.progress[data-steps="9"] li { width: 11%; } .progress { width: 100%; list-style: none; list-style-image: none; margin: 20px 0 20px 0; padding: 0; } .progress li { float: left; text-align: center; position: relative; } .progress .name { display: block; vertical-align: bottom; text-align: center; margin-bottom: 1em; color: black; opacity: 0.3; } .progress .step { color: black; border: 3px solid silver; background-color: silver; border-radius: 50%; line-height: 1.2; width: 1.2em; height: 1.2em; display: inline-block; z-index: 0; } .progress .step span { opacity: 0.3; } .progress .active .name, .progress .active .step span { opacity: 1; } .progress .step:before { content: ""; display: block; background-color: silver; height: 0.4em; width: 50%; position: absolute; bottom: 0.6em; left: 0; z-index: -1; } .progress .step:after { content: ""; display: block; background-color: silver; height: 0.4em; width: 50%; position: absolute; bottom: 0.6em; right: 0; z-index: -1; } .progress li:first-of-type .step:before { display: none; } .progress li:last-of-type .step:after { display: none; } .progress .done .step, .progress .done .step:before, .progress .done .step:after, .progress .active .step, .progress .active .step:before { background-color: yellowgreen; } .progress .done .step, .progress .active .step { border: 3px solid yellowgreen; } 

 <!-- Progress Tracker v2 --> <ol class="progress" data-steps="4"> <li class="done"> <span class="name">Foo</span> <span class="step"><span>1</span></span> </li> <li class="done"> <span class="name">Bar</span> <span class="step"><span>2</span></span> </li> <li class="active"> <span class="name">Baz</span> <span class="step"><span>3</span></span> </li> <li> <span class="name">Quux</span> <span class="step"><span>4</span></span> </li> </ol> 

As you can see from the above example, now there are two classes of list items: active and done . Use class="active" for the current step, use class="done" for all steps in front of it.

Also note the data-steps="4" in the ol tag; set the total number of steps for this to apply the correct size to all elements of the list.

Feel free to play with JSFiddle . Enjoy it!

Answer 5

I had the same requirements for creating a kind of tracking of the progress of the steps, so I created a JavaScript plugin for this. Below is a JsFiddle to demonstrate this step progress tracker. You can access its GitHub code.

This basically means that it takes json data as input (in the specific format described below) and creates a progress tracker on it. Highlighted steps show completed steps.

This html will look like below using CSS by default, but you can customize it according to the theme of your application. There is also the option to display tooltip text for each step.

Here is the code snippet for this:

 //container div <div id="tracker1" style="width: 700px"> </div> //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); }); 

I hope it will be useful for someone else!

Answer 6

This is what I did:

• Create jQuery.progressbar () to load the div into the progress bar.
• Create a step title at the bottom of the progress bar. Place them using CSS .
• Then I create a function in jQuery that changes the value of the progressbar every time the user moves on to the next step.

HTML

 <div id="divProgress"></div> <div id="divStepTitle"> <span class="spanStep">Step 1</span> <span class="spanStep">Step 2</span> <span class="spanStep">Step 3</span> </div> <input type="button" id="btnPrev" name="btnPrev" value="Prev" /> <input type="button" id="btnNext" name="btnNext" value="Next" /> 

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

Answer 7

I would start with this http://jqueryui.com/demos/progressbar/

And then change the style as you would like.

Answer 8

You make it harder than necessary. Just make four separate images and combine them with one of four pages. Easily.

Answer 9

What I would do is use the same trick that is often used to hang buttons. Prepare an image that consists of two parts: (1) the upper half, which is grayed out, which means incomplete, and (2) the lower half, which is colored in, which means completed. Use the same image 4 times to complete the 4 steps of the progress bar, and align the top for incomplete steps and align the bottom for incomplete steps.

To take advantage of image alignment, you need to use the image as the background for 4 divs, and not use the img element.

This is CSS to align the background image:

 div.progress-incomplete { background-position: top; } div.progress-finished { background-position: bottom; }