我需要帮助在HTML文档中添加加载器。这是没有加载器的页面：
<!DOCTYPE html>
<html>
<head>
<title>Webpage</title>
</head>
<body bgcolor="#FFFFFF">
<script>
/*
Script goes here for the loader.
I think I might have an idea, I could use the "load" event.
*/
</script>
<style>
h1 {
color: green;
font: 24px Courier;
}
.css-format-class {
color: red;
font: 16px Arial;
}
</style>
<center>
<h1>My Simple Webpage</h1>
</center>
<br>
<p class="css-format-class">I wish I could add a loader GIF onto this page...</p>
<!--I need a loader somewhere in this webpage...-->
<!--If you know the solution, please feel free to comment.-->
</body>
</html>我在HTML5中找到了这段代码，但不知道如何让JavaScript操作这个标记：
<progress id="loader" value="0" max="100"></progress>
如果你知道怎么做，请告诉我。
获取对progress element的引用（例如使用document.getElementById()），然后更新value属性，该属性映射到同名属性。请参阅下面的代码片段进行演示，其中setInterval()用于每秒调用一个函数来更新值。
下面的代码等待，直到DOM准备就绪，通过添加事件监听器（使用document.addEventListener()）在事件DOMContentLoaded发生时添加回调。这样，它就不会在准备好之前尝试访问DOM中的元素（例如progress元素）。
var progress, date, interval;
// wait until DOM has been loaded to perform DOM Manipulations
document.addEventListener('DOMContentLoaded', function() {
date = Date.now(); //current timestamp since UNIX epoch
//get a reference to the progress element using its id attribute
progress = document.getElementById('loader');
interval = setInterval(updateProgress, 1000);
});
function updateProgress() {
msg.innerHTML = 'begin updateProgress() - progress.value = '+progress.value + "<br>" + msg.innerHTML;
if (progress.value >= 100) {
//stop running this function after value reaches 100 (percent)
clearInterval(interval);
}
var newDate = Date.now();
var milliseconds = newDate - date;
var seconds = Math.floor(milliseconds / 1000);
loader.value += seconds;
}<progress id="loader" value="15" max="100"></progress>
<div id="msg" style="max-height:100px;overflow-y: auto"></div>