booster addons
creative elementor bundle
Purchase Now
Purchase Now
Purchase Now

Home - Widgets - Skill Bar

Skill Bar

Preview Widget
Preview Widget
Getting Started
Widget Styling

More Widgets

• Vertical Skill Bar
• Radial Progress
• Counter
• Countdown

# Getting started

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.

  • Skill Name & Value : Define your skill name and the value number that you want to use.
  • Layout Design :  Select from 4 available styles each with a different design.
  • Skill Name & Value Positions : Control the position for your skill name and value number.


Under the styling tab section, you will have the full control over the styling & design of all the skill bar elements and visual aspects.

  • Text Content Styling

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.

  • Container Styling

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.

  • Bar Styling

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.

Stripes Settings

-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.

Steps Settings

-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.

  • Value Settings

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.

Get Help From Professionals

Can't find what you are looking for?

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.

Open a Ticket
Open a Ticket


We are a group of talented WordPress developers & designers from Earth our main goal is to create great products & provide the best services to our customers.




Email :

WebSite : Certain Dev

Made with love from Earth!

Certain Dev | all rights reserved © 2020