疯狂的技术宅

以前出于工作目的,编写和翻译了大量的技术文章,以前端为主,删掉了过时的、毫无营养的内容,留下的都是精华。


  • 首页

  • 分类

  • 标签

  • 归档

  • 关于本站

  • 回到主站

  • 搜索

推荐 8 个漂亮的 vue.js 进度条组件

时间: 2020-04-10 分类: 前端技术   字数: 929 字 阅读: 2分钟
标签: #vue# #进度条# #组件#
  • 本文译自:https://jquerypluginsfree.com/8-nice-progress-bars-component-with-vue.js/
  • 译者:疯狂的技术宅

为大家精心挑选了 8 个漂亮的 Progress Bars 组件,并附上 GitHub 链接和 vue.js 代码示例。

1.easy-circular-progress

一个简单的循环进度组件,带有计数效果。

img

作者:dreambo8563

Github:https://github.com/dreambo8563/easy-circular-progress


2.vuejs-progress-bar

vue.js 专用的 ProgressBar,基于SVG 矢量图形。有直线、圆和圆柱 3 种模式:

img

作者:larsmars

Github:https://github.com/larsmars/vuejs-progress-bar


3.Vue Spinner Component

可自定义的轻量级旋转器图标组件。

你可以通过设置其属性来自定义颜色、大小、深度、旋转方向和速度等。所有的属性均具有默认值。你可以通过设置其状态来控制它的显示或隐藏。

img

Github:http://github.com/sergeyloysha/vue-spinner-component


4.VUE ARC COUNTER

该 Vue 组件在圆弧中生成计数器。其中角度、颜色、笔划宽度、虚线之间的间距以及方向都可以通过属性进行控制。

img

Github:https://github.com/snirp/vue-circle-counter


5.vue-simple-progress

简单灵活的进度条。vue-simple-progress 设计为轻量级的 Vue.js 进度条,只需要很少的配置就能使用。

img

Github:https://github.com/dzwillia/vue-simple-progress


6.vue-wait

Vue 和 Vuex 可用的多进程加载进度管理。该项目以前名为 vuex-loading。

vue-wait 能够帮你管理页面上的多个加载状态,而不会发生任何冲突。它基于一个“非常简单的想法”,可以管理具有多个加载状态的阵列(或可选的 Vuex 存储)。通过内置的加载组件侦听其注册的 loader 即可立即变为加载状态。

img

Github:http://github.com/f/vue-wait


7.vue-progress-path

支持自定义 SVG 路径的可自定义进度指示器和旋转器图标。

img

Github:http://github.com/Akryum/vue-progress-path


8.vue-simple-spinner

简单灵活的旋转器图标。vue-simple-spinner 设计为轻量级的 Vue.js 旋转器图标,需要的配置最少。

img

Github:http://github.com/dzwillia/vue-simple-spinner

标签: #vue# #进度条# #组件#

标题:推荐 8 个漂亮的 vue.js 进度条组件

链接:https://fe-tech.viewnode.com/post/202004/10/

作者:疯狂的技术宅

声明: 本博客文章除特别声明外,均采用 CC BY-NC-ND 4.0 国际许可协议( 知识共享署名-非商业性使用-禁止演绎 4.0),转载请注明出处!

V8 中的指针压缩
让 JavaScript 与 CSS 和 Sass 对话
  • 文章目录
  • 站点概览
疯狂的技术宅

疯狂的技术宅

退休程序员,硬件发烧友,人工智能爱好者。写写代码喝喝茶,晒晒太阳带带娃。

457 日志
8 分类
583 标签
GitHub
友情链接
  • viewnode
  • mofish
标签云
  • Javascript 172
  • Node.Js 62
  • Vue 36
  • Typescript 28
  • 实战项目 28
  • 面试 21
  • React 20
  • Css 17
  • 面试题 16
  • 教程 13
  • Promise 12
  • Chrome 9
  • Debug 9
  • 调试 9
  • 资源 9
  • Deno 8
  • Dom 8
  • 杂谈 8
  • 正则表达式 8
  • 测试 8
© 2018 - 2022 疯狂的技术宅 All Rights Reserved
Powered by - Hugo v0.99.0 / Theme by - NexT
Storage by 俺的服务器 / 冀ICP备2022010157号
0%