ProgressBar在H5页面中的加载提示

发布时间：2024-08-16 13:01:27 作者：小樊
来源：亿速云阅读：78

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的样式和行为进行定制，使其更加符合页面的设计风格。希望这个示例对你有帮助！

ProgressBar在H5页面中的加载提示

相关阅读