javascript - 使用 javascript/jquery 在 div 顶部的进度条加载器-6ren

javascript - 使用 javascript/jquery 在 div 顶部的进度条加载器

转载作者：太空宇宙更新时间：2023-11-04 00:54:53

24

4

我正在尝试添加一个进度条(类似于 pace.js 进度条)。问题是当浏览器刷新时，pace.js progressbar 加载到 body 的顶部，而不是 div 的顶部。加载程序不应在浏览器刷新时加载，而是在单击按钮和顶部的 div 时加载。

目标是实现类似加载器的方式——当我们登录 Google 时；顶部有一个进度条。我正在尝试实现类似的功能。

我试过使用 pace.js。但是，如果有其他一些更可配置和更灵活的库可用，欢迎使用以解决问题。

function createDiv(event) {
  event.target.disabled = true;
  var html = '';
  html += '<div id="paceProgressBarBox" style="background:#ccc;width:200px;height:200px;"></div>';
  $('#myDiv').append(html)
  // add pace progress bar at the top of id="paceProgressBarBox"  and stop pace progress bar loading on browser referesh // instead show pace progress bar on click of button
  var pace;
  pace.options.target = '#paceProgressBarBox';
  pace.start();
}

.pace {
  -webkit-pointer-events: none;
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.pace-inactive {}

.pace .pace-progress {
  background: #2299dd;
  position: relative;
  z-index: 2000;
  right: 100%;
  width: 100%;
  height: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pace/1.0.2/pace.js">
</script>
<br/>
<button onclick="createDiv(event)">Change Content</button>
<div id="myDiv" style="width:200px;height:200px;"></div>

最佳答案

<body>元素作为附加进度条的元素被硬编码到 pace.js 中。
但是，您可以使用 target 覆盖它设置(似乎没有出现在 documentation 中)。

有两种方式设置target :

配置 paceOptions加载步速脚本之前的变量:

paceOptions = {
  target: '#myDiv'
}

工作示例:

    #myDiv {
      width: 200px;
      height: 200px;
    }

    .pace .pace-progress {
      position: relative;
      background: #2299dd;
      z-index: 2000;
      right: 100%;
      width: 100%;
      height: 5px;
    }

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>

    <script>
      paceOptions = {
        target: '#myDiv'
      }
    </script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/pace/1.0.2/pace.js">
    </script>

    <button>Change Content</button>
    <div id="myDiv"></div>

在其<script>中配置进度条标签:

<script src=".../pace.js" data-pace-options='{ "target": "#myDiv" }'></script>

工作示例:

    #myDiv {
      width: 200px;
      height: 200px;
    }

    .pace .pace-progress {
      position: relative;
      background: #2299dd;
      z-index: 2000;
      right: 100%;
      width: 100%;
      height: 5px;
    }

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/pace/1.0.2/pace.js" data-pace-options='{ "target": "#myDiv" }'>
    </script>

    <button>Change Content</button>
    <div id="myDiv"></div>

引用:
Pace Configuration
Specify Location of Indicator

编辑:

要防止 Pace 在页面加载时自动启动，请设置 startOnPageLoad设置为 false :

jQuery('#changeContent').on('click', createDiv);

#myDiv {
  width: 200px;
  height: 200px;
}

.pace .pace-progress {
  position: relative;
  background: #2299dd;
  z-index: 2000;
  right: 100%;
  width: 100%;
  height: 5px;
}

#paceProgressBarBox {
  background: #ccc;
  width: 200px;
  height: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>

<script>
  var paceOptions = {
    'startOnPageLoad': false,
    'target': '#paceProgressBarBox'
  }

  function createDiv(event) {
    event.target.disabled = true;
    var $progBarBox = $('<div>', {
      'id': 'paceProgressBarBox'
    });
    $('#myDiv').append($progBarBox);
    Pace.start();
  }
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/pace/1.0.2/pace.js">
</script>

<button id="changeContent">Change Content</button>
<div id="myDiv"></div>

另见:
Pace's source code获取完整的选项列表
How to stop pace js plugin to run on page load

关于javascript - 使用 javascript/jquery 在 div 顶部的进度条加载器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55008762/

24

4

0

文章推荐： html - 为什么我的导航栏顶部有一个空白区域？

文章推荐： javascript - css 剪辑路径只悬停在形状上

文章推荐： html - 检查 radio 时检查文本颜色

文章推荐： javascript - 如何使 Jquery-Confirm 的滚动条更宽？

