ProgressBar是一种常用的加载提示效果，可以在H5页面中使用来展示页面加载的进度。以下是一个简单的示例代码：
<!DOCTYPE html>
<html>
<head>
<title>ProgressBar加载提示</title>
<style>
#progressBar {
width: 100%;
height: 5px;
background: #f0f0f0;
position: fixed;
top: 0;
left: 0;
z-index: 9999;
}
#progressBar .bar {
width: 0;
height: 100%;
background: #3498db;
transition: width 0.3s;
}
</style>
</head>
<body>
<div id="progressBar">
<div class="bar"></div>
</div>
<!-- 页面内容 -->
<script>
window.onload = function() {
document.getElementById('progressBar').style.display = 'none';
};
window.addEventListener('load', function() {
document.getElementById('progressBar').style.display = 'block';
});
window.addEventListener('progressBar', function() {
var progressBar = document.querySelector('#progressBar .bar');
var max = document.body.scrollHeight - window.innerHeight;
var value = (window.pageYOffset / max) * 100;
progressBar.style.width = value + '%';
});
</script>
</body>
</html>
在这个示例中，我们使用了一个固定在页面顶部的ProgressBar来展示页面加载进度。当页面加载完成时，ProgressBar消失；当页面正在加载时，根据滚动条的位置计算加载进度，并实时更新ProgressBar的宽度。
你可以根据自己的需求对ProgressBar的样式和行为进行定制，使其更加符合页面的设计风格。希望这个示例对你有帮助！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
