Custom scale jQuery progress bar and plug-in, scale jquery progress bar

Custom scale jQuery progress bar and plug-in, scale jquery progress bar

Progressdots is a jQuery progress bar plug-in that allows you to customize the scale animation. You can use the jQuery progress bar plug-in to customize the quantity, size, color, and other attributes of the progress bar scale dots, and use CSS to control the appearance style of the dots.

For more information about the plug-ins, see the following.

This jQuery progress bar plug-in needs to be introducedJquery, jquery.progressdots.jsand jquery.progressdots.cssFile.

<script src="jquery.min.js"></script> <script src="jquery.progressdots.js"></script><link href="jquery.progressdots.css" rel="stylesheet">

HTML Structure

Then, an empty <div> element is used as the progress bar container.

The width and height of the container are arbitrary.

<div id='progressBox'></div> 

Set some basic styles for the progress bar container and specify its width and height.

#progressBox{ border: 8px solid #DDD; width: 80%; height: 40px; }

Call plug-ins

After the DOM element on the page is loaded, you can initialize the progress bar plug-in using the following method:

$( '#progressBox' ).dottify({ dotSize: '25px', //set size of dot dotColor: '#f15c89',//set dot color (#HEX) progress: true, //enable progress percent: 10, //set initial percentage radius: '40%'//set dot corner radius }); 

Advanced options

var progressBox = $( '#progressBox' ).dottify({ progress:true,//start with progressbar on percent:0 }); progressBox.setProgress( 20 );//update progress percentage 

Customizable scale jQuery progress bar is a property that allows you to customize the number, size, color, and other attributes of the progress bar. CSS can be used to control the appearance style of the dot.

As follows:

View demo download

Html code:

<Div class = "htmleaf-container"> <div id = "container"> <div class = "padded"> <div id = "progressHolder"> </div> <div id = "progressReset"> Generate a random style </div> <script src = "js/jquery-2.1.1.min.js" type = "text/ javascript "> </script> <script src =" js/jquery. progressdots. js "> </script> <script src =" js/prism. js "> </script> <script> $ (document ). ready (function () {createSpots (1); $ ("# progressReset "). click (function (event) {event. preventDefault (); createSpots (1) ;}); function createSpots (num) {for (var I = 0; I <num; I ++) {options = {dotSize: random (10, 20) + "px", radius: random (1, 7) * 10 + "%"}; randomHtml = ""; if (Math. random () <0.5) {options. randomColors = true; randomHtml + = "\ n \ trandomColors:" + options. randomColors + ", // use random colors";} else {options. dotColor = randomColor (); randomHtml + = "\ n \ tdotColor: '" + options. dotColor + "', // set dot color (# HEX)";} if (Math. random () <0.3) {options. progress = true; options. percent = random (5,100); randomHtml + = "\ n \ tprogress: true, // enable progress"; randomHtml + = "\ n \ tpercent:" + options. percent + ", // set initial percentage";} else {options. numDots = random (3, 15); randomHtml + = "\ n \ tnumDots:" + options. numDots + ", // number of dots";} string = "$ ('# ssssbox '). dottify ({\ n \ tdotSize: '"+ options. dotSize + "', // set size of dot" + randomHtml + "\ n \ tradius:'" + options. radius + "'// set dot corner radius \ n});"; var $ container =$ ("<div class = 'swoopcontainer'> </div> "). data ("setupString", JSON. stringify (string); $ ("# progressHolder "). append ($ container. hide (); $ container. slideDown (function () {detail (this).css ({overflow: "hidden"}) ;}); $ container. click (function () {$ (". swoopContainer "). removeClass ("selected"); $ (this ). addClass ("selected"); $ ("# jsContents" ).html (JSON. parse ($ (this ). data ("setupString"); Prism. highlightAll () ;}); $ container. dotpipeline (options); $ ("# jsContents" pipeline .html (string); Prism. highlightAll () ;}$ (". swoopContainer "). removeClass ("selected"); $ (". swoopContainer "). last (). addClass ("selected");} function randomColor () {return '#' + Math. floor (Math. random () * 16777215 ). toString (16);} function random (min, max) {return Math. floor (Math. random () * (max-min) + min) ;}}); </script>