The vertical skill bar widget is a great tool to display the level of proficiency in a skill by using percentages and a vertical bar.Choose from different styles, layouts, animations, and style everything from the colors to the bar design.
Here are the options available.
In the content section, you can define your skill name and value but also choose a layout and alternate the elements positioning.
Under the styling tab section, you will have the full control over the styling & design of all the vertical skill bar elements and visual aspects.
Customize the text properties for the name text and percent value.Choose a font style from a great number of font families and change the font size, letter spacing...
-Colors : Customize the color of your text with the possible use gradient colors for the skill name.
-Shadows : Apply shadows for your name text with having full control over the shadow color and blur effect.
Change the container settings and style.
- : Change the container height & width to match your needs.This will also affect the vertical bar size.
-Background : Customize the container's background & choose to apply either a solid background color or a gradient color.
-Borders & Shadows : Control border width and style and apply custom box shadow for the container.Note that you can also alternate the border radius to change the container shape.
-Skill Name Margins : Change the skill name margins values to control the space between this element and the vertical skill bar.
This is where you will alternate the vertical bar style.You can change the colors, animation settings , and enable custom designs.
-Background : Customize the background color for the vertical bar.Gradient colors can also be used for this background.
-Duration : Control the animation duration.The higher this number is, the more time it will take for the the animation to complete.The lower this number is, the faster the animation speed will be.
-Animation Delay : Set up the animation delay.This essentially means after how many seconds you want the animation to start.
-Animation Timing : This is where you can change the behavior of the animation.For example, if you want the animation to be slower at the start or faster at the end.Choose from the different options available.
Stripes Settings​
-Enable Stripes : You can enable the stripes features to add even more style to the vertical bar.
-Move Stripes : Enable move stripes to change the stripes idle state to a moving animation.