The skill bar widget is a great tool to display the level of proficiency in a skill by using percentages and a horizontal 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 skill bar elements and visual aspects.
Customize the text properties for the name text.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 of both solid and gradient colors.
-Shadows : Apply shadows for your text with having full control over the shadow color and blur effect.
Change the container settings and style.
- : Change the container height to match your needs.This will also affect the horizontal bar width.
-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.
This is where you will alternate the horizontal bar style.You can change the colors, animation settings , and enable custom designs.
-Background : Customize the background color for the horizontal 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.
-Enable Stripes : You can enable the stripes features to add even more style to the horizontal bar.
-Move Stripes : Enable move stripes to change the stripes idle state to a moving animation.
-Enable Steps : Enable steps will equally divide the horizontal bar into the given number of steps.This gives extra style to your vertical bar.
-Steps Number : Set the number of steps that you want to use.aha
-Steps Color & Width : Customize the steps color and control the width to change their size.
Customize the value text font, color, and positioning.
-Value Color & Font Size : Change the text color and font size.
-Value Background : Change the background color for the value container.
-Bubble Padding & Radius : Control the padding and radius for the value text container.
-Bubble Alignment : Align the bubble next to the end of the horizontal bar.The options available here are left, right, and center.
If you can't find what you are looking for any our documentation website, please feel free to open a support ticket & get help from our support team.