Progress or skill bars are set of simple or animated bars generally used to showcase data with horizontal bars. Progress bars are useful in many scenarios like:
- Showing your skills on a about me page
- Showcasing your team member’s skills
- Comparing set of attributes, for example comparing all free site builder tools on a 100% scale
In this article we will explain how to add progress or skill bar in Weebly site with jQuery animation on loading. Check out this article, if you want to add circled pie progress chart in WEebly.
Adding jQuery Animated Progress Bar
The progress bar will look like below. It is created with CSS and jQuery which will be animated to the specified percentage automatically when the page is loaded.
It has three main components:
- A title with fixed background color controlled in CSS
- Progress bar animation controlled in jQuery with the width defined in HTML
- Percentage text controlled in HTML
Note: It is recommended to place widget on top of the page so that the animation is visible to users.
CSS for jQuery Animated Progress Bar
Add the below CSS under “Header Code” section of the page or at site level. You can also add the code in “main.less” file without the <style> tags.
<style>
.progressbar {
position:relative;
display:block;
margin-bottom:15px;
width:100%;
background:#eee;
height:35px;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
-webkit-transition:0.4s linear;
-moz-transition:0.4s linear;
-ms-transition:0.4s linear;
-o-transition:0.4s linear;
transition:0.4s linear;
-webkit-transition-property:width, background-color;
-moz-transition-property:width, background-color;
-ms-transition-property:width, background-color;
-o-transition-property:width, background-color;
transition-property:width, background-color;
}
.progressbar-title {
position:absolute;
top:0;
left:0;
width:170px;
font-weight:600;
font-size:16px;
color:#ffffff;
background:#93ab3a;
-webkit-border-top-left-radius:3px;
-webkit-border-bottom-left-radius:4px;
-moz-border-radius-topleft:3px;
-moz-border-radius-bottomleft:3px;
border-top-left-radius:3px;
border-bottom-left-radius:3px;
}
.progressbar-title span {
display:block;
background:rgba(0, 0, 0, 0.1);
padding:0 20px;
height:35px;
line-height:35px;
-webkit-border-top-left-radius:3px;
-webkit-border-bottom-left-radius:3px;
-moz-border-radius-topleft:3px;
-moz-border-radius-bottomleft:3px;
border-top-left-radius:3px;
border-bottom-left-radius:3px;
}
.progressbar-bar {
height:35px;
width:0px;
background:#6adcfa;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
}
.progress-bar-percent {
position:absolute;
right:10px;
top:0;
font-size:15px;
height:35px;
line-height:35px;
color:#ffffff;
color:rgba(0, 0, 0, 0.4);
}
</style>
As mentioned above, the background of the title is fixed using the “background:#93ab3a;” attribute defined under the class “.progressbar-title”.
Script for jQuery Animated Progress Bar
Add the below script under “Footer Code” section of the page on which you want to add the progress bar.
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('.progressbar').each(function(){
jQuery(this).find('.progressbar-bar').animate({
width:jQuery(this).attr('data-percent')
},6000);
});
});
</script>
Animation speed is defined as 6000ms which can be changed to increase or decrease the speed (the lower the value the higher the speed).
HTML for Auto Loading Progress Bar
Final part is the HTML code, add the below HTML inside an “Embed Code” element on your Weebly page:
<!-- Start of 1 progress Bar --> <div class="progressbar clearfix " data-percent="60%"> <div class="progressbar-title"><span>SEO</span></div> <div class="progressbar-bar" style="background: #e67e22;"></div> <div class="progress-bar-percent">60%</div> </div> <!-- End of 1 progress Bar --> <!-- Start of 2 progress Bar --> <div class="progressbar clearfix " data-percent="75%"> <div class="progressbar-title"><span>Web Design</span></div> <div class="progressbar-bar" style="background: #3498db;"></div> <div class="progress-bar-percent">75%</div> </div> <!-- End of 2 progress Bar --> <!-- Start of 3 progress Bar --> <div class="progressbar clearfix " data-percent="70%"> <div class="progressbar-title"><span>Weebly Design</span></div> <div class="progressbar-bar" style="background: #2c3e50;"></div> <div class="progress-bar-percent">70%</div> </div> <!-- End of 3 progress Bar --> <!-- Start of 4 progress Bar --> <div class="progressbar clearfix " data-percent="60%"> <div class="progressbar-title"><span>WordPress Design</span></div> <div class="progressbar-bar" style="background: #5a68a5;"></div> <div class="progress-bar-percent">60%</div> </div> <!-- End of 4 progress Bar --> <!-- Start of 5 progress Bar --> <div class="progressbar clearfix " data-percent="65%"> <div class="progressbar-title"><span>Content Writing</span></div> <div class="progressbar-bar" style="background: #525252;"></div> <div class="progress-bar-percent">65%</div> </div> <!-- End of 5 progress Bar --> <!-- Start of 6 progress Bar --> <div class="progressbar clearfix " data-percent="100%"> <div class="progressbar-title"><span>Blog Consulting</span></div> <div class="progressbar-bar" style="background: #2ecc71;"></div> <div class="progress-bar-percent">100%</div> </div> <!-- End of 6 progress Bar --> <!-- Start of 7 progress Bar --> <div class="progressbar clearfix " data-percent="70%"> <div class="progressbar-title"><span>Plugin Development</span></div> <div class="progressbar-bar" style="background: #4288d0;"></div> <div class="progress-bar-percent">70%</div> </div> <!-- End of 7 progress Bar -->
Each single progress bar code is commented within start and end block, you can copy / paste the block to add additional bars.
Customizing HTML Code for Progress Bars
Below is the picture indicates how each line of the HTML code affects the progress bar components:
4 Comments
Leave your reply.