【问题标题】:Progress bar doesn't animate or appear进度条没有动画或出现
【发布时间】:2017-05-17 23:18:52
【问题描述】:

我是 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 -->

【问题讨论】:

  • 添加您正在使用的引导程序版本会很有帮助 - 3 和 4 有时使用相似的语法,因此很难将它们与 HTML 的 sn-p 区分开来。
  • 您使用的是什么版本的 Bootstrap?查看 Bootstrap 3 和 4 的两个文档,它们都有不同的方式来实现进度条中的动画。
  • 我正在使用 Bootstrap v3。当我将代码从一个主题复制到另一个主题时,我必须复制什么? CSS 和 Jquery 也是?

标签: jquery css progress-bar progress


【解决方案1】:

动画(线的增长,至少在引导程序 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,如果上面的代码有效,你就有了。如果你想使用花哨的缓动/动画功能,你可能也需要 jQuery UI。但你现在不知道。

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

【讨论】:

  • 代码工作,最后我可以得到动画。但是我所有的技能进度条都是 80%。你能告诉我根据我的需要制作它的代码吗?我的图表也是如此。你能告诉我为我的图片制作动画的代码吗?
  • sn-p 似乎不起作用 - 存在 JavaScript 错误。
  • 当然,sn-p 不包括它需要运行的 Jquery。但如果你包含 jQuery 库和引导 css,它与他的 html 一起工作得很好。jsfiddle.net/70bstq8x/1
  • 我认为你现在可以在 stackoverflow sn-ps 中做大部分 jsfiddle 可以做的事情,包括 jQuery 和 bootstrap。为工作演示+1
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2021-10-29
  • 1970-01-01
  • 1970-01-01
  • 2018-04-23
  • 1970-01-01
  • 2014-04-23
  • 1970-01-01
相关资源
最近更新 更多