Create Superbly Animated Gauges
Liquid Fill Gauge is a gauge plugin to create fantastically animated gauges or progress bars with a round, flat design. You possibly can insert a gauge in your put up or web page with a easy shortcode and you may insert a number of gauges on the identical web page. A set of 23 non-compulsory shortcode attributes is out there to additional customise every gauge.
Full documentation can also be obtainable on Reportvalue.com.
Built-in with Visible Composer
Liquid Fill Gauge can be utilized as a stand-alone plugin, however can also be built-in with Visible Composer.
- Absolutely built-in with Visible Composer
- Extremely customizable with 23 shortcode attributes
- Primarily based on D3.js and SVG (Scalable Vector Graphics)
- Simple shortcode utilization
- Cross browser suitable
- Assist obtainable
A set of 24 attributes can be found to completely customise your gauge to your individual liking (default values between brackets):
- worth (50): The present worth of the gauge.
- width (200px): The width of the gauge.
- top (200px): The peak of the gauge.
- minvalue (zero): The gauge minimal worth.
- maxvalue (100): The gauge most worth.
- circlethickness (zero.05): The outer circle thickness as a share of it’s radius.
- circlefillgap (zero.05): The scale of the hole between the outer circle and wave circle as a share of the outer circles radius.
- circlecolor (#178BCA): The colour of the outer circle.
- waveheight (zero.05): The wave top as a share of the radius of the wave circle.
- wavecount (1): The variety of full waves per width of the wave circle.
- waverisetime (1000): The period of time in milliseconds for the wave to rise from zero to it’s closing top.
- waveanimatetime (1000): The period of time in milliseconds for a full wave to enter the wave circle.
- waverise (true): Management if the wave ought to rise from zero to it’s full top, or begin at it’s full top.
- waveheightscaling (true): Controls wave dimension scaling at high and low fill percentages. When true, wave top reaches it’s most at 50% fill, and minimal at zero% and 100% fill. This helps to forestall the wave from making the wave circle from seem completely full or empty when close to it’s minimal or most fill.
- waveanimate (true): Controls if the wave scrolls or is static.
- wavecolor (#178BCA): The colour of the fill wave.
- waveoffset (zero): The quantity to initially offset the wave. zero = no offset. 1 = offset of 1 full wave.
- textvertposition (zero.5): The peak at which to show the proportion textual content withing the wave circle. zero = backside, 1 = high.
- textsize (1): The relative top of the textual content to show within the wave circle. 1 = 50%
- valuecountup (true): If true, the displayed worth counts up from zero to it’s closing worth upon loading. If false, the ultimate worth is displayed.
- displaypercent (true): If true, a % image is displayed after the worth.
- textcolor (#045681): The colour of the worth textual content when the wave doesn’t overlap it.
- wavetextcolor (#A4DBf8): The colour of the worth textual content when the wave overlaps it.
Simple, visible enhancing (GUI)
When utilizing Liquid Fill Gauge together with Visible Composer’s entrance finish editor, you’ll be able to simply edit all 23 shortcode attributes. A reside preview of your gauge will replace mechanically once you change any attributes.