在百度上搜了很多方法去修改HTML5 progress的样式,然而并没有实现。
所以自己用div实现了一个。

简单粗暴(*^-^*)  可以在CSS里改样式,可以JS里改进度。

<div class="timepro">
<div class="timepro-go" style="width:10%"></div>
</div>
.timepro{
height:5px;
background:#ccc;
width:95%;
border-radius:10px;
-webkit-border-radius:10px;
position: relative;
}
.timepro-go{
width:0%;
background:#000;
height:5px;
border-radius:10px;
-webkit-border-radius:10px;
position: relative;
transition: all 10s;
-webkit-transition: all 10s;
}

使用div实现progress进度条的更多相关文章

  1. bootstrap3的 progress 进度条

    : 2.3版               3.0版 .bar .progress-bar .bar-* .progress-bar-* 2.代码: <!DOCTYPE html PUBLIC & ...

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

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

  3. 微信小程序 progress 进度条 内部圆角及内部条渐变色

    微信小程序progress进度条内部圆角及渐变色 <view class="progress-box"> <progress percent="80&q ...

  4. android中progress进度条的使用

    activity.xml: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" ...

  5. progress 进度条

      进度条.  属性名 类型 默认值 说明 percent Float 无 百分比0~100 show-info Boolean false 在进度条右侧显示百分比 stroke-width Numb ...

  6. progress进度条的样式修改

    由于公司在做的公众号上需要进度条,我就想着用progress标签,可是progress标签很难修改样式,因而在网上查询了一番. 现在总结一下. progress是H5新标签,主要用于显示进度条.由于他 ...

  7. div实现圆环进度条

    <!DOCTYPE html> <html> <head> <meta charset="{CHARSET}"> <title ...

  8. [Cocos2d-x For WP8]Progress 进度条

    Cocos2d-x可以有多种进度条的展示方式,进度条的种类是根据进度条运动的方向来区分,包括顺时针,逆时针,从左到右,从右到左,从下到上和从上到下6种方式,这和WP8的进度条是由很大的区别的.那么Co ...

  9. js jq 实现鼠标经过div背景以进度条方式 变宽,鼠标离开变小,同时文字颜色和原来不一样

    <!DOCTYPE html> <html> <head> <title></title> <script typet="t ...

随机推荐

  1. (原创)像极了爱情的详解排序二叉树,一秒get

    排序二叉树(建立.查找.删除) 二叉树我们已经非常熟悉了,但是除了寻常的储存数据.遍历结构,我们还能用二叉树做什么呢? 我们都知道不同的遍历方式会对相同的树中产生不同的序列结果,排序二叉树就是利用二叉 ...

  2. 时间动态协同过滤(TimeSVD++)

    原作者 原论文地址 http://citeseerx.ist.psu.edu/viewdoc/download?doi=10.1.1.379.1951&rep=rep1&type=pd ...

  3. MySQL训练营03

    [任务四] #任务时间# 请于4月6日22:00前完成,在[打卡表格]处打卡.逾期尚未打卡的会被清退. 4.1 MySQL 实战 #学习内容# 数据导入导出 将之前创建的任意一张MySQL表导出,且是 ...

  4. [leetcode-634-Find the Derangement of An Array]

    In combinatorial mathematics, a derangement is a permutation of the elements of a set, such that no ...

  5. 使用ValueOperations操作redis

    方法 c参数 s说明   void set(K key, V value); key :字段key value:key对应的值  设置一个key和value   void set(K key, V v ...

  6. 基于Thinkphp5+phpQuery 网络爬虫抓取数据接口,统一输出接口数据api

    TP5_Splider 一个基于Thinkphp5+phpQuery 网络爬虫抓取数据接口 统一输出接口数据api.适合正在学习Vue,AngularJs框架学习 开发demo,需要接口并保证接口不跨 ...

  7. php静态文件缓存示例

    //开始缓冲区 ob_start(); $cache_file = "./cache/4.3-static.html"; $cache_time = 1; //设置缓存更新时间 i ...

  8. 在VS2012中设置默认启动

    Visual Studio 2012一个解决方案中多个项目,如果想选择哪个项目就设置哪个项目为启动项就好了. 第一种方法,工具===〉〉选项===〉〉〉项目解决方案===〉〉〉对于新的解决方案,使用单 ...

  9. [洛谷P1887]乘积最大3

    题目大意:请你找出$m$个和为$n$的正整数,他们的乘积要尽可能的大.输出字典序最小的方案 题解:对于一些数,若它们的和相同,那么越接近它们的乘积越大. 卡点:无 C++ Code: #include ...

  10. [洛谷P3743]kotori的设备

    题目大意:ことり有$n$个设备,每个设备每秒共减少$a_i$能量(也就是说每一瞬间都在减少,而不是在一个时刻突然减少),开始前有$b_i$能量,ことり还有一个充电宝,无限能量,每秒共可以提供$p$的能 ...