1. Background

Before we get to the code examples and how to include it in your html page, there’s a couple of things to highlight first.

1.1. Requirements

Milestones is dependant on three external libraries which are listed below:

• Bootstrap
• jQuery
• Font-Awesome

2. Getting Started

To begin, you need to ensure that the stylesheets and the javascript libraries are included in your html file.

2.1. Required Stylesheets

Load the requred external Stylesheets:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/milestones.css">

2.2. Required Libraries

Include the required javascript libraries:

<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/milestones.js"></script>

2.3. Add a Container

Make sure you apply the milestones class and give the container an ID:

<div class="milestones" id="ms1"></div>

2.4. Instantiate the Plugin

This will apply default values and display the milestones.

<script>
   $(function(){
       $('#ms1').milestones();
   });
</script>

2.5. Add Options

This will control the labels, the progress and the checkmarks.

<script>
  $(function(){
     $('#ms1').milestones({
         position: 2,  // progress to the 2nd milestone
         checks: 1, // apply a checkmark to the 1st milestone
         checkclass: 'ms-checkmark', // apply this class to the checkmarks
         msclass: 'doneclass', // apply this class to the completed tickmarks
         labels: ["Stage 1","Stage 2","Stage 3","Stage 4"]  // array of labels
     });
  });
</script>