Animated Bars

Demo: https://demo.wocode.com/animated-bars

Tutorial Video

Setup

WIDGET PLACEMENT

• Place the Animated Bars widget on your page.
• Position the widget where you would like the bars to be seen.
• You may resize the widget by using the blue grab handle on the bottom right corner.

WIDGET OPTIONS (CONTENT)

• Unique ID: If you’re using more than one instance of the widget on your page, be sure to set unique ID’s for each widget.
• Bars: This section shows a list of all the bars. You will click on individual bars in the list to edit.
• When you click on an individual bar, you will see an additional window open with a new set of parameters:
• Bar Label: This is the text label for the particular bar. The label may appear inside the bar, or outside. You can set the label position elsewhere in the widget options.
• Percentage: This parameter gives you control of the length of the bar. Numbers between 1 and 100 are valid.
• End Label: This text label is applied to the end of the bar, and is most applicable as a number i.e. “50%”. Note that the label does not technically have to match the actual percentage used.
• Striped Bars: This option creates small stripes on the bar, using a second color. You may use this option to call attention to a particular bar.
• Bar Color: Set the color of the bar or the stripes. Note that you must use a hex value here. A web-based color picker may be useful here.
• You can add additional bars with the Add Bar text button, or remove bars by clicking on the “x” on the righthand side.
• Enable Animation: This setting enables the animation. Untoggling this causes the bars to display with no animation.
• Animation Duration: Sets the time to complete the animation.
• Animation Delay: Sets a delay before the bars animate. This is a useful feature if there are images on your page, or if your Animated Bars uses an image in the background of the row. The Animation Bars will load quickly, and may be loaded and animated prior to an image loading if no delay is used.
• Easing Style: This sets the easing for the animation

WIDGET OPTIONS (DESIGN)

The Design section of the widget options contains an extensive set of styling options, which are labeled with their function. Since the option label describes its purpose, options will not be discussed further here, with the exception of a few settings that may require additional explanation:

• Bar Background Color: This color setting applies a color to the background of the bars. This color setting is applied as the background for all bars. A transparent background may be used.
• Label Position: There are two label positions: Inside Bar and Outside Bar. Inside Bar places the label inside the bar. Outside Bar places the label outside of the bar, to the left. Note that the left edges of the bars will be aligned equally, and the label text will be right-aligned with the bars. This may cause the label text to begin at different positions if the label text differs in length.
• Label [Left] Margin: This sets space between the left edge of the bar, and the beginning of the label text.
• The remaining Design options control the styling of the label text, as well as spacing.