bar indicator is a jquery-based progress bar data display plugin,It can be used in many scenarios such as data statistics display, voting statistics, and task progress.It ’s simple to use and rich in options.It can meet almost all web design needs of users based on progress bar.This article will explain the use of bar indicator with examples.


First load the jQuery and bar indicator related js files and css files.

<link href="bi-style.css" rel="stylesheet" />
<script src="jquery.min.js"></script>
<script src="jquery-barindicator.js"></script>
<script src="jquery.easing.1.3.js"></script>
Due to the use of animation buffer effects,Remember to add the easing plugin,You can download the source package,These files are all packed.
Then add html to<body> ;:

See itThe number 55 in the code indicates the progress to be displayed by this progress bar.The default is 100. Of course, this number can also be defined when the plugin is called.


After preparing the html, and then start calling the bar indicator, just one sentence of code:

<script>$("#bar"). barindicator ();</script>

Is it very simple,Of course, to meet the needs of your project,You need to do some settings,The bar indicator provides us with rich option settings and event method calls.Such as horizontal/vertical progress bar, progress bar color, numerical display, progress value acquisition and reset.

Options and methods

The bar indicator is very powerful,There are many more options not listed here.The above introduction is about implementing the progress bar display effect based on the jquery bar indicator plugin.Please stay tuned for more content.

  • Previous Detailed date and time class and Calendar class usage in Java
  • Next "Unknown collation:‘ utf8mb4_unicode_ci "error appears in the WordPress import database