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