Progress Bar

Overview

Add any number of progress bars in various predefined colors, either with or without icon, with or without description. Perfect if you want to display some progress or display a skill you or your company has mastered and how good you are at it.

BAR 1
0%
BAR 2
0%
BAR 3
0%

View more examples of Progress Bar.

Progress Bar Settings

  • Add/Edit
    • Progress Bars Title
    • Progress in %
    • Bar Color
    • Icon
  • Progress Bar Color
  • Progress Bar Animation
  • Progress Bar Style

Code Snippets

How to use the snippets?

NOTE: If the code snippets produce a different result on your site, it may be because the settings on your site are different or due to any customization already added to achieve a similar result. Please try removing your customization if any and feel free to change the values in the example codes to suit your design.

Shortcode 

[av_progress bar_styling='av-flat-bar' bar_animation='av-animated-bar' bar_styling_secondary='av-small-bar' show_percentage='av-show-bar-percentage' admin_preview_bg='' av_uid='av-75d2or']
[av_progress_bar title='BAR 1' progress='100' color='blue' icon_select='no' icon='43' font='entypo-fontello' av_uid='av-723nu3']
[av_progress_bar title='BAR 2' progress='91' color='blue' icon_select='no' icon='43' font='entypo-fontello' av_uid='av-onvzf']
[av_progress_bar title='BAR 3' progress='78' color='blue' icon_select='no' icon='43' font='entypo-fontello' av_uid='av-6offxf']
[av_progress_bar title='BAR 4' progress='23' color='blue' icon_select='no' icon='43' font='entypo-fontello' av_uid='av-njrjf']
[/av_progress]

Customization

Custom styled progress bar 2

We can change the way each progress bar looks by adding custom CSS

Skill
0%
Upload
0%
Progress
0%
/*----------------------------------------
// CSS - Social Share style - 2
//--------------------------------------*/
.avia-progress-bar-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

 .avia-progress-bar {
    margin: 0 50px;
}

#top  .progressbar-title-wrap {
    padding: 20px;
    margin-bottom: 20px;
    background: #333!important;
    width: 150px;
    height: 150px;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    flex-direction: row;
    text-align: center;
}

#top  .progress {
    max-height: 4px;
}


 .progressbar-percent {
    opacity: 1;
    float: none;
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 36px;
    line-height: 150px;
    font-weight: bolder;
    color: #fff;
    z-index: 999;
}


 .progressbar-title {
    font-weight: lighter!important;
}

 .progressbar-title,
 .progressbar-icon {
    top: 0;
    position: relative;
    transform: translateY(35px);
    color: #fdfdfd;
    letter-spacing: .05em;
    margin-top: -10px;
    text-transform: none;
}


#top .avia-progress-bar-container .avia-progress-bar {
    margin-top: 0;
}

#top .avia-progress-bar-container .avia-progress-bar:nth-child(1) .progressbar-title-wrap,
#top .avia-progress-bar-container .avia-progress-bar:nth-child(1) .bar {
    background: #0099e5!important;
}

#top .avia-progress-bar-container .avia-progress-bar:nth-child(2) .progressbar-title-wrap,
#top .avia-progress-bar-container .avia-progress-bar:nth-child(2) .bar {
    background: #ff4c4c!important;
}

#top .avia-progress-bar-container .avia-progress-bar:nth-child(3) .progressbar-title-wrap,
#top .avia-progress-bar-container .avia-progress-bar:nth-child(3) .bar {
    background: #34bf49!important;
}

Custom styled progress bar 1

We can change the way your progress bar looks by adding custom CSS

Skill
0%
Progress
0%
Upload
0%
/* --------------------
   Progress bar style 1
-----------------------*/

.avia-progress-bar-container {
    /*background: skyblue;*/
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 50px;
}


 .avia-progress-bar {
    margin: 0 50px;
}

#top  .progressbar-title-wrap {
    padding: 20px;
    margin-bottom: 12px;
    background: #333!important;
    width: 150px;
    height: 150px;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    flex-direction: column;
    text-align: center;
}

 .progressbar-char:before {
    font-size: 40px;
    color: #FFF;
}


 .progressbar-title {
    text-transform: none;
    color: #FFF;
}

 .progressbar-icon {
    margin-bottom: 10px;
}
 #top .avia-progress-bar-container .avia-progress-bar {
    margin-top: 0;
}

Custom Style

Progress bar styles can be selected from the progress bar option. To add custom style to your progress bar you can use the CSS below.

BAR 1
0%
BAR 2
0%
BAR 3
0%
/*----------------------------------------
// CSS - Progress bar custom
//--------------------------------------*/

	#top .avia-progress-bar div.progress .bar {
	background: #30E8BF;  /* fallback for old browsers */  /* Chrome 10-25, Safari 5.1-6 */
	background: -webkit-linear-gradient(right, #FF8235, #30E8BF);
	background: -o-linear-gradient(right, #FF8235, #30E8BF);
	background: linear-gradient(to left, #FF8235, #30E8BF); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
	animation:none;
	background-size: 100%!important;
	}

Replace % symbol with icon

The % symbol can be replaced with an icon of your choice that comes with enfold by using the below custom CSS.
To change the icon from tick to another change the icon unicode value in line  content:"e812";

BAR 1
0%
BAR 2
0%
BAR 3
0%

/*----------------------------------------
// CSS - Progress bar symbol
//--------------------------------------*/
.progressbar-percent {
	color:transparent;
	margin-right:10px;
}
.progressbar-percent span {
	color: #000!important;
}
.progressbar-percent span:after {
	content:"e812";
	color:#000;
	font-family: 'entypo-fontello';
	position: absolute;
	margin-left:5px;
}

Resource

Contributed video:

Progress Bar Tutorial