17HUI - 进度条(hui-progress)

简介: 17HUI - 进度条(hui-progress)

效果图

image.png

示例代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>HUI</title>
<link rel="stylesheet" type="text/css" href="../css/hui.css" />
</head>
<body>
<header class="hui-header">
    <div id="hui-back"></div>
    <h1>HUI 进度条</h1>
</header>
<div class="hui-wrap">
    <div class="hui-common-title" style="margin-top:15px;">
        <div class="hui-common-title-line"></div>
        <div class="hui-common-title-txt">进度条演示</div>
        <div class="hui-common-title-line"></div>
    </div>
    <div style="padding:28px;">
    <div style="text-align:right; padding:5px 0px;">60%</div>
    <div class="hui-progress" id="progress1">
        <span></span>
    </div>
    <div style="padding:5px 0px; padding-top:80px; text-align:center;">
        带有动画的进度条
    </div>
    <div style="text-align:right; padding:5px 0px;">20%</div>
    <div class="hui-progress" id="progress2">
        <span></span>
        <div class="hui-progressing"></div>
    </div>
   </div>
</div>
<script src="../js/hui.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
hui.ready(function(){
    hui('#progress1').progressBar(60);
    hui('#progress2').progressBar(20);
});
</script>
</body>
</html>
目录
相关文章
|
API 索引 容器
Harmony 个人中心(页面交互、跳转、导航、容器组件)(下)
Harmony 个人中心(页面交互、跳转、导航、容器组件)(下)
446 0
|
安全 NoSQL 关系型数据库
使用cnpm搭建企业内部私有NPM仓库
cnpm是企业内部搭建npm镜像和私有npm仓库的开源方案。它同时解决了现有npm架构的一些问题。
1100 0
使用cnpm搭建企业内部私有NPM仓库
|
机器学习/深度学习 数据可视化 算法
【33】t-SNE原理介绍与对手写数字MNIST的可视化结果
【33】t-SNE原理介绍与对手写数字MNIST的可视化结果
973 0
【33】t-SNE原理介绍与对手写数字MNIST的可视化结果
JeecgBoot 短信验证码接口,如何实现防刷机制?
短信接口防刷,主要通过两个方面来实现:一个是短信接口加签和时间戳;另外针对短信接口,增加防刷 check 机制
259 1
|
存储 运维 负载均衡
Heartbeat+Nginx实现高可用集群
通过Heartbeat与Nginx的结合,您可以建立一个高可用性的负载均衡集群,确保在服务器故障时仍能提供无中断的服务。这种配置需要仔细的计划和测试,以确保系统在故障情况下能够正确运行。
183 2
|
10月前
|
JavaScript 前端开发 Go
异步加载 JS 的方法
【10月更文挑战第24天】异步加载 JavaScript 是提高网页性能和用户体验的重要手段。通过使用不同的方法和技术,可以实现灵活、高效的异步加载 JavaScript。在实际应用中,需要根据具体情况选择合适的方法,并注意处理可能出现的问题,以确保网页能够正常加载和执行。
|
11月前
|
小程序
uniapp实现微信小程序隐私协议组件封装
uniapp实现微信小程序隐私协议组件封装
214 0
|
存储 编译器 C语言
结构体类型的结构在内存的存储
结构体类型的结构在内存的存储
|
传感器 数据采集 物联网
技术经验解读:【物联网】I2C(IIC)通信协议详解与应用
技术经验解读:【物联网】I2C(IIC)通信协议详解与应用
740 0
|
缓存 JavaScript
Vue框架中报 npm ERR code EINTEGRITY
在使用taro 安装依赖包的时候,经常出现npm ERR! code EINTEGRITY的问题,应该是npm本地的缓存造成的。
510 0
Vue框架中报 npm ERR code EINTEGRITY