The Statbar element is available across all three builders. The Content Builder, the Header Builder and the Footer Builder. The purpose of the element is to be used as a way to display statistical information in an engaging way.
Element Breakdown
The Statbar element is made up of many sub elements that work towards achieving its desired effect. The breakdown of how this markup works is as follows:
Available Controls
In this section we will walk through each control grouping and pay special attention to any unique controls or things of note.
Statbar
In the initial Statbar control grouping, the Setup box is notable for a few of its custom controls:
The Direction select control has four options, "Up," "Down," "Left," and "Right," which specifies the way the bar should expand when active. Below is a representation of how each of those settings would work in their respective order mentioned above:
Additionally, the Offset Trigger control is another custom control that is important to take note of as it determines how far down the screen a user should scroll when the bar becomes active and animates in. For example, if you set it to "90%," when the bar is 90% from the top of the screen in your browser window the bar will be triggered. If it was set to "10%," it would trigger when it was 10% from the top of the browser window. So keep in mind that larger percentages will trigger the active state sooner, while smaller numbers will take longer to get towards the top of the viewport.
After that, you will find the traditional controls for things such as basic setup, margin, padding, borders, shadows, et cetera.
Bar
For this section, the only custom control to take note of would be the Length control in the Bar Setup box at the beginning of the control grouping. This will determine how long the bar inside the outer wrapper should be. This is also where you can set the background color for this inner bar.
After that, you will find border radius and box shadow control to style this inner bar appropriately. For instance, you might wish to have the bar's border radius match the outer container's border radius, or be offset a bit if the container has a border. You can also use the box shadow control to create more depth.
Label
For the Label control grouping, the Label Setup box has a few controls for us to take note of, which allow us to configure our Statbar quite significantly:
First, we can choose to turn the label completely off if desired. This can be a great way to use the animated bar effect as a decorative flourish instead.
Next, we can choose to use Custom Text, which will replace the percentage of the bar length that shows up inside the label by default. Clicking this checkbox will reveal an input where you can place your custom label.
We can also select Always Show if we want the label to be always visible. By default, the label is hidden and it will fade in to match the bar animation when you scroll down the screen; however, you may wish for it to be present at all times. If that is the case, you can select this option to ensure that it doesn't animate in.
The next control is our Justify choose, which positions the label relative to the bar within the Statbar. The options here are Start, Center, and End. Below are some screenshots representing these settings:
Again, take note that the label is positioned relatively to the bar inside the Statbar Element, not the Statbar itself. Also, keep in mind that these positions will all be output a little differently depending on the base direction the Statbar is going in.
Beyond that, we have our Label Dimensions & Position box of controls:
This is where you can set a fixed width or height if desired for your label (for instance, if you have a bar that is 100px tall and you want the label to fill up the same space, you might give your label a 100px width and height). We can also use the Translate controls to offset our label a bit from it's position in the bar. For example, if you wanted to have your label appear to "float" just above the bar and be centered horizontally over the end of the bar, you could do 50% for Translate X Axis and -100% for Translate Y Axis, which would result in the following look:
Percentage values will always be relative to the size of the label since we're using translate, so that is why moving it 50% to the right centers it over the end of the bar. We can also use values such as px or em, and even mix with % values to get creative approaches. For example, we could set the label to the "Start" of the bar, and then offset it -0.5em on the X axis and -50% on the Y axis to create a slight offset look at the beginning of the bar. Pair this with turning on the "Always Visible" option and you have a way to create a cool offset label that is always positioned perfectly as it is relative to the size and position of the bar itself:
Play around with these values to see what you can come up with, there are tons of possibilities! After that, you will find the traditional controls for things such as padding, borders, shadows, text, et cetera.
