使用javascript加载页面时的进度条(没有JQuery)
使用JavaScript加载页面时的进度条是一种在页面加载过程中显示进度的技术。它可以提供用户友好的交互体验，让用户知道页面加载的进度，并在加载完成后隐藏进度条。
实现这种进度条的方法有很多种，以下是一种基本的实现方式：
- 创建一个HTML元素作为进度条，可以是一个
<div>元素，设置其样式和位置。 - 使用JavaScript监听页面加载事件，例如
window.onload事件或DOMContentLoaded事件。 - 在事件处理函数中，获取页面加载的进度，可以使用
document.readyState属性来判断页面加载状态。 - 根据页面加载的进度，更新进度条的显示，可以通过改变进度条元素的宽度或其他样式属性来实现。
- 当页面加载完成后，隐藏进度条。
以下是一个简单的示例代码：
<!DOCTYPE html>
<html>
<head>
<style>
#progress-bar {
width: 0%;
height: 5px;
background-color: blue;
position: fixed;
top: 0;
left: 0;
transition: width 0.3s;
}
</style>
</head>
<body>
<div id="progress-bar"></div>
<!-- 页面内容 -->
<script>
var progressBar = document.getElementById('progress-bar');
function updateProgressBar() {
var progress = Math.floor((document.readyState / 4) * 100); // 根据页面加载状态计算进度
progressBar.style.width = progress + '%'; // 更新进度条宽度
}
document.addEventListener('readystatechange', function() {
if (document.readyState === 'complete') {
progressBar.style.display = 'none'; // 隐藏进度条
} else {
progressBar.style.display = 'block'; // 显示进度条
updateProgressBar();
}
});
</script>
</body>
</html>这个示例中，我们创建了一个高度为5像素的蓝色进度条，并使用updateProgressBar函数根据页面加载状态更新进度条的宽度。在页面加载完成后，我们隐藏进度条。
这种进度条可以应用于任何需要加载时间较长的页面，例如单页应用程序、图像库、视频网站等。它可以提供实时的加载进度反馈，改善用户体验。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云主页：https://cloud.tencent.com/
- 云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
- 云原生应用引擎（TKE）：https://cloud.tencent.com/product/tke
- 云存储（COS）：https://cloud.tencent.com/product/cos
- 腾讯云区块链服务（BCS）：https://cloud.tencent.com/product/bcs
- 腾讯云物联网平台（IoT Hub）：https://cloud.tencent.com/product/iothub
- 腾讯云移动开发平台（MTP）：https://cloud.tencent.com/product/mtp
相关·内容
4回答
带有ID的HTML样式类？
javascript、html、twitter-bootstrap
我目前有一个工作网站，其中包含一个进度条使用引导。我还有一个ID，它以以下格式从JSON加载数据：
在我的页面顶部，有下面的进度条代码：
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
style="width: 60%" id="progressbar&
浏览 7提问于2015-04-04得票数 1
回答已采纳
2回答
如何从angular 2中的另一个组件更新导航栏组件的css类
angular、typescript、angular2-routing
下面是我的进度条组件
@Component ({
selector: 'progress-bar',
templateUrl: './progress-bar.component.html',
styleUrls: ['./progress-bar.component.css']
})
export class ProgressBarComponent {
}
这是html文件
<div class="step-by-step">
<ul class="unstyl
浏览 3提问于2017-02-27得票数 0
1回答
更改%2进度条的过渡和样式
javascript、jquery、html、css、twitter-bootstrap-3
我正在使用bootstrap进度条来显示加载数据的进度，问题是我有2个进度条我想合并为一个(相同的div类)，第一个进度条只出现在第一个页面加载和数据到来之后，在我设置为隐藏的第一个进度条和第二个进度条我设置为显示，但隐藏和显示这2个进度条之间的过渡动画并不平滑，我想使进度条作为1 div，这样第二个进度条将
下面是进度条html代码：
<div id="progress2nd" class="progress" style="height:25px; background:transparent;"></div>
<
浏览 13提问于2016-08-22得票数 0
2回答
从线程中更新网页
asp.net、vb.net、multithreading、twitter-bootstrap
我有一个网页，它运行一个冗长的程序，除了在页面上显示进度之外，所有这些都是有效的。
我有以下进度条(Bootstrap)：
<div class="col-md-8">
<label for="product-feed-progress">Progress</label>
<div class="progress">
<div class="progress-bar" role="progressbar" runat="server
浏览 0提问于2017-06-29得票数 6
1回答
正在尝试更新JS文件中的进度栏
javascript、jquery、css
我正在尝试更新我的进度条，但它不允许我在名为updateProgressBar()的函数中执行；
function updateProgressBar(baby_due_date) {
window.location.href = "../../home.html";
//40 weeks of pregnancy
//Setting todays date
var todays_date = new Date();
//Finding the difference bewtween the dates by milli sec.
浏览 0提问于2018-10-01得票数 0
1回答
在Jquery进度条中显示百分比
jquery、ajax、twitter-bootstrap
我在我的页面中有一个动态更新的进度条，我想在它的中间显示百分比，但我不知道怎么做。这是我页面上的进度条：
<div class="progress progress-striped active">
<div id="prog" class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"
浏览 13提问于2017-07-27得票数 0
1回答
jQuery动态更改引导折叠组件中进度条"aria-valuenow“属性和CSS "width”属性的值
javascript、html、jquery、bootstrap-4、web-site-project
我的HTML中有这段代码。我可以问一下如何动态更改每个引导程序折叠组件中每个进度条的宽度吗？我的预期输出是，当我单击折叠组件时，它将显示其中的所有进度条，每个进度条都在进行，直到达到各自的期望值。 <p>
<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-cont
浏览 73提问于2021-10-13得票数 0
2回答
javascript函数不断刷新页面
javascript、html、.net、twitter-bootstrap
我有一个.net页面，我正在使用引导进度条来显示这样的值。
<div class="progress">
<div class="progress-bar progress-bar-striped active" id="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
prog
浏览 5提问于2015-08-03得票数 2
4回答
数据比较多，有什么好点的存储方案吗？
对象存储、文件存储
贵州地区，给公司做类似企业网盘的东西，存储数据大概在6~7T左右，有没有好点的存储方案呢？我看腾讯云这边有COS、CFS等，我是从网站直接读取数据，推荐那个？有没有什么试用渠道呢？
浏览 960提问于2017-09-15
1回答
如何使用路径点激活滚动条上的进度条？
javascript、css、twitter-bootstrap、jquery-waypoints、onscroll
我想激活我的进度条滚动和使用waypoints.js。但是，它不能工作，进度条在我滚动之前是“填充”的，或者()在滚动和页面加载上仍然是“空”的。
html：
<div id="progress-bar-start" class="center-block progress-wrapper">
<h4>UI/UX Design:</h4>
<div class="progress">
<div class="progress-bar" role=
浏览 1提问于2017-11-29得票数 0
回答已采纳
2回答
无法为jQuery UI进度条分配实际值
jquery、html、jquery-ui、jquery-ui-progressbar
我对jQuery UI进度条有一个问题。我的页面上有多个进度条(用于表示多步进度的堆叠进度条)，我有以下代码来启动进度条并分配值：
function createProgressBars(progressVal, progressValMax, callback) {
progressVal = $(this).data("progress-value");
progressValMax = $(this).data("progress-val-max");
$(".progress-bar").progressbar({
value
浏览 3提问于2013-12-20得票数 2
回答已采纳
1回答
动态增量引导进度条在一个php前端循环？
php、twitter-bootstrap、dynamic、progress-bar
我在php foreach循环中生成了大约150张发票(使用dompdf类)。完成页面/呈现需要40多个小时，所以我想知道我是否可以在foreach循环开始之前放置一个引导进度栏，在这个php foreach循环中，这个进度条的宽度应该会增加。
这个是可能的吗？用jquery？
<div id="foo" class="progress progress-striped active">
<div class="progress-bar" style="width: 1%"></div>
&
浏览 1提问于2014-06-05得票数 0
回答已采纳
1回答
Jquery进度条，需要在表单提交后显示(php和jquery)
php、jquery、jquery-ui、progress-bar
我遇到了一个涉及Jquery进度条和PHP的问题。这就是情况，
1)用户选择html表单中的一些字段，然后使用php发布。
2)从文章中检索数据，这些数据可以大到足以让页面加载几分钟(这就是我实现进度条的原因)。
3)当页面加载Jquery进度栏时，进度条会增加进度。
到目前为止，我已经安装了jquery进度条，但它只在页面加载时出现，而不是在加载过程中出现。
有什么帮助吗？
这是我的源代码示例
<?php
echo "<div id='progress-bar'></div>";
if (isset($_POST['
浏览 1提问于2012-06-14得票数 1
4回答
网页上的PHP进度条
javascript、php、jquery、ajax
我的php脚本中有这个片段，它显示了一个进度条。
<?php
echo '
<div class="progress progress-xlarge progress-striped active">
<div id="progress_bar" class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="50" aria-valuemin="0"
浏览 0提问于2015-08-24得票数 0
5回答
如何在AngularJS中显示进度条
angularjs
我是一个使用AngularJs framework的新手，而且我的英语也不是很好。所以我希望有人能帮我解决我的问题，别管我的语法了，哈哈。我很了解由ng-show触发的angularjs中的进度条，但如果我想在加载object标记之前放置一个进度条，该怎么办？例如
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="70"
aria-valuemin="0" aria
浏览 0提问于2016-11-07得票数 1
1回答
在按钮上增加Bootstrap进度栏
javascript、jquery、twitter-bootstrap
我用的是一个进度条和一个按钮。
我可以让进度条在Pageload上有一个设定值，但是我不能让它随着时间的增长使用按钮。我试着使用HTMl onClick和jQuery .click(函数()){徒劳无功，在过去的两个小时里一直试图这样做，但我放弃了。
进度条值是使用第二个div中的宽度%设置的。
HTML：
<div class="progress progress-striped active" style="width:400px;">
<div class="progress-bar" width="40%"
浏览 1提问于2014-01-22得票数 0
回答已采纳
4回答
如何使小div上的边界半径与大div相同。
html、css
我正在创建一个进度条，我的问题是:当%进度较低(宽度: 0-5%)时，边框半径看起来与较大时(宽度: 5-100%)不一样。
在下面的示例1中，您可以看到进度条是要查看的。
在示例2& 3中，当宽度较低时，您可以看到它的外观，从而导致进度条的边框半径与示例1的功能不同。
我认为我需要一种不同的方法来“切断”进展，而不仅仅是缩小宽度，但我无法想出任何简单的方法来做到这一点。有谁对如何改进这段代码有一个好主意吗？
注:我也有一个次级的“鬼”进度条，它经历了同样的问题，并使我试图保持它简单的尝试变得复杂。
我已经查过一些，但是他们也遇到了同样的问题。我看到的一些人完全通过从0%跳到5%来避免
浏览 1提问于2021-09-16得票数 3
回答已采纳
2回答
HTML、CSS和JS动画多个进度条
javascript、jquery、html、css、animation
因此，我尝试在一个页面上显示多个进度条，下面是进度条的HTML：
<div class="col-md-5">
<p>HTML & CSS</p>
<div class="progress progress-striped active">
<div class="progress-bar progress-bar-danger" style="width: 50%;"></div>
</div>
<p>
浏览 0提问于2015-06-30得票数 5
3回答
Google应用程序脚本进度条
google-apps-script
我正在尝试在Google应用程序脚本中创建一个进度条，当有人点击一个按钮( go )时，它将自动、缓慢地从开始到结束。你在Firefox下载窗口中看到的一些东西。这是我的代码。
function doGet(e) {
var app = UiApp.createApplication();
var progressPanel = app.loadComponent("progressbar_auto");
var gobutton =app.getElementById("go_btn");
var go_btn_handler =app.cr
浏览 0提问于2012-05-18得票数 1
回答已采纳
3回答
如何将div样式更改为来自数据库的值？
javascript、html、database、styles、progress-bar
我正在根据我希望从我的数据库中捕获的值创建一个进度条。而从这里开始，它由div style = width："?%“决定进度条的长度。如何从我的数据库中获取要输入的值？ <div class="container">
<h2>Basic Progress Bar</h2>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="70"
浏览 29提问于2019-01-23得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频活动推荐
腾讯云开发者
