5个最佳网页加载进度条javascript插件 _插件

本文概述

5. Progressbar.js
4. Progress.js
3. Nanobar
2. NProgress
1. Pace.js

向用户显示任务的进度很重要, 特别是对于那些需要花费5秒钟以上才能完成的长任务。没有人愿意在执行操作并且没有任何建议的情况下卡在网页中。
以下库将通过几个文件和代码行来帮助你轻松显示任务的进度。其中一些是自动的, 将在执行ajax调用时被触发, 其他一些则需要通过自定义事件手动处理。
5. Progressbar.js Github |演示版
使用ProgressBar.js, 可以轻松地为Web创建响应式的时尚进度栏。动画甚至在移动设备上也表现良好。它提供了一些内置的形状, 如” 直线” , “ 圆” 和” 半圆” , 但你也可以使用任何矢量图形编辑器创建自定义形状的进度条。 ProgressBar.js是轻量级的, 已获得MIT许可, 并支持包括IE9 +在内的所有主要浏览器。加载进度不是自动的, 需要使用javascript进行更改。

文章图片
4. Progress.js Github |演示版
ProgressJs是一个JavaScript和CSS3库, 可帮助开发人员为页面上的任何对象创建和管理进度条。该插件不是自动的, 因为你需要通过javascript设置进度。
你可以为进度条设计自己的模板, 也可以简单地对其进行自定义。你可以使用ProgressJs向用户显示在页面上加载内容(图像, 视频等)的进度。它可以用于所有元素, 包括文本框, 文本区域甚至整个正文。它重量轻, 易于使用, 可定制, 免费和开源。

文章图片
3. Nanobar 【5个最佳网页加载进度条javascript插件】Github |演示版
Nanobar是一个非常轻量级的进度条。可惜的是加载进度也不是自动的, 但是如果你仅将其与javascript一起使用, 则此插件会派上用场, 因为你需要使用javascript设置进度, 因此可以在触发某些事件时更改它(在文件上传进度为例)。