Author: | StoyPenny |
---|---|
Views Total: | 15,192 views |
Official Page: | Go to website |
Last Update: | June 10, 2014 |
License: | Unknown |
Preview:

Description:
In this post we’re going to create flat styled progress bars to present your skills & experiences by using pure CSS. Created & released by StoyPenn.
How to use it:
Create the Html for the skill bars. Use CSS class ‘value-*’ to specify the percentage.
<div class="contentContainer"> <div class="progressBar"> <h4>HTML5</h4> <div class="progressBarContainer"> <div class="progressBarValue value-90"></div> </div> </div> <div class="progressBar"> <h4>CSS3</h4> <div class="progressBarContainer"> <div class="progressBarValue value-80"></div> </div> </div> <div class="progressBar"> <h4>Jquery</h4> <div class="progressBarContainer"> <div class="progressBarValue value-30"></div> </div> </div> <div class="progressBar"> <h4>WordPress</h4> <div class="progressBarContainer"> <div class="progressBarValue value-70"></div> </div> </div> </div>
The CSS to render the skill bars in the DIV elements.
.contentContainer { background: #efefef; padding: 20px; max-width: 350px; min-width: 150px; margin: 15vh auto; border-radius: 10px; border: solid 5px #dbdbdb; } /*/////////////////////////////////////////////////////// // Progress Bars \\ ///////////////////////////////////////////////////////*/ .progressBar { margin-bottom: 26px; margin-bottom: 1.66em; } .progressBar h4 { font-size: 21px; font-size: 1.33em; text-transform: none; font-family: Arial, Helvetica, sans-serif; font-weight: bold; margin-bottom: 7px; margin-bottom: .33em; } .progressBarContainer { width: 100%; max-width: 350px; height: 26px; height: 1.66em; background: #e6eae3; background: rgba(8,102,220,.2); overflow: hidden; border-radius: 5px; } .progressBarValue { height: 1.66em; float: left; background: #0866dc; background: rgba(8,102,220,.75); } .value-00 { width: 0; } .value-10 { width: 10%; } .value-20 { width: 20%; } .value-30 { width: 30%; } .value-40 { width: 40%; } .value-50 { width: 50%; } .value-60 { width: 60%; } .value-70 { width: 70%; } .value-80 { width: 80%; } .value-90 { width: 90%; } .value-100 { width: 100%; }