jQuery Horizontal and Vertical Progress Bar Plugin

Add-ons

2026-07-26 00:54 4 次浏览 • 0 次下载 2.6KB

Plugin description: A jQuery horizontal and vertical progress bar plugin. Supports speed control and increasing or decreasing progress. It can be simple or advanced, with fully customizable colors and dimensions. Easy to use, with comprehensive usage examples.

Usage

Reference

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

html

<!-- Horizontal progress bar -->
<div id="scheduleX"></div>
 
<!-- Vertical progress bar -->
<div id="scheduleY"></div>

Call the corresponding progress bar function.

/* Vertical progress bar */
scheduleY({
    fulfill: 55, // Selected value
    listAll: 100, // Total value
    speed: 25, // Animation speed, optional, default: 25. The smaller the value, the faster the animation.
    again: false, // Whether the animation starts from zero when the selected value changes. Default: true.
    bgColor: "#828282", // Bottom color
    listColor: "#5bcde7", // Progress bar color, default: light green
    scWidth: "25", //Progress bar width
    scHeight: "300" // Progress bar height
});

/* Horizontal progress bar */
scheduleX({
    fulfill: 60, // Selected value
    listAll: 100, // Total value
    speed: 25, // Animation speed, optional, default: 25. The smaller the value, the faster the animation.
    again: false, // Whether the animation starts from zero when the selected value changes. Default: true (starts from zero).
    bgColor: "#828282", // Bottom color
    listColor: "#ffa439", // Progress bar color, default: light green
    scWidth: "400", //Progress bar width
    scHeight: "25" // Progress bar height
});