The Elastic Skill Bars widget offers a unique way to show a skill, proficiency or progress. Extensive customization options ensure this animated feature can be displayed to match your site and brand. on your site, this may be just the ticket. Take a look at our live preview to see all eleven transition styles in action.
Compatibility: Muse 2018.1
Current Version: 1.0
Supported Devices: Desktop, Tablet, Phone
Release Log
1.0: Initial Release
Setup
WIDGET PLACEMENT IN MUSE
Drop the Elastic Skill Bars widget onto your page.
Place the widget where you would like the skill bars to appear on your page. The width of the widget container represents the size of the bars on the previewed/published page.
By default, the Resize setting for the widget is set to responsive width. This will allow the widget to automatically resize appropriately for the screen or browser width. To change this, use the Resize dropdown menu in the Muse top menu.
WIDGET OPTIONS
Auto-Close Progress Bars: This option closes the bars when they're out of the viewport. For example: after you've scrolled further down the page and the bars are out of view. When you scroll back to the bars, they will re-animated when this option is enabled.
Approximate Animation Duration: This controls the time it takes to complete the animation. This cannot be calculated to the millisecond, so it is approximate. It is suggested when adjusting this, that you preview in browser and adjust accordingly.
PROGRESS BAR SECTIONS
There are 6 progress bar sections. Each progress bar's settings are independent of the others and the options are extensive. The majority of the options are self-explanatory, and are labeled with their exact function. However, we will explain some options that may be less obvious.
Progress: This sets how far the label moves down the bar.
100% Complete Text: This is the label on the slider. Keep in mind that this is text only. The Progress setting above sets the actual percentage of travel. So you want to make sure that these two settings match.
Animation Delay: This sets a delay before the animation begins. This is useful if you don't want all of your progress bars to animate at the exact same time. The best way to use this is to use no delay for bar one, then create an increasing delay for subsequent bars. For example, in our demo, we use no delay on bar one, then 250ms for bar 2, 500ms bar 3, and 750ms for bar 4. This staggers the start time nicely.
Bar Inset: This sets the height of the bar inset. The inset is an inner area of the bar that has a separate color, inherited from the Foreground Color and Background Color settings further above. Note that this option is generally only applicable when you use significant bar height settings that result in a thick bar. In general, this will work best if bar height is around 8px or greater.
Bar Stretch: The amount the bar stretches up and down when it animates.
Bar Bleed Top/Bottom/Left/Right: These settings set the bleed area for the top, bottom, left and right of the animated bars. The reason for these settings is to counteract any potential clipping that may occur. You will know you have clipping if you see anything cut off, like a label or animation. In most cases, the default settings will be appropriate. More extreme animation settings (Bar Stretch values) may require increased bleed settings if clipping is observed.
The remaining settings are labeled with their exact purpose, and should be self-explanatory.