js实现加载进度条

<div id="progress-container">
    <div id="progress-bar"></div>
</div>

#progress-container {
    width: 100%;
    background-color: #f3f3f3;
    border: 1px solid #ccc;
    border-radius: 5px;
    overflow: hidden;
}

#progress-bar {
    height: 20px;
    width: 0%;
    background-color: #4caf50;
}

function loadFile(url) {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', url, true);
    xhr.responseType = 'blob';

    xhr.onprogress = function(event) {
        if (event.lengthComputable) {
            var percentComplete = (event.loaded / event.total) * 100;
            document.getElementById('progress-bar').style.width = percentComplete + '%';
        }
    };

    xhr.onload = function() {
        if (xhr.status === 200) {
            console.log('File loaded successfully');
            // 处理加载完成的文件
        }
    };

    xhr.send();
}

// 使用函数加载文件
loadFile('path/to/your/file');