Show the progress of your work graphically via animated bars or depict the progress of any on going process using them. Style your progress bar with the help of these available options.
Just like any other JD Builder element this also has 2 main tabs General & Bar Styling under one main tab that is the General tab.
Under General tab we have the following options:
- Add Bar- Click on add items and create your animated bars by adding Title & Percentage values on each of the items.
Under Bar Styling tab we have these options:
- Type- Choose your bar type either Default style or global colors style.
- Bar Height- Set the height of the bar by sliding over the values, by default it is 20px.
- Space Between- Adjust the space between each of the bars added.
- Striped- Choose whether you want to show the stripped effect or not.
- Animated Striped- Once you have enabled the stripped effect then allow it to show its stripped animation.
- Display Title- Enable/ Disable the text title.
- Display Percentage- Enable/ Disable the text percentage.
- Position of title & percentage- If either title or percentage is enabled set its position, inside or outside the bars.
- Bar Color- Customize your animated bars by choosing its colors with the help of a color picker.
- Text color(title & percentage)- Change the title & percentage text color with the help of this color picker field.
- Typography(title & percentage)- Style the title & percentage text to different fonts & font sizes with this typography field.
- Border Radius- Increase the bar’s border radius to make it look attractive.
- Border Type- Style the bars by adding borders from the ones listed.
- Bar Shadow- You can also add the bar shadow to make it more appealing.