网络应用程序进度指示器

在当代的开发环境中，人们都知道，一个好的网页设计必须遵循一些预设的准则，才能有一个直观的用户界面/体验。

确保用户拥有一个良好的UI/UX的最好方法之一就是使用进度指示器。进度指示器向用户显示他们在系统中的进展，例如，在登录、上传文件或下载文件的时候。

本文通过开发一个网络项目来解释进度指示器的好处，以展示这一概念。

进度指示器对UI/UX的贡献

用户界面和交互定义了一个给定的网页是否容易和友好地使用以达到预期的目的。同样，按照惯例，一个系统的用户需要了解系统中正在发生的事情，以及他们行动的结果，他们才会认为用户界面/用户界面友好。

进度指标的类型

有几种进度指标的分类。然而，最相关的一种分类是将它们分为决定性的和非决定性的。

决定性的进度条是显示一个操作的完成程度的进度指标。

另一方面，非决定性的进度指示器是不确定的，因为它们不披露一个任务离完成的程度。这些进度指标主要用于加载网页时，因为这个过程取决于几个变量，如网络速度。

项目设置

为了演示进度指示器的作用，我将建立一个单页应用程序，将文件上传到本地存储，并实时显示上传的进度。

我们将为一个progress bar 和percentage of completion 指标做演示。通过这两个实现，你将掌握进度指标的概念。

这个项目对于初学者和高级开发人员来说都很简单。我们将使用JavaScript来编写函数，用CSS来设计网页的样式，用HTML来建立实际的网页。

构建网页

要开始，先创建你的项目文件夹，然后在其中添加三个文件。

第一个文件应该命名为index.html 。这个文件包含网页及其组件所需的所有HTML标签。
第二个文件，style.css ，负责包含CSS定义，为网站的HTML组件设置样式。
最后一个文件是script.js ，它包含确保进度指示器按预期工作的功能。

在index.html 文件的头部标签下面添加以下片段。

<body>
  <div class="wrapper">
    <header>Progress Indicators Project</header>
    <form action="#">
      <input class="file-to-upload-input" type="file" name="file" hidden />
      <i class="fas fa-cloud-upload-alt"></i>
      <p>Click here to select file to upload</p>
    </form>
    <section class="upload-progress-section"></section>
    <section class="uploaded-area"></section>
  </div>
  <script src="script.js"></script>
</body>

我已经在这里上传了CSS 文件。它描述了网页的所有组成部分，下面是应用CSS样式后的网页的样子。

CSS styling result

该网页有一个定义了要上传的文件的表格。当该区域被点击时，系统允许用户选择要上传的文件。

一旦选择了文件，系统就会将文件上传到本地存储，随着进度条被绿色填满，表明完成的程度。

使用JavaScript的工作

JavaScript是这个项目的核心。它决定了如何为我们的函数编写脚本，以敷衍前面描述的预定动作。

第一步是导入我们需要从网页上工作的各种组件。导入是根据你给HTML组件的类名的方式进行的。

从我的html 文件中，我将使用form,file-to-upload,upload-progress-area 和uploaded-files-area 类名。这些是我们在JavaScript文件中需要的主要组件。

const uploadForm = document.querySelector("form"),
  fileToUpload = document.querySelector(".file-to-upload"),
  uploadProgressArea = document.querySelector(".progress-area"),
  uploadedFilesArea = document.querySelector(".uploaded-files-section");

接下来，我们给表单添加一个on click() 方法，这样当我们把鼠标悬停在表单上时，就可以点击任何地方来调用一个函数来选择要上传到缓冲区的文件。

//add click event to the form
uploadForm.addEventListener("click", () => {
  fileToUpload.click();
});

选择文件的函数

注意，我们没有一个提交按钮。因此，一旦我们的文件被选中（点击），它也会启动另一个函数，onchange ，获得要上传的文件的名称，如果它太长，不适合upload-progress-area 和uploaded-files-area 部分，则截断它。

