jQuery
【jQuery】アニメーションスキルバーAnimated Skillbar
March 25, 2017

Animated SkillbarはアニメーションスキルバーjQueryプラグイン。
Demo
<div id="wrapper"> <div class="skill_name" id="skill_html">HTML</div> <div class="skillbar_wrapper"> <div class="skillbar_bar" id="skillbar_html"></div> <div class="skillbar_percent">85%</div> </div> <div class="skill_name" id="skill_css">CSS</div> <div class="skillbar_wrapper"> <div class="skillbar_bar" id="skillbar_css"></div> <div class="skillbar_percent">70%</div> </div> <div class="skill_name" id="skill_jscript">JS</div> <div class="skillbar_wrapper"> <div class="skillbar_bar" id="skillbar_jscript"></div> <div class="skillbar_percent">65%</div> </div> </div> <script> $(document).ready(function(){ $("#skillbar_html").animate({width:'85%'},1500); $("#skillbar_css").animate({width:'70%'},1500); $("#skillbar_jscript").animate({width:'65%'},1500); }); </script>
Download