jquery - 在我的网页上显示动态数据(进度)
我正在开发一个在 gridview 中显示数据表内容的网页。而且，还有一个名为“发送到 Excel”的按钮。如果用户单击此按钮，该程序将开始生成报告(将数据表内容写入 excel 文件)。完成后，会出
javascript - promise 进度
理论:我在开始时做出了大约 100 个 promise ，然后使用 Promise.all() 解决它们。这 100 个 promise 中的每一个依次进行一些异步 REST 调用，其响应可能主要不
Python tarfile 进度
在将文件添加到 python 中的 tar 存档时，是否有任何库可以显示进度，或者可以扩展 tarfile 模块的功能来执行此操作？在理想情况下，我想展示 tar 创建的总体进度以及关于何时完成的预
xcode - 进度 View xcode的高度
有没有办法在 Xcode 中更改进度 View 栏的高度？我正在使用 Xcode 4.3 并且需要一个垂直进度条。我旋转了栏，但现在无法更改高度并且显示为一个圆圈。还有一种更有效的旋转进度条的方法
Swiftui 进度 View 隐藏
您好，我想在栏按钮项上制作未确定的进度 View 。完成后我想让它隐藏，但 hidden() 方法没有像 disabled(Bool) 这样的参数。任务完成后如何隐藏进度 View ？这就是我要的
Django - 显示 Action 进度
我有一个管理员控制的功能(导入数据库)可能需要一些时间才能完成，所以我想在这段时间内向用户显示一些反馈 - 例如进度条，或者只是一些消息。即使在长时间的 Action 中分部分发送页面也足够了。在
progress-4gl - 进度 if 语句
我是一个进步的菜鸟，实际上在基本 block 方面有问题。下面的问题是在我的 if else 语句中。它在 if, then, else then 时工作正常，但是当我想将多个语句放入 if 部分时
unix - 如何在没有回车的情况下显示日志文件的 rsync 进度？
我有一个来自 rsync 命令的日志文件，其中有进度。运行此进度时，会更新同一行上的显示信息。当我捕获此命令的输出时，我得到一个在终端上使用 cat 正常显示的文件(重播所有退格键和重新编辑)但我希望
delphi - 如何显示长时间过程的 GUI 进度？
我需要处理一些数据，每 5-10 秒显示一个进度(我以 % 显示进度，但我也更新了一些图表)。我想在没有多线程的情况下做到这一点。循环可能相当大。它可以从数百万开始，可以高达数十亿。我可以使用 G
javascript - 重新加载页面而不影响 YouTube 进度
我正在致力于使用 PHP、HTML 和 JavaScript 制作半直播互联网 channel 。您可以在此处查看演示:http://mariocreative.host/chanelko/inde
wpf 动画加载 'dot' 进度
我实际上正在使用图像为“点点点”进度设置动画。我想通过使用下面的代码来使用不透明度。动画将持续 3 秒，有没有更简单的动画方法？最佳答案这是一个快速版本，它会在控
c - 如何在C中保存do...while状态/进度？
我写了这个程序，它返回用户插入的最大整数。现在，我希望程序返回第二大整数。我创建了一个新变量(称为“状态”)，该变量应该在每次循环重复时增加 1 个单位。然后，在中断条件发生后，我将在状态变量中后退
java - 是否可以在没有外部文件的情况下保存 Java 进度？
我正在制作一个需要保存进度的java游戏。但我不想让外部文件保存进度(像《我的世界》这样的游戏有一个存储文件的“保存”目录)。所以基本上我希望它存储一些数据，当用户退出并再次返回时可以检索这些数据。比
android - 获取 RenderScript 进度
我正在使用 forEach_root 方法在 Android 上计算图像。 RenderScript RS=RenderScript.create(context); Allocation inPix
ios - 进度 View 循环
我希望这个进度 View 在完成后基本上“重置”。尝试将计数重置为 0，它确实重置了，但是对于每次重置，计时器只会变得越来越快。 .h @property (nonatomic, strong) N
java - Wicket - 进度/多个标签更新
我不确定这是否可能。当您单击“提交”按钮时，似乎有一种方法可以做到这一点。 private Button getButton(String id) { return new AjaxButto
ios - 在循环期间更新 UIProgressBar 进度
我找不到关于如何在迭代循环时更新 UIProgressbar 进度的明确答案，例如: for (int i=0;i
ios - 进度 View 翻转和缩放
我正在尝试在 Xcode 中翻转 UIProgressView 180，同时我正在尝试缩放进度 View 。在我添加翻转之前缩放效果很好，然后缩放不再起作用。有什么建议么？谢谢! [self.seco
ios - 进度 HUD 显示太晚
我目前正在通过评估 prepareForSegue 中的 segue.identifier 动态加载新 View : - (void)prepareForSegue:(UIStoryboardSegu
ios - 进度 View 无限步？
当任意进程发生时，我需要在屏幕上为用户提供状态。我无法知道需要多长时间。我怎样才能永远增加 progressView (当它接近 1 时它会减慢)。最佳答案 This如果您愿意更换进度 View ，

首页

博学

6Ren·AI

商城

javascript - 使用 javascript/jquery 在 div 顶部的进度条加载器

编辑: