Author: | kombuchapunk |
---|---|
Views Total: | 158 views |
Official Page: | Go to website |
Last Update: | January 24, 2024 |
License: | MIT |
Preview:

Description:
HoldCircleJS is a tiny yet highly customizable progress bar JavaScript library that provides visual feedback for click-and-hold actions like buttons and other page elements.
As users press and hold, the radial progress indicator fills to completion and triggers a callback function when the progress is completed.
How to use it:
1. Install the HoldCircleJS with NPM.
# NPM $ npm install holdcirclejs
2. Import the HoldCircleJS into your project.
// As ES module import HoldCircle from 'holdcirclejs'; // Browser <script src="/dist/holdcircle.js"></script>
3. Add the data-holdcircle
attribute to the trigger element.
<button data-holdcircle> Press And Hold Me </button>
4. Initialize the HoldCircleJS on this trigger button. That’s it.
const myIndicator = new HoldCircle({ callback: function() { alert('Progress completed!'); } });
5. All possible options to configure the radial progress indicator.
const myIndicator = new HoldCircle({ // time to wait before starting the fill startDelay: 500, // time to complete the fill fillTime: 2000, // stroke/fill colors strokeColor: '#ff0000', fillColor: 'rgba(255, 0, 0, 0.5)', // stroke width strokeWidth: 8, // radius of the circle radius: 40, // true for entire page // false for elements with data-holdcircle attribute global: false, // CSS selector of the target trigger element elClass: 'custom-class', // ignore these CSS classes ignoreClass: ['ignore-me'], // text to display inside the indicator text: 'Loading', // text class textClass: 'text-style', // custom easing function easingFunction: (t) => t * (2 - t), // callback callback: function() { console.log('Completed!'); } });
6. You can also customize the stroke and fill colors of the progress indicator using HTML data
attributes.
<button data-holdcircle data-holdcircle-color="#0077b6" data-holdcircle-fill="rgba(0,119,182,0.25)"> Press And Hold Me </button>