animated HTML/CSS/jQuery Skills Graph -
so trying make 'skills' graphic loads when page opened.
using html, css, , jquery; cannot figure out why little progress bars won't display load action.i'm hoping can lead me in right direction (hint) or find out whats wrong!
here is:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>skills</title> <style> #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; } </style> </head> <body> <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> <script> $(document).ready(function() { $('.adobe').css('width', '20%'); $('.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%'); }); </script> </body> </html>
it looks forgot set background , height ".progress-bar".
so, css code should embed:
.progress-bar { height: 20px; background-color: #f00; }
Comments
Post a Comment