Crclrrr

Creates an SVG circular progress indicator inside the element matching a container element.

While loading it adds the loading class to the element.

Install

npm install crclrrr

Example Setup

Javascript

import Crclrrr from 'crclrrr';

const element = document.querySelector('.element');

// create an instance passing options (defaults)
const crclrrr = new Crclrrr(element, {
  size: 40,
  border: 3,
  round: true,
  bg: 'ghostwhite',
  progress: 'lightgreen',
  duration: 1500,
  baseClass: 'crclrrr',
  initial: 0,
  easing: t => t,
});

// Set the value
crclrrr.value = 23; // from 0 to 100

// Reset the value
crclrrr.reset(); // resets to the initial value
crclrrr.reset(40); // resets to the specified value

// Destroy the instance
crclrrr.destroy()); // removes the SVG element

// Listen for the complete event on the instance.
// This event is fired when the animation has finished.
// When reaching the minimun/maximum, only the complete
// event is fired.
crclrrr.on('animated', function(instance) {});

// Listen for the complete event on the instance.
// This event is fired when either the minimum (0) or the
// maximum (100) is reached, depeding on the direction.
crclrrr.on('complete', function(instance) {});

License

MIT License