在百度上搜了很多方法去修改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. LeetCode - 66. Plus One(0ms)

    Given a non-empty array of digits representing a non-negative integer, plus one to the integer. The ...

  2. Python 3 学习笔记之——面向对象

    1. 类的介绍 类(Class) 用来描述具有相同的属性和方法的对象的集合.它定义了该集合中每个对象所共有的属性和方法.对象是类的实例,类是对象的抽象. 方法:类中定义的函数. 类变量:类变量在整个实 ...

  3. xshell连接不到虚拟机,安装ssh服务

    刚安装的虚拟机镜像是Ubuntu 16.04版本,防火墙已经关闭. 测试: 检查虚拟机分配的ip地址. 1.虚拟机ping宿主机:可以ping通 2.宿主机ping虚拟机:可以ping通 3.检查网络 ...

  4. EM算法浅析(一)-问题引出

    EM算法浅析,我准备写一个系列的文章: EM算法浅析(一)-问题引出 EM算法浅析(二)-算法初探 一.基本认识 EM(Expectation Maximization Algorithm)算法即期望 ...

  5. Jquery tmpl详解

    Jquery tmpl是动态请求数据来更新页面非常常用的方法,比如博客评论的分页动态加载,微博的滚动加载和定时请求加载等. 这些情况下,动态请求返回的数据一般不是已拼好的 HTML 就是 JSON 或 ...

  6. servlet入门(1)

    第一个servlet类 1.编写一个java类,继承HttpServlet类 2.重写doget和dopost方法 3.Servlet程序在tomcat服务器运行 第一步:找到server窗口,并新建 ...

  7. 【Linux】——搭建nexus

    1.安装 前提条件: JDK已经安装,运行java -version查看. 将本地下载好的nexus存放到linux上,存放路径为 /usr/local/software.可使用winscp直接拷贝. ...

  8. 【python】Python 字典(Dictionary)操作详解

    Python字典是另一种可变容器模型,且可存储任意类型对象,如字符串.数字.元组等其他容器模型.一.创建字典字典由键和对应值成对组成.字典也被称作关联数组或哈希表.基本语法如下: dict = {'} ...

  9. LeetCode--Remove Linked List Element

    Remove all elements from a linked list of integers that have value val. ExampleGiven: 1 --> 2 --& ...

  10. [APIO2018] New Home

    题面在这里 description 在一个数轴上: 给定\(n\)个商店,每个商店有一个开业时间,关门时间,坐标和销售物品的种类 同时有\(m\)个询问,每个询问给你一个时间\(t[i]\)和地点\( ...