构建一个简单的进度条

你可能会在面试 Web 开发职位（尤其是前端职位）时遇到这个问题。我会解释如何在几分钟内创建一个进度条来完美应对。

剧透：您可以使用 CSS 在一分钟内完成；）

步骤 1：创建结构

使用纯 HTML 和 CSS 创建进度条，如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Progress Bar Tutorial</title>
    <style>
        .progress-bar-wrapper {
            width: 500px;
            height: 50px;
            background-color: #D5C67A;
            margin: 20px 0;
        }
        .progress-bar {
            height: 100%;
            width: 0%;
            background-color: #06A77D;
        }
    </style>
</head>
<body>
    <div class="progress-bar-wrapper">
        <div class="progress-bar"></div>
    </div>
    <button onclick="load_something(1)">Load</button>
</body>
</html>

这将导致以下空进度条：

您已经可以通过手动将宽度从0%增加到10%等等来测试它！

里面有一个按钮，它会触发函数load_something(1)并传递秒数作为值。在本例中，我们传递的是 1 秒作为值。

我们将在下一步中创建该功能。

第 2 步：添加 JavaScript

在结束标签前添加以下 JS 代码body：

<script>
    function load_something(seconds) {
        const progress_bar = document.querySelector('.progress-bar')
        let percent = 0
        const interval = setInterval(() => {
            percent += 1
            progress_bar.style.width = percent + '%'
            if (percent > 100) {
                clearInterval(interval)
            }
        }, (seconds * 1000)/100);
    }
</script>

该load_something函数将执行以下步骤：

选择具有该类的元素progress-bar。
设置percent为 0。
创建一个每隔重复一次的间隔seconds/100。在每次迭代中，它将根据的值设置进度条的宽度percent，然后将该percent值加 1。
percent只有当大于时才会清除该间隔100。

它看起来是这样的：

步骤 3：使用 CSS

如果我告诉你，使用 CSS 可以完全省去第二步，你会怎么想？方法如下：

<script>
    function load_something(seconds) {
        const progress_bar = document.querySelector('.progress-bar')
        progress_bar.style.transition = `${seconds}s linear width`
        progress_bar.style.width = '100%'
    }
</script>

这将实现相同的结果，但我个人更喜欢这个，因为它更干净并且用 CSS 完成（而不是可能有点混乱的间隔）。

请在评论中告诉我你对此的看法。

文章来源：https://dev.to/omkarscode/build-a-simple-progress-bar-4kcl