jQuery Gradient Progress Bar Plugin

Add-ons

2026-07-26 01:06 3 次浏览 • 0 次下载 2.0KB

Plugin Description: Supports progress bars with gradient colors and rounded ends.

Last Updated: 2019-09-25 22:27:16

Changelog:Added a progress bar display animation with a dynamic loading effect.

$('#progress-container2').initData({
    height: 6,
    percent: 80,
    isAuto: true   // Add animation effect. Set to true to display the animation.
})
mAutoPlay($('#progress-container'), mPercent, { height: 10 }) // Dynamic loading method
/*
 * @params (mAutoPlay parameter descriptions, from left to right)
 * el: DOM element on which to run the automatic animation
 * percent: Current progress (dynamically updated)
 * m_obj: Progress bar height and background color parameters. Example: {height: 10, bgStartColor: '#feea4d', bgEndColor: '#ff3d00'}
*/

Last Updated: 2019-09-23 21:58:45

Usage

Include the progress.js and progress.css files.

Then add a div tag where the progress bar should appear and call the initData() initialization method. See the example included in the plugin:

css

.content{
    width: 800px;
    margin: 50px auto;
}
.content>div{
    margin-top: 50px;
}

html

<div >
    <div id="progress-container"></div>
    <div id="progress-container1"></div>
    <div id="progress-container2"></div>
    <div id="progress-container3"></div>
</div>

$('#progress-container').initData({
    height: 10,
    percent: 50
})