之后，uploadfile 函数被调用以继续进行。

fileToUpload.onchange = ({ target }) => {
  let file = target.files[0];
  if (file) {
    // name of the file to upload
    let fileToUploadName = file.name;

    //check the length of the name and trancate accordingly
    if (fileToUploadName.length >= 12) {
      let splitName = fileToUploadName.split(".");
      fileToUploadName = splitName[0].substring(0, 13) + "... ." + splitName[1];
    }

    // call the upload function
    uploadFile(fileToUploadName);
  }
};

Selecting file

上传文件功能

这里是大部分工作完成的地方。首先，由于我们已经有了要上传的文件，我们需要找到一种方法来计算实时上传的大小，并将这种计算方法转化为用户界面上的渐进式实时更新。

由于这是一个渐进式的事件，我们将使用一个progress 事件监听器，只要文件没有完全上传，就不断地触发这个函数。

function uploadFile(name){
    //We use `XMLHttpRequest()` to retrieve the file without having to refresh webpage.
    let specialRequets = new XMLHttpRequest();

    //Initializes a request.
    specialRequets.open("POST", "");

    // progress event listener
    specialRequets.upload.addEventListener("progress", ({loaded, total}) =>{
        let fileLoaded = Math.floor((loaded / total) * 100);
        let fileTotal = Math.floor(total / 1000);
         let fileSize;
        (fileTotal < 1024) ? fileSize = fileTotal + " KB" : fileSize = (loaded / (1024*1024)).toFixed(2) + " MB";
    });

    // the upload progress html
    ...

}

上传进度HTML

本节描述了网站在上传过程中的行为。首先，我们取上面步骤中计算出的百分比并逐步显示。我们还显示文件名。

最后，我们采取更新的数值并将其转换为一个进度条，定期更新。

let progressHTML = `<li class="row">
                    <i class="fas fa-file-alt"></i>
                    <div class="content">
                        <div class="details">
                        <span class="name">${name} • Uploading</span>
                        <span class="percent">${fileLoaded}%</span>
                        </div>
                        <div class="upload-progress-bar">
                        <div class="progress" style="width: ${fileLoaded}%"></div>
                        </div>
                    </div>
                    </li>`;
uploadedFilesArea.classList.add("onprogress");
uploadProgressArea.innerHTML = progressHTML;

Uploading The file

当整个文件被上传后，我们检查并更新网页，显示一个打勾的图标，并将ploadProgressArea 为空。这个刻度线告诉用户上传过程已经完成，他可以继续进行下面的操作。

if (loaded == total) {
  //set the progress area to empty and disply finished tick icon
  uploadProgressArea.innerHTML = "";
  let uploadedHTML = `<li class="row">
                            <div class="content upload">
                            <i class="fas fa-file-alt"></i>
                            <div class="details">
                                <span class="name">${name} • Uploaded</span>
                                <span class="size">${fileSize}</span>
                            </div>
                            </div>
                            //display the check icon
                            <i class="fas fa-check"></i>
                        </li>`;
  uploadedFilesArea.classList.remove("onprogress");

  // add the uploaded html to be the contents of the uploaded files area
  uploadedFilesArea.insertAdjacentHTML("afterbegin", uploadedHTML);
}

progress finished check

进度指标的应用

进度指示器在网页中有着广泛的应用。

它们给用户一个估计，即他们执行的行动已经进行了多长时间。
通过显示完成的程度，进度指示器可以确定一个特定活动的执行速度，例如，上传速度。
通过告知用户他们行动的进度，用户可以看到系统是如何执行的，而不是被排除在外，不知道系统的行动是怎么回事。

总结

在这篇文章中，我们讨论了在应用程序中设置一个进度条的好处。我们进一步寻求进度条对应用程序的UI/UX的贡献，以及它是如何提高用户满意度的。

我们还建立了一个网络项目，并添加了一个进度指示器来模拟文件的上传过程。

学习网络应用程序进度指标