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

Obsidian Age · Accepted Answer · 2019-10-03 03:21:46Z

2

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.

edited Oct 3, 2019 at 3:21

answered Oct 3, 2019 at 3:18

Obsidian Age

42.6k11 gold badges54 silver badges76 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Gerardo Furtado Over a year ago

I'm curious: why did you remove the SO snippet in favour of the JSFiddle? I clicked "run code snippet" a couple of times and, indeed, it was not working. Do you know why?

Obsidian Age Over a year ago

@GerardoFurtado; I'm curious about that too. The StackSnippet was indeed not working, and I didn't want to add additional code that wasn't directly tied to the resolution of OP's problem. I assume the StackSnippet problem lies in timing / sand-boxing, though adding a click event handler seems to resolve the issue for the StackSnippet. I've added this to the StackSnippet, and left the JSFiddle link there to show that you shouldn't need this.

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related