Package Exports

holdcirclejs
holdcirclejs/dist/holdcircle.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (holdcirclejs) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

HoldCircleJS

HoldCircleJS is a lightweight, vanilla JavaScript library designed to create interactive radial progress indicators. Inspired by the bold and raw aesthetic of Neobrutalism, HoldCircleJS offers a unique and engaging way to display progress for user actions like click-and-hold.

Features

Customizable start delay and fill time
Adjustable stroke color and width
Configurable radius size
Callback function support
Option to activate on specific elements or the entire page
Data attributes for element-specific customization

Installation

Install HoldCircleJS using npm:

npm install holdcirclejs

Usage

Import HoldCircleJS and initialize it with desired options:

import HoldCircle from 'holdcirclejs';

const holdCircle = new HoldCircle({
    startDelay: 500, // Delay before starting the fill (milliseconds)
    fillTime: 2000, // Time to complete the fill (milliseconds)
    strokeColor: '#ff0000', // Color of the stroke
    fillColor: 'rgba(255, 0, 0, 0.5)', // Fill color inside the circle (optional)
    strokeWidth: 8, // Width of the stroke (pixels)
    radius: 40, // Radius of the circle (pixels)
    global: false, // True for entire page, false for elements with data-holdcircle attribute
    elClass: 'custom-class', // Class name to target specific elements (optional)
    ignoreClass: ['ignore-me'], // Array of class names to ignore (optional)
    text: 'Loading', // Text to display inside the circle (optional)
    textClass: 'text-style', // Class name for text styling (optional)
    easingFunction: (t) => t * (2 - t), // Custom easing function (optional)
    callback: function() { console.log('Completed!'); } // Callback function to execute when the fill is complete
});

Advanced example

    <!-- Button 1 - Alert callback -->
    <button class="nb-button green rounded hold-circle-alert" data-holdcircle data-holdcircle-color="#40d39c" data-holdcircle-fill="rgba(0,0,0,0)">Hold me to see what I do</button>
    
    <!-- Button 2: Modal callback -->
    <button class="nb-button sky-blue rounded hold-circle-modal" data-holdcircle data-holdcircle-color="#0077b6" data-holdcircle-fill="rgba(0,119,182,0.25)">Hold me to see what I do</button>

    <!-- Example 3: GLOBAL with custom color -->
    <button class="nb-button pale-red rounded" data-holdcircle data-holdcircle-color="#ff5733">Hold me</button>

    <script>
        const addToClipboard = () => {
            navigator.clipboard.writeText("I love HoldCircleJS! :)");
        }

        const openModal = () => {
            addToClipboard();
            document.querySelector('#modal').checked = true;
        }

        const showAlert = () => {
            document.querySelector('.alert.fixed-bottom').classList.add('show');
            setTimeout(() => {
                document.querySelector('.alert.fixed-bottom').classList.remove('show');
            }, 3000)
        }

        // HoldCircle with a callback
        const holdCircleModal = new HoldCircle({
            startDelay: 500,
            fillTime: 750,
            strokeColor: '#ff0000',
            fillColor: 'rgba(255, 0, 0, 0.1)',
            strokeWidth: 6,
            radius: 32,
            elClass: "hold-circle-modal",
            global: false, 
            easingFunction: (t) => t * (2 - t), // Example ease-out quadratic
            callback: openModal
        });

        // HoldCircle with another callback
        const holdCircleAlert = new HoldCircle({
            startDelay: 500,
            fillTime: 750,
            strokeColor: '#ff0000',
            fillColor: 'rgba(255, 0, 0, 0.1)',
            strokeWidth: 6,
            radius: 32,
            elClass: "hold-circle-alert",
            global: false, 
            easingFunction: (t) => t * (2 - t), // Example ease-out quadratic
            callback: showAlert
        });

        // Global HoldCircle with ignores
        const holdCircleGlobal = new HoldCircle({
            startDelay: 500,
            fillTime: 750,
            strokeColor: '#fdfd96',
            fillColor: '#ffc5c8',
            strokeWidth: 10,
            radius: 50,
            global: true, 
            ignoreClass: ["hold-circle-alert", "hold-circle-modal"], // Make sure to ignore the classes attached to the other HoldCircle instances to avoid multiple HoldCircle instances appear at once
            text: ":)",
            easingFunction: (t) => t * (2 - t), // Example ease-out quadratic
        });
    </script>

Configuration Options

HoldCircleJS can be customized with the following options:

startDelay (number): Time in milliseconds before starting the fill (default: 500) fillTime (number): Time in milliseconds to complete the fill (default: 2000) strokeColor (string): HEX color of the stroke (default: '#00ff00') strokeWidth (number): Width of the stroke in pixels (default: 5) radius (number): Radius of the circle in pixels (default: 30) callback (function): Function to be called when the progress completes

Element-Specific Customization

Use data-holdcircle-color and data-holdcircle-fill attributes on HTML elements to customize the stroke and fill colors:

<button data-holdcircle data-holdcircle-color="#40d39c" data-holdcircle-fill="rgba(0,0,0,0)">Click me</button>

License

HoldCircleJS is MIT licensed.