Slider Progress Plugin, implemented entirely in native JavaScript (Original), supports multiple instances.
Last Updated: 2019/6/5 9:55:40 AM
Changelog:
1. Added mobile device support. You can view the results directly on mobile devices.
2. Optimized configuration
1 2 3 4 5 6 7 | drag: true, // Dragging is enabled by default. Set to false to disable it. Defaults to true if not configured. tip: false, The prompt can be disabled or configured as an object.tip: { trigger: 'show', // Always visible; 'hover': The tip is displayed when the mouse hovers over it. Defaults to 'show'. align: 'bottom' // Display position. Defaults to 'top'. Options: 'top,bottom,left,right'. }The tip displays progress as a percentage. Retrieving the value is not affected. |
3. Added pro.onLoad(boolean): true enables the Loading animation, false disables the Loading animation.
Release Date: 2019-06-04 23:09:35
jQuery Version URL:
The native version is lighter than the jQuery version and easier to use.
Usage
Include CSS:
1 | <link rel="stylesheet" href="css/progressJS.css" /> |
Include JS:
1 | <script src="js/progressJS.js"></script> |
html:
1 | <div class="progress"></div> |
You can customize the width and height of the progress bar. By default, its size adapts to the screen's viewport. You can also override the progress bar's color, dimensions, and other styles.
Note: If you modify the .ProgressLine .btn class, the border size and transform offset must remain consistent.
Added vertical styling with .vertical{}. Configure transform in the same way.
1 2 3 4 | .ProgressLine .btn{ border: 6px solid #fff; transform: translate(6px, -50%);} |
JavaScript Initialization:
1 | var pro = new Progress('.progress')// Pass the class, ID, or any selector recognized by document.querySelector() for initialization. |
Configuration Guide:
Configure the plugin according to your specific needs. Apart from getVal for retrieving the val value, you can leave the other options unconfigured.
1 2 3 4 5 6 7 8 9 10 11 | new Progress('.progress'， { val: 10， size: 4, precision: 2, drag: 'on', direction: 'horizontal', tip: 'on', getVal: function(res) { console.log(res) }}) |
Detailed Description:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | val: 0 // Initial value. Range: 0-100, Type: numbersize: 4 // Default control size is 10. You can customize the style using CSS.precision: 2,// Precision configuration for val. Defaults to 0 decimal places, with a maximum of 4 decimal places.drag: 'on',// Dragging is enabled by default. Set to 'off' to disable it. Defaults to 'on' if not configured.direction: 'horizontal', // Direction: horizontal by default; vertical for vertical orientation.tip:'on'// Enable the tip. Defaults to 'off' (disabled). You can also configure it with an object.tip: { trigger: 'show', // Display mode: 'show': Always visible; 'hover': The tip appears when the mouse hovers over it. Defaults to 'show'. align: 'bottom'// Display position. Defaults to 'top'. Options: 'top,bottom,left,right'. }getVal: function(res){ console.log(res)}// Callback method for retrieving val |
For video progress bars, val needs to be updated dynamically. We also provide a method for this purpose.
1 2 | var pro = new Progress()pro.updateVal(val) |
You can also use: pro.updateVal(val) Reset the initial value
1 2 3 4 5 6 7 8 9 10 | // Simulate audio/video timeline updatesvar i = 0， timeIDtimeID = setInterval(function() { i += 0.1 pro.updateVal(i) console.log(pro.val) if (i >= 100) { clearInterval(timeID) }}, 15) |
The above covers the current plugin configuration. More features will be added in future updates.
TIP: This plugin is implemented using object-oriented programming and is ideal for beginners who want to learn.
If you have any questions, contact the author via QQ: 1194891819