fluid-meter v1.1.2

Fluid Meter

Dependency free library to represent progress as the amount of fluid in a container.

Demo

https://aarcoraci.github.io/fluid-meter/

Installation

npm i fluid-meter

Usage

The library is higlhly customizable but it can be easily initialized. It requires a DOM container with a setted width and height (inline or css).

<div id="target" style="width:500px;height:500px"></div>

import { CircularFluidMeter } from 'fluid-meter';

const target = document.querySelector('#target');
new CircularFluidMeter(target, {
  initialProgress: 33
});

Bundled version

A new bundled version has been added. It can be accessed via the IIFE on the global scope.

1 - Add the bundle file to your project (can be found as bundle.js in the /dist directory):

<!-- make sure the path is correct -->
<script src="dist/bundle.js"></script>

2 - Access via the IIFE on the global scope (named cfmModule):

const target = document.querySelector("#target");
new cfmModule.CircularFluidMeter(target, {
  initialProgress: 33,
});

Responsiveness

The library is prepared to work on a responsive scenario if needed via the BreakpointValueConfig:

const config = {
  initialProgress: 75,
  borderWidth: [
    {
      resolution: 0,
      value: 15
    },
    {
      resolution: 1024,
      value: 60
    }
  ],
  fontSize: [
    {
      resolution: 0,
      value: 25
    },
    {
      resolution: 768,
      value: 50
    }
  ]
};

See the supported responsive values on the Configuration table

Configuration

Here are some examples on how to use it. It's with typescript but should be the same with plain javascript. https://github.com/aarcoraci/fluid-meter/blob/main/src/main.ts

API and Methods

Example:

import { CircularFluidMeter } from 'fluid-meter';

const target = document.querySelector('#target');
const m = new CircularFluidMeter(target, {
  initialProgress: 50
});

m.targetProgress = 50;
m.dropShadow = false;
m.use3D = false;

List of setters and getters

Performance

If yo are using the library on a context where you will be adding it or removing it dynamically you should call dispose when removing it to correctly clear the animation:

meter.dispose();