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

Question

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%;
}

Answer 1

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 .