Radial Progress Indicator For Click-and-hold Actions – HoldCircleJS

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>