Liquid Fill Gauge - Visible Composer In A Position

Create Superbly Lively Gauges

Liquid Fill Gauge is a gauge plugin to create beautifully lively gauges or progress bars with a round, flat design. you'll insert a gauge on your put up or page with an effortless shortcode and also you can insert a couple of gauges on the comparable web page. a suite of 23 not obligatory shortcode attributes is accessible to further customise each and every gauge.



The plugin makes use of the D3 javascript library to render each gauge as a seperate SVG (Scalable Vector Photos) part. Check Out our plugin page to see a couple of reside animated examples!

Full documentation is also available on Reportvalue.com.

Integrated with Visual Composer

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

Features

• Absolutely integrated with Visible Composer
• Highly customizable with 23 shortcode attributes
• Animated
• Based On D3.js and SVG (Scalable Vector Photos)
• Simple shortcode utilization
• Go browser appropriate
• Fortify to be had

Highly customizable

a suite of 24 attributes are available to completely customise your gauge to your own liking (default values among brackets):

• value (50): The Current worth of the gauge.
• width (200px): The width of the gauge.
• top (200px): the peak of the gauge.
• minvalue (0): The gauge minimum price.
• maxvalue (ONE HUNDRED): The gauge most worth.
• circlethickness (0.05): The outer circle thickness as a share of it’s radius.
• circlefillgap (ZERO.05): the scale of the space 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 peak as a share of the radius of the wave circle.
• wavecount (1): The collection of complete waves in line with width of the wave circle.
• waverisetime (ONE THOUSAND): The Quantity of time in milliseconds for the wave to upward push from ZERO to it’s final top.
• waveanimatetime (A THOUSAND): The Volume of time in milliseconds for a full wave to go into the wave circle.
• waverise (real): Keep An Eye On if the wave will have to upward push from ZERO to it’s full height, or start at it’s complete peak.
• waveheightscaling (precise): Controls wave dimension scaling at low and prime fill chances. While precise, wave height reaches it’s most at 50% fill, and minimal at 0% and ONE HUNDRED% fill. This is helping to forestall the wave from making the wave circle from seem completely complete or empty whilst near it’s minimum or maximum fill.
• waveanimate (actual): Controls if the wave scrolls or is static.
• wavecolor (#178BCA): the colour of the fill wave.
• waveoffset (0): The Quantity to to begin with offset the wave. 0 = no offset. 1 = offset of 1 complete wave.
• textvertposition (ZERO.5): the height at which to show the proportion text withing the wave circle. ZERO = bottom, 1 = best.
• textsize (1): The relative top of the textual content to display in the wave circle. 1 = 50%
• valuecountup (real): If actual, the displayed price counts up from 0 to it’s final price upon loading. If false, the overall worth is displayed.
• displaypercent (real): If true, a % image is displayed after the price.
• textcolor (#045681): the color of the price textual content whilst the wave does not overlap it.
• wavetextcolor (#A4DBf8): the color of the worth textual content while the wave overlaps it.

Easy, visual enhancing (GUI)

While the usage of Liquid Fill Gauge together with Visible Composer’s entrance end editor, you'll be able to simply edit all 23 shortcode attributes. A are living preview of your gauge will replace mechanically when you change any attributes.


FULL DOWNLOAD