jQuery implements percentage scoring progress bar

This article shares the specific code of jquery to realize the percentage scoring progress bar for your reference. The specific content is as follows

1. Look at the effect first

2. The code is as follows

The jquery.lineProgressbar.js code is as follows

(function($){
 '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%'
  },options);

  return this.each(function(index, el) {
   // Markup
   $(el).html('<div class="progressbar"><div class="proggress"></div></div><div class="percentCount"></div>');
   


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


   progressFill.css({
    backgroundColor : options.fillBackgroundColor,
    height : options.height,
    borderRadius: options.radius
   });
   progressBar.css({
    width : options.width,
    backgroundColor : options.backgroundColor,
    borderRadius: options.radius
   });

   // Progressing
   progressFill.animate(
    {
     width: options.percentage + "%"
    },
    { 
     step: function(x) {
      if (options.ShowProgressCount) {
       $(el).find(".percentCount").text("("+Math.round(x) + "分"+")");
      }
     },
     duration: options.duration
    }
   );
  });
 }
})(jQuery);

The jquery.lineProgressbar.css style code is as follows

#progressbar1{
 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);
}

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

.percentCount{
 white-space: nowrap;
 margin-left: 10px;
 font-size: 14px;
}

This way you can realize the score bar. If it is a percentage, just change the points to %.

Use it directly! ! !

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:

jQuery simple progress bar implementation code
6 novel jQuery and CSS3 progress bar plugins recommended
Share 8 excellent jQuery loading animation and progress bar plug-ins
A simple progress bar effect example implemented by jQuery
How to implement a file upload progress bar based on HTML5 Ajax (jquery version)
Simple progress bar control written in Javascript jquery css
jQuery EasyUI API Chinese Documentation - ProgressBar Progress Bar
jQuery implements file upload progress bar effects
How to use jQuery to monitor file uploads and implement progress bar effects
Use jQuery to implement a beautiful circular progress bar countdown plug-in

<<: How to configure pseudo-static and client-adaptive Nginx

>>: Detailed explanation of the use of mysql explain (analysis index)