创新互联百度小程序教程：progress 进度条

  • progress 进度条
    • 属性说明
    • 示例
      • 代码示例 1：默认样式
      • 代码示例 2：显示当前百分比
      • 代码示例 3：设置颜色
      • 代码示例 4：设置宽度、外圆角
      • 代码示例 5：设置宽度、内圆角
      • 代码示例 6：显示动画

    progress 进度条

    解释：进度条。

    成都创新互联是一家专业提供麟游企业网站建设,专注与成都网站建设、网站建设、H5技术、小程序制作等业务。10年已为麟游众多企业、政府机构等服务。创新互联专业的建站公司优惠进行中。

    属性说明

    percent

    Float

    0

    否

    百分比 0~100%

    show-info

    Boolean

    false

    否

    在进度条右侧显示百分比

    stroke-width

    Number/String

    2

    否

    进度条的高度（单位：px）

    border-radius

    Number/String

    0

    否

    圆角大小（单位：px）

    3.150.1

    font-size

    Number/String

    16

    否

    右侧百分比字体大小（单位：px）

    3.150.1

    color

    Color

    #09BB07

    否

    进度条颜色（推荐使用 activeColor）

    activeColor

    Color

    #09BB07

    否

    已选择的进度条的颜色

    backgroundColor

    Color

    #E6E6E6

    否

    未选择的进度条的颜色

    active

    Boolean

    false

    否

    进度条从左往右的动画

    active-mode

    String

    backwards

    否

    backwards：动画从头播；forwards：动画从上次结束点接着播

    duration

    Number

    20

    否

    进度增加 1% 所需毫秒数

    3.150.1

    属性名类型默认值必填说明最低版本

    示例

    跳转编辑工具

    在开发者工具中打开

    在 WEB IDE 中打开

    扫码体验

    代码示例

    请使用百度APP扫码

    代码示例 1：默认样式

    • SWAN
     
 
 
        
  
  
      2.   
  
  
    2.  
      3.   
  
  
    3.  默认样式
      4.   
  
  
    4.  
      5.   
  
  
    5.  
      6.   
  
  
      7.

    代码示例 2：显示当前百分比

    • SWAN
     
 
 
        
  
  
      2.   
  
  
    2.  
      3.   
  
  
    3.  
      4.   
  
  
    4.  显示当前百分比
      5.   
  
  
    5.  show-info
      6.   
  
  
    6.  
      7.   
  
  
    7.  
      8.   
  
  
    8.  
      9.   
  
  
    9.  
      10.   
  
  
      11.

    代码示例 3：设置颜色

    • SWAN
     
 
 
        
  
  
      2.   
  
  
    2.  
      3.   
  
  
    3.  
      4.   
  
  
    4.  设置颜色
      5.   
  
  
    5.  activeColor="#00BC89"
      6.   
  
  
    6.  
      7.   
  
  
    7.  
      8.   
  
  
    8.  
      9.   
  
  
      10.

    代码示例 4：设置宽度、外圆角

    • SWAN
    • CSS
     
 
 
        
  
  
      2.   
  
  
    2.  
      3.   
  
  
    3.  
      4.   
  
  
    4.  设置宽度、外圆角
      5.   
  
  
    5.  border-radius="90" stroke-width="7"
      6.   
  
  
    6.  
      7.   
  
  
    7.  
      8.   
  
  
    8.  
      9.   
  
  
    9.  
      10.   
  
  
      11.

    代码示例 5：设置宽度、内圆角

    • SWAN
    • CSS
     
 
 
        
  
  
      2.   
  
  
    2.  
      3.   
  
  
    3.  
      4.   
  
  
    4.  设置宽度、内圆角
      5.   
  
  
    5.  
      6.   
  
  
    6.  
      7.   
  
  
    7.  
      8.   
  
  
      9.

    代码示例 6：显示动画

    • SWAN
     
 
 
        
  
  
      2.   
  
  
    2.  
      3.   
  
  
    3.  显示动画
      4.   
  
  
    4.  
      5.   
  
  
    5.  
      6.   
  
  
    6.  
      7.   
  
  
      8.

    网站栏目：创新互联百度小程序教程：progress 进度条
    标题链接：http://www.shufengxianlan.com/qtweb/news27/191677.html

    网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

    广告

    声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

    猜你还喜欢下面的内容

    静态网站知识

    同城分类信息

    网站建设　　 　服务器租凭　　 　成都品牌网站建设　　 　百度推广公司　　 　成都网站优化　　 　成都画册设计公司　　 　重庆水土双线托管　　 　网站改版　　 　企业手机网站建设　　 　瑞杰管理　　 　葆金莱自动门　　 　犀浦防护栏定制　　 　网络营销推广　　 　成都名片印刷　　 　成都小程序开发　　 　无边发光字制作　　 　蜀锦在线　　 　成都定制高级网站建设　　 　简阳网站建设　　 　响应式建站