<style>
#loading {
width: 0%;
height: 20px;
background-color: #4caf50;
transition: width 0.3s linear;
}
</style>
<body>
<div id="loading"></div>
</body>
<script>
async function loadUser(api) {
let i = 0;
for (const apiFunc of api) {
let user = await apiFunc();
let progress = ((i + 1) / api.length) * 100;
loading.style.width = progress + "%";
loading.innerHTML = Math.floor(progress) + "%";
i++;
}
}
const getUserId = () => {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(1);
}, 1000);
});
};
const getUserName = () => {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve("zhangsan");
}, 1000);
});
};
const getAddress = () => {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve("beijing");
}, 1000);
});
};
loadUser([getUserId, getUserName, getAddress]);
