I got a HTML & CSS progress bar. what i need now is that it should load a page on complete. any ways?

Question

//Here is my HTML What i need here is that on complete load of the progress bar it should redirect to another page. any ways for that?!!!!

.text-center {
    text-align: center;
}

.container {
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
}

.progress {
    background-color: #e5e9eb;
    height: 0.25em;
    position: relative;
    width: 24em;
}
.progress-bar {
    -webkit-animation-duration: 3s;
    -webkit-animation-name: width;
    background: linear-gradient(to right, #4cd964, #5ac8fa, #007aff, #34aadc, #5856d6, #ff2d55);
    background-size: 24em 0.25em;
    height: 100%;
    position: relative;
}
.progress-shadow {
    background-image: linear-gradient(to bottom, #eaecee, transparent);
    height: 4em;
    position: absolute;
    top: 100%;
    transform: skew(45deg);
    transform-origin: 0 0;
    width: 100%;
}

/* ANIMATIONS */
@keyframes width {
       0%, 100% {
       transition-timing-function: cubic-bezier(1, 0, 0.65, 0.85);
  }
  0% {
       width: 0;
  }
   100% {
      width: 100%;
  }
}
@-webkit-keyframes width {
       0%, 100% {
       transition-timing-function: cubic-bezier(1, 0, 0.65, 0.85);
  }
  0% {
       width: 0;
  }
   100% {
      width: 100%;
  }
}

  <div class="container">
  <h2 class="text-center">Loading</h2>
  <div class="progress">
    <div class="progress-bar">
      <div class="progress-shadow"></div>
      </div>
  </div>
</div>

help me out!! And i don't have any java script here. i would be more happy if i can do it without java script. so please help me out with it.

UPDATE found that java script animation end may help out.

Answer 1

Simply use this trick highlighted by David Walsh. He did it for transitionend, but we can swap it out for animationend instead.

His trick is to loop through the list of all vendor-prefixed and native animationend events, and check if the browser supports any of them. He then attaches the recognized animationend handler to the element of interest.

When the animationend event is fired, we simply redirect to the URL of interest using window.location.replace(), as mentioned before.

I have modified it so it would work for your scenario:

$(function() {

    // Check with animationend event is supported by browser
    function whichAnimationEvent(){
        var t;
        var el = document.createElement('fakeelement');
        var animations = {
          'animation':'animationend',
          'OAnimation':'oAnimationEnd',
          'MozAnimation':'animationend',
          'WebkitAnimation':'webkitAnimationEnd'
        }

        for(t in animations){
            if( el.style[t] !== undefined ){
                return animations[t];
            }
        }
    }

    // Listen for animation
    var animationEvent = whichAnimationEvent(),
        progress = document.getElementsByClassName('progress-bar')[0];

    animationEvent && progress.addEventListener(animationEvent, function() {
        // Alert (to demonstrate the code works)
        alert('Animation complete!  This is the callback, no library needed!');

        // Redirect script
        window.location.replace('/path/to/url');
    });
});

See fiddle here: http://jsfiddle.net/teddyrised/9w7pntmt/3/