1

//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.

niyasc
  • 4,440
  • 1
  • 23
  • 50
Alok Rajasukumaran
  • 381
  • 1
  • 5
  • 20
  • 1
    Also want to know this! http://jsfiddle.net/Katherina/9w7pntmt/ made a jsfiddle for you –  Mar 26 '15 at 10:03

2 Answers2

3

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/

Community
  • 1
  • 1
Terry
  • 63,248
  • 15
  • 96
  • 118
  • It works perfect in jsfiddle. but not on my server, Please press JS hint and see the errors. – Alok Rajasukumaran Mar 27 '15 at 05:08
  • 1
    @AlokRajasukumaran What error messages do you have in your browser console? If it works in a fiddle, it should work elsewhere as long as jQuery is loaded. `window.location.replace` only works for same-origin requests. And [**closing `;` are optional in JS when there is a linebreak**](http://www.codecademy.com/blog/78-your-guide-to-semicolons-in-javascript). That has nothing to do with the code working or not, only for consistency reasons. – Terry Mar 27 '15 at 05:41
  • may be the problem is that the js is not loading into my html. me all confused where it should load.gave a on body load and after body load still it don't work. :( – Alok Rajasukumaran Mar 27 '15 at 06:19
  • 1
    Wrap it in the `$(function() { ... });` [DOM ready handler](https://api.jquery.com/ready/). Since the JS will only be evaluated on DOM ready, you can place it anywhere, but **after** jQuery. – Terry Mar 27 '15 at 06:24
  • ., Can you please give the whole new set of code. am all confused about this as am a newbie in js. :P – Alok Rajasukumaran Mar 27 '15 at 07:33
  • Updated the code. But it would be advisavle that you read up on the basics of jQuery: http://jqfundamentals.com/chapter/jquery-basics and https://medium.com/coding-design/how-can-you-write-better-in-jquery-69788663201e – Terry Mar 27 '15 at 10:13
1

ok., i found the solution completely. if anyone have any issue with this please report.

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

function oload() {
    var animationEvent = whichAnimationEvent(),
      progress = document.getElementsByClassName('progress-bar')[0];

    animationEvent && progress.addEventListener(animationEvent, function() {
      window.location.replace("http://alokraj68.in");
    });
  }
  // Listen for animation
html,
body {
  height: 100%;
}
body {
  background-color: #f5f7f9;
  color: #6c6c6c;
  font: 300 1em/1.5em"Helvetica Neue", sans-serif;
  margin: 0;
  position: relative;
}
h1 {
  font-size: 2.25em;
  font-weight: 100;
  line-height: 1.2em;
  margin: 0 0 1.5em;
}
.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%;
  }
}
<html>

<head>
  <meta charset="UTF-8">
  <title>alokraj68.in--Loading!!</title>
  <link rel="stylesheet" href="css/loading.css">
  <script src="js/script.js"></script>
</head>

<body onload="oload()">
  <div class="container">
    <h1 class="text-center">alokraj68.in</h1>
    <h2 class="text-center">Loading</h2>
    <div class="progress">
      <div id="pb" class="progress-bar">
        <div class="progress-shadow"></div>
      </div>
    </div>
  </div>
</body>

</html>

Try this coding. if anyone finds any issues, please tell me.

Alok Rajasukumaran
  • 381
  • 1
  • 5
  • 20