CODEWITHSUNDEEP
javascripthtmlcss
Mike Croteau
Mike Croteau

Reputation: 1132

Javascript + CSS animation not working, what could be causing it?

I am working on a page progress loader, I would like to animate the width throughout progress however I am not having any luck. Please see below, any help would be most appreciated.

https://jsfiddle.net/nbx9dwzL/

HTML

<div id="page-progress-bar-top"></div>

Javascript

var pageProgressBarTop = document.getElementById("page-progress-bar-top")
pageProgressBarTop.classList.add("complete")

CSS

#page-progress-bar-top{
  position:absolute;
  height:4px;
  background:#12ADFD;
  z-index:100;
  -webkit-transition: all 3s;
  -moz-transition: all 3s;
  -ms-transition: all 3s;
  -o-transition: all 3s;
  transition: all 3s;
  -webkit-box-shadow: 0px 2px 7px 0px rgba(179,179,179,0.82);
  -moz-box-shadow: 0px 2px 7px 0px rgba(179,179,179,0.82);
  box-shadow: 0px 2px 7px 0px rgba(179,179,179,0.82);
}
#page-progress-bar-top.complete{
  width:100%;
}

Upvotes: 0

Views: 120

Answers (1)

Obsidian Age
Obsidian Age

Reputation: 42384

You have no initial width, and the default width for a <div> element is 100% (it's a block element).

To see the transition, you're looking to apply a width, of say 1px to start out with:

document.addEventListener("click", function() {
  var pageProgressBarTop = document.getElementById("page-progress-bar-top")
  pageProgressBarTop.classList.add("complete")
});
#page-progress-bar-top {
  width: 1px;
  position: absolute;
  height: 4px;
  background: #12ADFD;
  z-index: 100;
  -webkit-transition: all 3s;
  -moz-transition: all 3s;
  -ms-transition: all 3s;
  -o-transition: all 3s;
  transition: all 3s;
  -webkit-box-shadow: 0px 2px 7px 0px rgba(179, 179, 179, 0.82);
  -moz-box-shadow: 0px 2px 7px 0px rgba(179, 179, 179, 0.82);
  box-shadow: 0px 2px 7px 0px rgba(179, 179, 179, 0.82);
}

#page-progress-bar-top.complete {
  width: 100%;
}
<div id="page-progress-bar-top"></div>

This can be seen working here.

Upvotes: 2

Related Questions