У меня есть индикатор выполнения HTML и CSS. теперь мне нужно то, что он должен загрузить полную страницу. любые способы?

Question

// Вот мой HTML Что мне нужно, так это то, что при полной загрузке индикатора выполнения он должен перенаправляться на другую страницу. любые способы для этого? !!!!

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

помочь мне !! И у меня нет java-скрипта здесь. Я был бы более счастлив, если бы смог сделать это без java-скрипта. , пожалуйста, помогите мне с этим.

UPDATE обнаружил, что ява скрипт конца анимации может помочь.

Answer 1

Просто используйте this trick highlighted by David Walsh. Он сделал это для transitionend, но вместо этого мы можем обменять его на animationend.

Его трюк состоит в том, чтобы прокрутить список всех связанных с вендором и родных событий animationend и проверить, поддерживает ли браузер какой-либо из них. Затем он прикрепляет распознанный обработчик animationend к интересующему элементу.

Когда событие анимации уволено, мы просто перенаправляем URL-адрес интереса, используя window.location.replace(), as mentioned before.

Я изменил его так, что это будет работать для сценария:

$(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'); 
    }); 
}); 

См скрипку здесь:. http://jsfiddle.net/teddyrised/9w7pntmt/3/

Answer 2

нормально, я полностью нашел решение. если у кого есть какие-либо проблемы, сообщите пожалуйста.

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>

Попробуйте эту кодировку. если кто-нибудь обнаружит какие-либо проблемы, сообщите мне.