Liquid Fill Gauge – Visual Composer Ready

Create Beautifully Animated Gauges

Liquid Fill Gauge is a gauge plugin to create beautifully animated gauges or progress bars with a circular, flat design. You can insert a gauge in your post or page with a simple shortcode and you can insert multiple gauges on the same page. A set of 23 optional shortcode attributes is available to further customize each gauge.

The plugin uses the D3 javascript library to render each gauge as a seperate SVG (Scalable Vector Graphics) element. Check out our plugin page to see a few live animated examples!

Full documentation is also available on

Integrated with Visual Composer

Liquid Fill Gauge can be used as a stand-alone plugin, but is also integrated with Visual Composer.


  • Fully integrated with Visual Composer
  • Highly customizable with 23 shortcode attributes
  • Animated
  • Based on D3.js and SVG (Scalable Vector Graphics)
  • Easy shortcode usage
  • Cross browser compatible
  • Support available


Highly customizable

A set of 24 attributes are available to fully customize your gauge to your own liking (default values between brackets):

  • value (50): The current value of the gauge.
  • width (200px): The width of the gauge.
  • height (200px): The height of the gauge.
  • minvalue (0): The gauge minimum value.
  • maxvalue (100): The gauge maximum value.
  • circlethickness (0.05): The outer circle thickness as a percentage of it’s radius.
  • circlefillgap (0.05): The size of the gap between the outer circle and wave circle as a percentage of the outer circles radius.
  • circlecolor (#178BCA): The color of the outer circle.
  • waveheight (0.05): The wave height as a percentage of the radius of the wave circle.
  • wavecount (1): The number of full waves per width of the wave circle.
  • waverisetime (1000): The amount of time in milliseconds for the wave to rise from 0 to it’s final height.
  • waveanimatetime (1000): The amount of time in milliseconds for a full wave to enter the wave circle.
  • waverise (true): Control if the wave should rise from 0 to it’s full height, or start at it’s full height.
  • waveheightscaling (true): Controls wave size scaling at low and high fill percentages. When true, wave height reaches it’s maximum at 50% fill, and minimum at 0% and 100% fill. This helps to prevent the wave from making the wave circle from appear totally full or empty when near it’s minimum or maximum fill.
  • waveanimate (true): Controls if the wave scrolls or is static.
  • wavecolor (#178BCA): The color of the fill wave.
  • waveoffset (0): The amount to initially offset the wave. 0 = no offset. 1 = offset of one full wave.
  • textvertposition (0.5): The height at which to display the percentage text withing the wave circle. 0 = bottom, 1 = top.
  • textsize (1): The relative height of the text to display in the wave circle. 1 = 50%
  • valuecountup (true): If true, the displayed value counts up from 0 to it’s final value upon loading. If false, the final value is displayed.
  • displaypercent (true): If true, a % symbol is displayed after the value.
  • textcolor (#045681): The color of the value text when the wave does not overlap it.
  • wavetextcolor (#A4DBf8): The color of the value text when the wave overlaps it.


Easy, visual editing (GUI)

When using Liquid Fill Gauge in combination with Visual Composer’s front end editor, you can easily edit all 23 shortcode attributes. A live preview of your gauge will update automatically when you change any attributes.