<div id="resumeProficiencies">
    
       <div id="resumeProficienciesTop" class="resumeProficienciesTop1">adobe creative suite cc</div><!--END resumeProficienciesTop-->

       <div id="resumeProficienciesBottom">
        <div class="progress">
          <div class="adobe progress-bar progress-bar-info" role="progressbar" style="width: 0%">
          </div>
        </div>
      </div><!--END resumeProficienciesBottom-->

      <div id="resumeProficienciesTop">html5</div><!--END resumeProficienciesTop-->
     
     <div id="resumeProficienciesBottom">
      <div class="progress">
        <div class="html progress-bar progress-bar-info" role="progressbar" style="width: 0%">
        </div>
      </div>
     </div><!--END resumeProficienciesBottom-->   

     <div id="resumeProficienciesTop">css3/css</div><!--END resumeProficienciesTop-->

     <div id="resumeProficienciesBottom">
      <div class="progress">
        <div class="css progress-bar progress-bar-info" role="progressbar" style="width: 0%">
        </div>
      </div>
    </div><!--END resumeProficienciesBottom-->   

    <div id="resumeProficienciesTop">jquery</div><!-- END resumeProficienciesTop -->

    <div id="resumeProficienciesBottom">
      <div class="progress">
        <div class="jquery progress-bar progress-bar-info" role="progressbar" style="width: 0%"></div>
      </div>
    </div><!--END resumeProficienciesBottom-->

    <div id="resumeProficienciesTop">javascript</div><!--END resumeProficienciesTop-->

    <div id="resumeProficienciesBottom">
      <div class="progress">
        <div class="javascript progress-bar progress-bar-info" role="progressbar" style="width: 0%">
        </div>
      </div>
    </div><!--END resumeProficienciesBottom-->

    <div id="resumeProficienciesTop">bootstrap</div><!--END resumeProficienciesTop-->

    <div id="resumeProficienciesBottom">
      <div class="progress">
        <div class="bootstrap progress-bar progress-bar-info" role="progressbar" style="width: 0%">
        </div>
      </div>
    </div><!--END resumeProficienciesBottom-->

    <div id="resumeProficienciesTop">wordpress</div><!--END resumeProficienciesTop-->

    <div id="resumeProficienciesBottom">
      <div class="progress">
        <div class="wordpress progress-bar progress-bar-info" role="progressbar" style="width: 0%">
        </div>
      </div>
    </div><!--END resumeProficienciesBottom-->   

    <div id="resumeProficienciesTop">user interface (ui)</div><!--END resumeProficienciesTop-->

    <div id="resumeProficienciesBottom">
      <div class="progress">
        <div class="ui progress-bar progress-bar-info" role="progressbar" style="width: 0%">
        </div>
      </div>
    </div><!-- ENDresumeProficienciesBottom-->   

    <div id="resumeProficienciesTop">user experience (ux)</div><!--END resumeProficienciesTop-->

    <div id="resumeProficienciesBottom">
      <div class="progress">
        <div class="ux progress-bar progress-bar-info" role="progressbar" style="width: 0%">
        </div>
      </div>
    </div><!--END resumeProficienciesBottom-->   

    <div id="resumeProficienciesTop">responsive web design</div><!--END resumeProficienciesTop-->

    <div id="resumeProficienciesBottom">
      <div class="progress">
        <div class="rwd progress-bar progress-bar-info" role="progressbar" style="width: 0%">
         <span class="sr-only"></span>
       </div>
     </div>
    </div><!--END resumeProficienciesBottom-->

    <div id="resumeProficienciesTop">mobile app design</div><!--END resumeProficienciesTop-->

    <div id="resumeProficienciesBottom">
      <div class="progress">
        <div class="mobile progress-bar progress-bar-info" role="progressbar" style="width: 0%">
         <span class="sr-only"></span>
       </div>
     </div>
    </div><!--END resumeProficienciesBottom-->

    <div id="resumeProficienciesTop">rapid prototyping</div><!--END resumeProficienciesTop-->

    <div id="resumeProficienciesBottom">
      <div class="progress">
        <div class="rapidproto progress-bar progress-bar-info" role="progressbar" style="width: 0%">
         <span class="sr-only"></span>
       </div>
     </div>
    </div><!--END resumeProficienciesBottom-->   
</div>

#resumeProficiencies {
	float: left;
	clear: right;
	width: 500px;
	margin: 20px 0px 30px 30px;
}

#resumeProficienciesTop {
	float: left;
	clear: right;
	width: 100%;
	margin: -5px 0px 0px 0px;
	text-align: left;
	font-weight: 600;
}

#resumeProficienciesBottom {
	float: left;
	clear: right;
	width: 80%;
	margin: 2px 0px 0px 0px;
}

.progress {
	background:#e9e5e2;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#dddddd), to(#e9e5e2));
	background-image: -webkit-linear-gradient(top, #dddddd, #e9e5e2);
	background-image: -moz-linear-gradient(top, #dddddd, #e9e5e2);
	background-image: -ms-linear-gradient(top, #dddddd, #e9e5e2);
	background-image: -o-linear-gradient(top, #dddddd, #e9e5e2);
	background-image: linear-gradient(top, #dddddd, #e9e5e2);  
	height:20px; 
	border-radius: 0px;
	-moz-box-shadow: 0 1px 0px #bebbb9 inset, 0 1px 0 #fcfcfc;	 
	-webkit-box-shadow: 0 1px 0px #bebbb9 inset, 0 1px 0 #fcfcfc;	 
	box-shadow: 0 1px 0px #bbbbbb inset, 0 1px 0 #fcfcfc;	  
}

.adobe, .html, .css, .jquery, .javascript, .bootstrap, .wordpress, .ui, .ux, .rwd, .mobile, .rapidproto {

 -webkit-transition: width 4.50s ease !important;
 -moz-transition: width 4.50s ease !important;
   -o-transition: width 4.50s ease !important;
      transition: width 4.50s ease !important;
 }
$(document).ready(function() {
  $('.adobe').css('width', '100%');
  $('.html').css('width', '100%');
  $('.css').css('width', '100%');
  $('.lesssass').css('width', '50%');
  $('.jquery').css('width', '70%');
  $('.javascript').css('width', '55%');
  $('.bootstrap').css('width', '90%');
  $('.wordpress').css('width', '85%');
  $('.ui').css('width', '100%');
  $('.ux').css('width', '90%');
  $('.rwd').css('width', '85%');
  $('.mobile').css('width', '85%');
  $('.rapidproto').css('width', '95%');
});

External CSS

  1. https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
  2. https://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js