HTML5实现的页面加载效果

在HTML5中，可以使用以下几种方法实现页面的加载效果：

1. 使用<progress>标签显示一个进度条：

<progress value="0" max="100" id="pg"></progress>
<script>
    var progressBar = document.getElementById('pg');
    var value = 0;
 
    function updateProgress() {
        value += 10;
        progressBar.value = value;
        if(value < 100) {
            setTimeout(updateProgress, 100);
        }
    }
 
    setTimeout(updateProgress, 100);
</script>

2. 使用CSS动画创建一个自定义加载器：

<div class="loader"></div>
<style>
    @keyframes rotate {
        from {
            transform: rotate(0deg);
        }
        to {
            transform: rotate(360deg);
        }
    }
 
    .loader {
        border: 4px solid #f3f3f3; /* Light grey */
        border-top: 4px solid #3498db; /* Blue */
        border-radius: 50%;
        width: 40px;
        height: 40px;
        animation: rotate 2s linear infinite;
    }
</style>

3. 使用JavaScript和CSS创建一个渐变加载器：

<div class="loader"></div>
<style>
    .loader {
        border: 4px solid #f3f3f3; /* Light grey */
        border-top: 4px solid #3498db; /* Blue */
        border-radius: 50%;
        width: 40px;
        height: 40px;
        animation: spin 2s linear infinite;
    }
 
    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }
</style>

这些例子展示了如何在HTML5页面中实现简单的加载效果。开发者可以根据自己的需求选择合适的方法，并进行相应的样式和行为调整。