相关疑难解决方法(0)

如何在Bootstrap 3中为进度条设置动画?

我试图动画Bootstrap进度条,但我不知道该怎么做.

我得到宽度的值,但console.log(bar_width);返回宽度,px但不是%内联显示style="width:90%.

我用代码重新创建了一个bootply:BootStrap Progress Bar

HTML:

<!-- Skills Progress Bar -->
<section id="skills-pgr">
    <div class="progress">
        <div class="progress-bar" role="progressbar" aria-valuenow="90"
      aria-valuemin="0" aria-valuemax="100" style="width:90%">
            <span>HTML/CSS</span>
        </div>
    </div>
    <div class="progress">
        <div class="progress-bar" role="progressbar" aria-valuenow="85"
      aria-valuemin="0" aria-valuemax="100" style="width:85%">
            <span>Photography</span>
        </div>
    </div>
    <div class="progress">
        <div class="progress-bar" role="progressbar" aria-valuenow="80"
      aria-valuemin="0" aria-valuemax="100" style="width:80%">
            <span>CMS</span>
        </div>
    </div>
    <div class="progress">
        <div class="progress-bar" role="progressbar" aria-valuenow="75"
      aria-valuemin="0" aria-valuemax="100" style="width:75%">
            <span>JavaScript/jQuery</span>
        </div>
    </div>
    <div class="progress">
        <div class="progress-bar" role="progressbar" aria-valuenow="60"
      aria-valuemin="0" aria-valuemax="100" style="width:60%">
            <span>Photoshop</span> …
Run Code Online (Sandbox Code Playgroud)

css jquery animation twitter-bootstrap progress-bar

7
推荐指数
2
解决办法
2万
查看次数

标签 统计

animation ×1

css ×1

jquery ×1

progress-bar ×1

twitter-bootstrap ×1