CODEWITHSUNDEEP
javascriptjquery
viper1
viper1

Reputation: 1

How to make this progress bar start animating when scroll down to it?

I have this animated progress bar. I'd like to ask if it possible the progress bar to start animating when I scroll down to it?

I know I should use javascript to make it work on scroll but didn't know how. I will appreciate any help with that.

.progress {
  height: 20px;
  border-radius: 5px;
  margin-bottom: 20px;
  position: relative;
}

.progress .progress-bar {
  border-radius: 5px;
  position: absolute;
  top: 0;
  left: 0;
  line-height: 20px;
  animation: animate-positive 6s;
}

.progress .progress-value {
  font-size: 11px;
  color: #fff;
  padding: 0 15px;
  float: right;
}

.progress .progressbar-title {
  font-size: 11px;
  color: #fff;
  padding: 0 15px;
  float: left;
}

@-webkit-keyframes animate-positive {
  0% {
    width: 0%;
  }
}

@keyframes animate-positive {
  0% {
    width: 0%;
  }
}
<div class="progress" style="background:#7f7e7d;">
  <div class="progress-bar" style="width:80%; background: #000000;">
    <div class="progress-value">80%</div>
    <div class="progressbar-title">Progress</div>
  </div>
</div>

Upvotes: 0

Views: 785

Answers (3)

Maksym
Maksym

Reputation: 19

I use this library when I need to add animation when scroll down. I think you can add some class or id to div when this block is visible.

Upvotes: 0

Elish
Elish

Reputation: 476

This can be done by checking if the progress bar is in viewport. Once it is in the view port you can use jQuery animate to start the animation. In folloing code I have replace all your CSS animation and used jQuery animate.

function isInViewport($elem) {
	let elementTop = $elem.offset().top;
	let elementBottom = elementTop + $elem.outerHeight();
	let viewportTop = $(window).scrollTop();
	let viewportBottom = viewportTop + $(window).height();
	return elementBottom > viewportTop && elementTop < viewportBottom;
}
let $progress = $(".progress");
let $progressBar = $progress.children(".progress-bar");
let maxVal = parseInt($(".progress-value").text());
$(window).scroll(function() {
	if (isInViewport($progress)) {
		$progressBar.animate(
			{
				width: maxVal + "%"
			},
			1000
		);
	}
});
.progress {
  height: 20px;
  border-radius: 5px;
  margin-bottom: 20px;
  position: relative;
}

.progress .progress-bar {
  border-radius: 5px;
  position: absolute;
  top: 0;
  left: 0;
  line-height: 20px;
}

.progress-bar {
  background: #000;
}

.progress .progress-value {
  font-size: 11px;
  color: #fff;
  padding: 0 15px;
  float: right;
}

.progress .progressbar-title {
  font-size: 11px;
  color: #fff;
  padding: 0 15px;
  float: left;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="height:500px; background: red; color:#fff;"> 
	This div pushes slider below viewPort. Scroll down to see slider
</div>
<div class="progress" style="background:#7f7e7d;">
	<div class="progress-bar">
		<div class="progress-value">100%</div>
		<div class="progressbar-title">Progress</div>
	</div>
</div>

Upvotes: 1

Juan J
Juan J

Reputation: 413

You can do something like this:

$(window).on("scroll", function(){
    if($("body").scrollTop() === 500){
        $(window).off("scroll");
        // Execute your animation here
    }
}

This line: 

$(window).off("scroll");

removes the scroll event handler, as I am assuming you only want this to fire once.

I hope this will give you something to go on.

Upvotes: 0

Related Questions