Liquid Progress Indicator With JavaScript And Canvas – fluid-meter.js

Preview:

Description:

fluid-meter.js is a JavaScript library to create a circular progress indicator with a fluid/water-like effect using Canvas API.

How to use it:

1. Download and import the js-fluid-meter.js script into the document.

<script src="./js/js-fluid-meter.js"></script>

2. Create a container to hold the liquid progress indicator.

<div id="fluid-meter"></div>

3. Create a new liquid progress indicator on the webpage.

var fm = new FluidMeter();
fm.init({
  targetContainer: document.getElementById("fluid-meter"),
  fillPercentage: 15 // 15%
});

4. Available parameters to config the liquid progress indicator.

var fm = new FluidMeter();
fm.init({
  targetContainer: document.getElementById("fluid-meter"),
  fillPercentage: 15,
  options: {
    fontSize: "70px",
    fontFamily: "Arial",
    fontFillStyle: "white",
    drawShadow: true,
    drawText: true,
    drawPercentageSign: true,
    drawBubbles: true,
    size: 300,
    borderWidth: 25,
    backgroundColor: "#e2e2e2",
    foregroundColor: "#fafafa",
    foregroundFluidLayer: {
      fillStyle: "purple",
      angularSpeed: 100,
      maxAmplitude: 12,
      frequency: 30,
      horizontalSpeed: -150
    },
    backgroundFluidLayer: {
      fillStyle: "pink",
      angularSpeed: 100,
      maxAmplitude: 9,
      frequency: 30,
      horizontalSpeed: 150
    }
  }
});

5. Update the percentage of the liquid progress indicator.

fm.setPercentage(percentage);