Multicolor Progress Bar Plugin - jQuery Multibar.js

Multibar.js is a simple yet fully customizable jQuery plugin for creating multi-colored (segmented) progress bars to represent various data ranges, completion levels, or any other metric that requires visualization. 

It supports one or more markers that clearly indicate specific points or milestones within the progress bar. In addition, this plugin allows you to generate legends based on the progress value, enabling users to interpret the data being presented easily.

See Also:

• 10 Best Progress Bar (Linear) Components In JavaScript & CSS

How to use it:

1. Add jQuery library and the Multibar.js plugin's files to the page.

<!-- jQuery is required -->
<script src="/path/to/cdn/jquery.slim.min.js"></script>

<!-- jQuery Multibar.js -->
<link rel="stylesheet" href="multibar.css">
<script src="multibar.js"></script>

2. Create an empty DIV for the progress bar.

<div id="example"></div>

3. Initialize the plugin and add a marker to the progress bar.

var bar = $('#example').multibar({
    initValue: [3],
});

// OR
bar.multibar("setValue",[3]);

4. Customize the marker(s).

var bar = $('#example').multibar({

    // or "inside"
    posMarker: "outside",

    // custom icon class
    iconMarker: "arrow-down",
    
});

5. Set the min/max values.

var bar = $('#example').multibar({
    min: 0,
    max: 10,
});

6. Customize the styles of each segment of the progress bar.

var bar = $('#example').multibar({

    multiBarValue:[
    {
      visibility:"visible",
      val:2,
      bgColor:"green"
    },
    {
      visibility:"visible",
      val:4,
      bgColor:"yellow"
    },
    {
      visibility:"visible",
      val:6,
      bgColor:"orange"
    },
    {
      visibility:"visible",
      val:8,
      bgColor:"red"
    },
    {
      visibility:"visible",
      val:10,
      bgColor:"purple"
    }
  ],

});

7. Customize the legend.

var bar = $('#example').multibar({

    legend:{
      show: true,
      title: "My Item",
      titleClass: "titleLegend",
      itemClass: "itemLegend"
    }

});

8. More plugin options.

var bar = $('#example').multibar({

    // 'hot', 'cold'
    type: "normal",

    // enable Multi Bar Thermometer
    thermometer: false,

    // reverse the progress bar
    reverse: false,

    // set the visibility of values
    multiBarValueVisibility: "visible",

    // set the position of the box-shadow
    // e.g. 'top_right'
    shadow: false

});

---

This awesome jQuery plugin is developed by teorossi82. For more Advanced Usages, please check the demo page or visit the official website.