Menu icon Foundation
F6 Progress Meter, using jquery

Hi All

I have a bank of four progress bars, in which i would like to animate the fill, using jquery or css(i'm not to bothered) but I got stuck and can't figure it out.

What happens at present is all four progress bars fill to the same fill percentage.

There is a codepen at http://codepen.io/anon/pen/ZBWNPZ

My code at present is :-

<div class="row">
  <div class="columns">
    <span class="label" id="html">HTML</span>
    <div class="progress" role="progressbar" tabindex="0" aria-valuenow="65" aria-valuemin="0" aria-valuetext="65 percent" aria-valuemax="100">
      <div class="progress-meter html" style="width: 0.1%">
        <p class="progress-meter-text">65%</p>
      </div>
    </div>
    <span class="label" id="css">CSS</span>
    <div class="progress" role="progressbar" tabindex="0" aria-valuenow="80" aria-valuemin="0" aria-valuetext="80 percent" aria-valuemax="100">
      <div class="progress-meter css" style="width: 0.1%">
        <p class="progress-meter-text">80%</p>
      </div>
    </div>
    <span class="label" id="jquery">jquery</span>
    <div class="progress" role="progressbar" tabindex="0" aria-valuenow="72" aria-valuemin="0" aria-valuetext="72 percent" aria-valuemax="100">
      <div class="progress-meter jquery" style="width: 0.1%">
        <p class="progress-meter-text">72%</p>
      </div>
    </div>
    <span class="label" id="f6">F6</span>
    <div class="progress" role="progressbar" tabindex="0" aria-valuenow="85" aria-valuemin="0" aria-valuetext="85 percent" aria-valuemax="100">
      <div class="progress-meter f6" style="width: 0.1%">
        <p class="progress-meter-text">85%</p>
      </div>
    </div>
</div>
</div>
$black:#222;
$white:#fff;
$color-primary-0:red;
body {
  margin: 4rem;
  background: $black;
  position: relative;
}

.label {
  background: transparent;
  color: $white;
  position: relative;
  top: 1.5rem;
  left: -3.5rem;
}

.progress {
  height: 1.25rem;
}

.progress-meter {
  background: $color-primary-0;
  transition: width 2s ease-in-out;
}

$(document).foundation();

$('.progress-meter, .html').delay(1000).queue(function() {
  $(this).css('width', '65%')
});

$('.progress-meter, .css').delay(1000).queue(function() {
  $(this).css('width', '80%')
});

$('.progress-meter, .jquery').delay(1000).queue(function() {
  $(this).css('width', '72%')
});

$('.progress-meter, .f6').delay(1000).queue(function() {
  $(this).css('width', '85%')
});

 

Any help would be much appreciated

 

Will

F6jqueryprogressbar

Hi All

I have a bank of four progress bars, in which i would like to animate the fill, using jquery or css(i'm not to bothered) but I got stuck and can't figure it out.

What happens at present is all four progress bars fill to the same fill percentage.

There is a codepen at http://codepen.io/anon/pen/ZBWNPZ

My code at present is :-

<div class="row">
  <div class="columns">
    <span class="label" id="html">HTML</span>
    <div class="progress" role="progressbar" tabindex="0" aria-valuenow="65" aria-valuemin="0" aria-valuetext="65 percent" aria-valuemax="100">
      <div class="progress-meter html" style="width: 0.1%">
        <p class="progress-meter-text">65%</p>
      </div>
    </div>
    <span class="label" id="css">CSS</span>
    <div class="progress" role="progressbar" tabindex="0" aria-valuenow="80" aria-valuemin="0" aria-valuetext="80 percent" aria-valuemax="100">
      <div class="progress-meter css" style="width: 0.1%">
        <p class="progress-meter-text">80%</p>
      </div>
    </div>
    <span class="label" id="jquery">jquery</span>
    <div class="progress" role="progressbar" tabindex="0" aria-valuenow="72" aria-valuemin="0" aria-valuetext="72 percent" aria-valuemax="100">
      <div class="progress-meter jquery" style="width: 0.1%">
        <p class="progress-meter-text">72%</p>
      </div>
    </div>
    <span class="label" id="f6">F6</span>
    <div class="progress" role="progressbar" tabindex="0" aria-valuenow="85" aria-valuemin="0" aria-valuetext="85 percent" aria-valuemax="100">
      <div class="progress-meter f6" style="width: 0.1%">
        <p class="progress-meter-text">85%</p>
      </div>
    </div>
</div>
</div>
$black:#222;
$white:#fff;
$color-primary-0:red;
body {
  margin: 4rem;
  background: $black;
  position: relative;
}

.label {
  background: transparent;
  color: $white;
  position: relative;
  top: 1.5rem;
  left: -3.5rem;
}

.progress {
  height: 1.25rem;
}

.progress-meter {
  background: $color-primary-0;
  transition: width 2s ease-in-out;
}

$(document).foundation();

$('.progress-meter, .html').delay(1000).queue(function() {
  $(this).css('width', '65%')
});

$('.progress-meter, .css').delay(1000).queue(function() {
  $(this).css('width', '80%')
});

$('.progress-meter, .jquery').delay(1000).queue(function() {
  $(this).css('width', '72%')
});

$('.progress-meter, .f6').delay(1000).queue(function() {
  $(this).css('width', '85%')
});

 

Any help would be much appreciated

 

Will

Joshua Scott about 3 years ago

 Update your JavaScript to remove the comma and space after progress-meter and it should work.

$(document).foundation();

$('.progress-meter.html').delay(1000).queue(function() {
  $(this).css('width', '65%')
});

$('.progress-meter.css').delay(1000).queue(function() {
  $(this).css('width', '80%')
});

$('.progress-meter.jquery').delay(1000).queue(function() {
  $(this).css('width', '72%')
});

$('.progress-meter.f6').delay(1000).queue(function() {
  $(this).css('width', '85%')
});

Will Moody about 3 years ago

Thanks Joshua

Worked a treat, jquery is not my strongest point.

 

Will

Seamus Leonard almost 3 years ago

Hi Will,

I forked your example and made some edits to the code to save you updating the same value in multiple places.

now if you update the aria-valuenow value it reflects in the div width and populates the 'progress-meter-text'

 

https://codepen.io/steadynow/pen/vgWmep

 

At the moment Im not sure how to update aria-valuetext via jquery, but I hope this helps you a bit

Will Moody almost 3 years ago

Hi Seamus

Thanks for that, works really well.

I have just added it to a codepen here, (https://codepen.io/FatBuddha/pen/YNEYeq)  which fires the animation with waypoints, may be of some use.

 

Will

kopamam almost 3 years ago

After his triumph over Dimitrov, Nadal said:

 

federervsnadallive-stream.us