Home > Web Front-end > JS Tutorial > How to implement jQuery progress bar effect

How to implement jQuery progress bar effect

清浅
Release: 2019-01-11 16:38:32
Original
5079 people have browsed it

The jQuery progress bar effect can be easily realized through the jQMeter.js plug-in, and its style can be customized

How to implement jQuery progress bar effect

##[Recommended Course: jQuery Tutorial

To achieve the jQuery progress bar effect, you need to introduce an external jQuery plug-in jQMeter.js. It is a simple and practical lightweight progress bar plug-in. We can easily put it into it to implement a horizontal or vertical progress bar with animated effects


Progress bar implementation process:

(1) External introduction jqmeter.js file

Download address:

http://www.gerardolarios.com/plugins-and-tools/jqmeter/

<script src="jqmeter.min.js"></script>
<script src="./jquery/jquery-2.2.4.js"></script>
Copy after login

(2) Create a div element in html

<div id="jqmeter-container"></div>
Copy after login

(3) The complete code

 $(function(){
       	$("#jqmeter-container").jQMeter({
       		goal:&#39;1000&#39;,
       		raised:&#39;600&#39;,
       		width:&#39;450px&#39;,
       		height:&#39;50px&#39;,
       		animationSpeed:2000,
       		counterSpeed:3000,
       		bgColor:&#39;#BA3AB5&#39;,
       	});
       })
Copy after login

The rendering is as follows:

How to implement jQuery progress bar effect

##jqmeter. Parameters in js file

ParametergoalraisedwidthheightbgColorbarColororientationdisplayTotalanimationSpeedcounterSpeed
Type Default value Description
#string No default value, required parameter The total length of the progress bar. Can be set to a string, such as "$9000", or an integer, such as: "9000"
string No default value, required Fill in the current progress of the parameter progress bar. Can be set to a string, such as "$5000", or an integer, such as: "5000"
string 100%-horizontal width . (Must be set in horizontal progress bar) Set the horizontal width of the progress bar. Can be set as a percentage or pixel value
string 50px. (Must be set in vertical progress bar) Set the vertical height of the progress bar. Can be set to a percentage or pixel value
string #444 The background color of the progress bar. Supports hex, rgba and color keywords.
string #bfd255 The color of the progress bar. Supports hex, rgba and color keywords.
string horizontal The direction of the progress bar can be set to: 'horizontal' or 'vertical'. If set to a vertical progress bar, this parameter must be set.
boolean true Whether to display the completion percentage of the progress bar.
integer 2000 Progress bar animation time, in milliseconds
integer 2000 The time the progress bar counts, in milliseconds

The above is the detailed content of How to implement jQuery progress bar effect. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template