进度条没有动画或出现

Question

我是 Bootstrap 的新手。我下载了两个与简历相关的主题。一个主题有进度条，另一个有力量。所以我从这里复制代码并粘贴到另一个索引文件中。进度条出现但它是空的并且没有动画。请帮助我，我被困住了。我也复制并粘贴了 CSS 代码。以下是我复制并粘贴到其他主题中的代码：

<!-- Skills Section -->
<section id="skills" class="skills-section section-padding">
  <div class="container">
    <h2 class="section-title wow fadeInUp">Skills</h2>

    <div class="row">
      <div class="col-md-6">
        <div class="skill-progress">
          <div class="skill-title"><h3>UX Design</h3></div> 
          <div class="progress">
            <div class="progress-bar six-sec-ease-in-out" role="progressbar" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100" ><span>95%</span>
            </div>
          </div><!-- /.progress -->
        </div><!-- /.skill-progress -->
        <div class="skill-progress">
          <div class="skill-title"><h3>Visual Design</h3></div> 
          <div class="progress">
            <div class="progress-bar six-sec-ease-in-out" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" ><span>80%</span>
            </div>
          </div><!-- /.progress -->
        </div><!-- /.skill-progress -->
        <div class="skill-progress">
          <div class="skill-title"><h3>Business Design</h3></div>  
          <div class="progress">
            <div class="progress-bar six-sec-ease-in-out" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" ><span>75%</span>
            </div>
          </div><!-- /.progress -->
        </div><!-- /.skill-progress -->
      </div><!-- /.col-md-6 -->

      <div class="col-md-6">
        <div class="skill-progress">
          <div class="skill-title"><h3>Branding Design</h3></div> 
          <div class="progress">
            <div class="progress-bar six-sec-ease-in-out" role="progressbar" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100" ><span>95%</span>
            </div>
          </div><!-- /.progress -->
        </div><!-- /.skill-progress -->
        <div class="skill-progress">
          <div class="skill-title"><h3>Motion Graphic</h3></div> 
          <div class="progress">
            <div class="progress-bar six-sec-ease-in-out" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" ><span>80%</span>
            </div>
          </div><!-- /.progress -->
        </div><!-- /.skill-progress -->
        <div class="skill-progress">
          <div class="skill-title"><h3>Flyers Designing</h3></div>  
          <div class="progress">
            <div class="progress-bar six-sec-ease-in-out" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" ><span>75%</span>
            </div>
          </div><!-- /.progress -->
        </div><!-- /.skill-progress -->
      </div><!-- /.col-md-6 -->
    </div><!-- /.row -->

    <div class="skill-chart text-center">
      <h3>More skills</h3>
    </div>

    <div class="row more-skill text-center">
      <div class="col-xs-12 col-sm-4 col-md-2">
          <div class="chart" data-percent="91" data-color="e74c3c">
                <span class="percent"></span>
                <div class="chart-text">
                  <span>leadership</span>
                </div>
            </div>
        </div>
        <div class="col-xs-12 col-sm-4 col-md-2">
          <div class="chart" data-percent="23" data-color="2ecc71">
                <span class="percent"></span>
                <div class="chart-text">
                  <span>Creativity</span>
                </div>
            </div>
        </div>
        <div class="col-xs-12 col-sm-4 col-md-2">
          <div class="chart" data-percent="68" data-color="3498db">
                <span class="percent"></span>
                <div class="chart-text">
                  <span>Management</span>
                </div>
            </div>
        </div>
        <div class="col-xs-12 col-sm-4 col-md-2">
          <div class="chart" data-percent="68" data-color="3498db">
                <span class="percent"></span>
                <div class="chart-text">
                  <span>Branding</span>
                </div>
            </div>
        </div>
        <div class="col-xs-12 col-sm-4 col-md-2">
          <div class="chart" data-percent="68" data-color="3498db">
                <span class="percent"></span>
                <div class="chart-text">
                  <span>Marketing</span>
                </div>
            </div>
        </div>
        <div class="col-xs-12 col-sm-4 col-md-2">
          <div class="chart" data-percent="68" data-color="3498db">
                <span class="percent"></span>
                <div class="chart-text">
                  <span>Motivation</span>
                </div>
            </div>
        </div>
    </div>

  </div><!-- /.container -->
</section><!-- End Skills Section -->

Answer 1

动画（线的增长，至少在 bootstrap 3 中，是这样工作的：

$(function() {
  $('.progress-bar').each(function() { // loops through all bars
    var percent_fill = $(this).attr('aria-valuenow') + '%'; // grabs the % from your html aria-valuenow attribute.               
    $(this).animate({ width: percent_fill }, { duration: 2000 }); //animates. Here is where you could pass additional easing function if desired with the help of jquery ui
  });
});

既然我们缩小了 Bootstrap 3，您需要遍历进度条并将值分配给每个进度条，而不是我硬编码的 80%。如果上面的代码有效，您需要 jQuery。如果你想使用花哨的 easing/animation 函数，你可能还需要 jQuery UI。但你现在还没有。

我已经修改了上面的 snipper 来处理你的例子。

进度条没有动画或出现

Progress bar doesn't animate or appear

jquery

css

progress-bar

progress