Jquery 我如何在一个链接中打开一个循环加载器4秒，然后再打开一个新页面？

我想点击下一步的按钮，然后发生两件事： 1）在屏幕中部显示一个大约4秒的圆形加载器，之后 2） 在同一选项卡中显示新页面。 我受不了。我试过使用这段代码，但它当然没有运行。也许还需要一些jquery，我不知道

我的HTML是：

<a href="#modalloader (for 4 sec)" href="new_page.html (in the same tab after 4sec)" class="btn">
    NEXT <i class="fa fa-arrow-right"></i>
</a>
<div id="modalloader">                                                                                        
  <div class="loader-block">
     <div class="loader"></div>
     <div class="stop">STOP</div>
  </div>
</div>

---

有什么想法吗

您可以通过以下方式实现：

创建一个包含圆加载器的

div

，并给它一个ID（在本例中我将使用

circle\u lodr

），然后在CSS中将div的

z索引设置为负值（负值不被接受为
z-index
，因此在我们稍后更改
z-index
的值之前，它不会显示在页面上）。然后在CSS中将其
不透明度设置为0

现在，我们将添加一点javascript（记住，您还需要jQuery来实现这一点）：

就在这里。
您需要使用。
.modalloader{
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,0.4);
}

.loader-block{
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -90px;
  margin-left: -100px;
}

.loader {
  border-radius: 50%;
  border-top: 4px solid #2d4371;
  border-bottom: 4px solid #2d4371;
  border-right:4px solid #2d4371;
  border-left:4px solid #9A9999;
  width: 170px;
  height: 170px;
  animation: spin 3s linear infinite;
}

.stop{
  position: absolute;
  top: 30%;
  left: 45px;
  width: 100%;
  font-size: 50px;
  color: #2d4371;
  font-weight: bold;
  text-shadow: 3px 2px #506184;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

$(/*insert jQ selector for the button that activates the thingie*/).click(function(){
  var $loader = $("#circle_lodr"/*your DIV*/);
  $loader.css("zIndex",999);/*any value that would put it on top*/
  /*trigger the circular loading animation here*/
  $loader.animate({
    opacity: 1
  },{
    duration:/*some duration in ms, I recommend 500*/,
    queue:false;/*usual settings ;)*/
  });

  setTimeout(function(){
    document.location.href="";/*replace this empty string with a string containing the url*/
  }, 4000);/*4000ms <=> 4s, will wait 4s before switching to the page, I used the document.location.href because you wanted to stay on the same page, if not read about window.open()*/
});

$(document).ready(function(){
  /*the func*/
});