文章学习分享

跳转网页加载进度条源码

创新博客作者 2023年7月13日 0 评论 886 阅读

首页 › 学习分享 ›正文

只需要复制下面代码即可实现

直接上代码这里用的是bootstrap

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>进度条跳转其他网页</title>
  <link href="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.2.3/css/bootstrap.min.css" rel="stylesheet">
  <style>
    .progress {
      height: 20px;
    }

    .progress-bar {
      transition: width 3s ease-in-out;
    }
  </style>
</head>

<body>
  <div class="progress">
    <div id="progress-bar" class="progress-bar" role="progressbar" style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
  </div>

  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script>
    $(document).ready(function () {
      // 获取进度条元素
      var progressBar = $("#progress-bar");

      // 设置进度条宽度为100%，动画过渡时间为3秒
      progressBar.css("width", "100%");
      progressBar.attr("aria-valuenow", 100);

      // 3秒后跳转到其他网页
      setTimeout(function () {
        window.location.href = "https://ssl.goolibao.com";
      }, 3000);
    });
  </script>
</body>

</html>

版权说明

文章采用：《署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)》许可协议授权。
版权声明：未标注转载均为本站原创，转载时请以链接形式注明文章出处。如有侵权、不妥之处，请联系站长删除。敬请谅解！