progress 进度条组件

原型:

<progress
percent="[Float(0-100)]"
show-info="[Boolean]"
border-radius="[Number | String]"
font-size="[Number | String]"
stroke-width="[Number]"
activeColor="[Color]"
backgroundColor="[Color]"
active="[Boolean]"
active-mode="[backwards | forwards]"
>
</progress>

属性:

名称 是否必需 类型 默认值 说明
percent [Float] 百分比0~100
show-info [Boolean] false 是否在进度条右侧显示百分比
border-radius [Number / String] 0 圆角大小,单位px或rpx,默认为px (最低版本2.3.1)
font-size [Number / String] 16 右侧百分比字体大小,单位px或rpx,默认为px (最低版本2.3.1)
stroke-width [Number / String] 6 进度条线的宽度,单位px或rpx,默认为px
activeColor [Color] #09BB07 进度条颜色
backgroundColor [Color]   未选择的进度条的颜色
active [Boolean] false 进度条从左往右的动画
active-mode [backwards | forwards] backwards

进度值更新时,动画如何播放

backwards: 动画从0开始播放;

forwards:动画从上次结束点接着播;

【progress】 进度条组件说明的更多相关文章

  1. 微信小程序组件解读和分析:六、progress进度条

    progress进度条组件说明: 进度条,就是表示事情当前完成到什么地步了,可以让用户视觉上感知事情的执行.progress进度条是微信小程序的组件,和HTML5的进度条progress类似. pro ...

  2. vue+element UI + axios封装文件上传及进度条组件

    1.前言 之前在做项目的时候,需要实现一个文件上传组件并且需要有文件上传进度条,现将之前的实现过程简单记录一下,希望可以帮助到有需要的人. 项目用的是Vue框架,UI库使用的是element UI,前 ...

  3. 详解Bootstrap进度条组件

    在网页中,进度条的效果并不少见,如:平分系统.加载状态等,进度条组件使用了css3的transition和animation属性来完成一些特效,这些特效在IE9及IE9以下版本.Firefox的老版本 ...

  4. 手把手教你实现一个 Vue 进度条组件!

    最近在个人的项目中,想对页面之间跳转的过程进行优化,想到了很多文档或 npm 等都用到的页面跳转进度条,于是便想自己去实现一个,特此记录. 来看下 npm 搜索组件时候的效果: so 下面咱们一起动手 ...

  5. Android学习笔记(24):进度条组件ProgressBar及其子类

    ProgressBar作为进度条组件使用,它还派生了SeekBar(拖动条)和RatingBar(星级评分条). ProgressBar支持的XML属性: Attribute Name Related ...

  6. 基于Vue的事件响应式进度条组件

    写在前面 找了很多Vue 进度条组件!,都不包含拖拽和点击事件,input range倒是原生包含input和change事件,但是直接基于input range做进度条的话,样式部分需要做大量调整和 ...

  7. 【Android 应用开发】 自定义 圆形进度条 组件

    转载著名出处 : http://blog.csdn.net/shulianghan/article/details/40351487 代码下载 : -- CSDN 下载地址 : http://down ...

  8. 数字进度条组件NumberProgressBar

     数字进度条组件NumberProgressBar NumberProgressBar是一款数字进度条组件.它不仅可以通过进度条的变化展现进度,还可以通过跟随文字精确表示进度值.开发者可以对进度条进行 ...

  9. vue 的进度条组件

    先看效果: 要想实现如上图的,进度跳效果,有两种方式,首先介绍第一种: 1.自己用 div 写一个,代码如下 <template> <div class="mfc-slid ...

随机推荐

  1. shrio的rememberMe不起作用

    在移植项目.每次重启服务器需要登录.比较麻烦.于是研究下shrio的功能. rememberMe大概可以满足我的需求.但是跟着网上配置了.不起作用...... 于是乎查看源代码拉.java的好处... ...

  2. ECS centos6.8系统下从nginx安装到简单网站上线配置操作的完整记录

    1.准备工作 1.1已购买阿里云云服务器ECS 1.2域名已购买并解析成功 1.3安装有远程链接工具Xshell和文件传输工具Xftf,并链接上ECS实例 2.安装nginx(在Xshell操作) 2 ...

  3. sharePoint中简单的父页面跳转子页面代码!

    1,SharePoint中挺简单的一个父页面跳转到子页面的Js代码!常常用到,每次都到以前的项目中去找代码,挺麻烦! (1)父页面代码. function imgAddParentclick() { ...

  4. python 输入一个整数,判断其是否既是3的倍数,又是5的倍数

    v = int(input('请输入一个整数:')) if v % 3 == 0 and v % 5 ==0: print(v,'即是3的倍数又是5的倍数') else: print('不是3或5的倍 ...

  5. 2017年终总结&展望2018年

    转眼就要挥别2017年了,也看到好多人都在叹时间过得好快.对啊,在我的印象中时间过得慢的时期恐怕只有中小学期间了,转眼研究生阶段已经过了一半.如今这个阶段,很多时候忙任务和学东西好不容易觉得自己摸到点 ...

  6. DBUtils 学习使用

    DBUtils 学习使用 commons-dbutils简介 commons-dbutils是Apache组织提供的一个开源JDBC工具类库,它是对JDBC的简单封装,学习成本极低,并且使用dbuti ...

  7. jQuery语法、选择器、效果等使用

    1.jQuery语法 1.1 基础语法:$(selector).action( ) 美元符号定义 jQuery 选择符(selector)“查询”和“查找” HTML 元素 jQuery 的 acti ...

  8. 虚拟机下linux 系统网卡配置、固定IP地址

    1.进入该目录下修改内容 vi       /etc/sysconfig/network-scripts/  ifcfg-eth0 TYPE=Ethernet BOOTPROTO=static DEF ...

  9. PHPExcel 导入Excel数据 (导出下一篇我们继续讲解)

    一:使用composer下载 phpoffice/phpexcel 或者直接下载安装包 composer require phpoffice/phpexcel 二 1:导入数据 原理:读取文件,获取文 ...

  10. MapReduce之Map Join

    一 介绍 之所以存在Reduce Join,是因为在map阶段不能获取所有需要的join字段,即:同一个key对应的字段可能位于不同map中.Reduce side join是非常低效的,因为shuf ...