JQuery implementation percentage scoring progress bar


This example shares the specific code of jQuery to realize the percentage scoring progress bar for your reference. The specific contents are as follows

1. See the effect first

2. The code is as follows:

jquery. lineProgressbar. JS code is as follows

 'use strict';
 $.fn.LineProgressbar = function(options){

  var options = $.extend({
   percentage : null,
   ShowProgressCount: true,
   duration: 1000,

   // Styling Options
   fillBackgroundColor: '#3498db',
   backgroundColor: '#EEEEEE',
   radius: '0px',
   height: '10px',
   width: '100%'

  return this.each(function(index, el) {
   // Markup

   var progressFill = $(el).find('.proggress');
   var progressBar= $(el).find('.progressbar');

    backgroundColor : options.fillBackgroundColor,
    height : options.height,
    borderRadius: options.radius
    width : options.width,
    backgroundColor : options.backgroundColor,
    borderRadius: options.radius

   // Progressing
     width: options.percentage + "%"
     step: function(x) {
       $(el). find(".percentCount"). Text ("(" + Math. Round (x) + "Min" + ")");
     duration: options.duration

jquery. lineProgressbar. CSS style code is as follows

 display: flex;
 height: 15px;
.progressbar {
    width: 50%;
 margin-top: 5px;
 position: relative;
 background: #182746 !important;
 border-radius: 6px !important;
 box-shadow: inset 0px 1px 1px rgba(0,0,0,.1);

 height: 8px;
 width: 10px;
 background: linear-gradient(to right, rgb(13, 93, 176), rgb(32, 177, 223)) !important;
 border-radius: 6px !important;

 white-space: nowrap;
 margin-left: 10px;
 font-size: 14px;

In this way, you can realize the score bar. If the percentage is, you only need to change the score to% and it’s OK.

Direct use!!!

The above is the whole content of this article. I hope it will be helpful to your study, and I hope you can support developpaer.