Introduction

Checkpoint.js is a Javascript library that allows you to create a user interface like the above one in seconds.

Some highlights

• Pure Javascript/CSS, no other library/framework needed
• 5KB Javascript, 2KB CSS
• Customize your own CSS stylesheets (Using LESS)
• Open source under MIT license

Scroll down to view more examples

Checkpoint.js can be used in the following scenarios

Status Indicator

Progress Bar

Timeline

1-2-3 Go

var checkpoint = checkpointJs("#checkpoint");           
checkpoint.setPoints([{                                 
        id: "introduction",                             // id of the point
        title: "What is?",                              // title of the point
        description: "What is Checkpoint.js?",          // optional text of the point
        onPointCallback: null
    },{
        id: "examples",
        title: "Examples",
        description: "Some Examples",
        onPointCallback: function(index) {
            alert(index)
        }
    }, {
        id: "usage",
        title: "Usage",
        description: "Usage",
        onPointCallback: null
    }])
checkpoint.init();                                      // initialize (draw) the Checkpoint
checkpoint.reach(3);                                    // reach the 4th checkpoint
                

Download Master branch

Visit Github page