CODEWITHSUNDEEP
jquerycssprogress-barprogress
Mohammed Minhaj
Mohammed Minhaj

Reputation: 3

Progress bar doesn't animate or appear

I am new to Bootstrap. I downloaded two themes related to resume. One theme had progress bar and the other dint. So I copied the code from this and pasted into the other index file. The progress bar appears but it is empty and doesn't animate. Please help me I am stuck. I have copied and pasted CSS code too. Below is the code which I copied and pasted into other theme:

<!-- 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 -->

Upvotes: 0

Views: 434

Answers (1)

Mauricio
Mauricio

Reputation: 581

The animation (growing of the line, in bootstrap 3 at least, worked something like this:

$(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
  });
});

Now that we narrowed down on Bootstrap 3, you need to loop through your progress bars and assign the value to each, instead of the 80% I hardcoded. You need jQuery, which you have if the code above worked. If you want to use fancy easing/animation function you might need jQuery UI too. But you don't right now.

I have modified the above snipper to work on your example.

Upvotes: 1

Related Questions