Create Beautifully Animated GaugesLiquid 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.
Full documentation is also available on Reportvalue.com.
Integrated with Visual ComposerLiquid 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
- Based on D3.js and SVG (Scalable Vector Graphics)
- Easy shortcode usage
- Cross browser compatible
- Support available
Highly customizableA 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.