`

div+css进度条

    博客分类：
  • web
阅读更多
在网上找了个div+css的进度条，稍加整理下，以便于以后使用
代码如下： 
<div style=" position:relative; border:1px #CCC solid; height:28px; width:500px; margin:0 auto; padding:1px">
	<div style=" background:#3F9; height:28px; width:50%"></div>
	<strong style=" position:absolute; width:500px; top:7px; text-align:center; overflow:hidden">50%</strong>
 </div>

具体变化只需要控制第二个div中的css的width,给他传一个百分值就ok了，这样就可以达到动态控制进度条了
0
顶
0
踩
分享到：
| java枚举在struts2中的应用
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    div+css进度条完美解决方案

    一个javaweb资源，使用div+css完美解决进度条，后天传输list，jsp就能生成进度条。

    整套完整版纯DIV+CSS网站模版

    Jquery模板蓝色模板html一套若干页，相当漂亮，对象比较全（进度条，按钮，标签等）基本上html中用到的对象都有了.(支持html5的浏览器可以正常访问)

    流程进度条(css+div+image)

    通过css+div 实现流程进度条的展示

    javascript+css实现进度条效果

    本文实例为大家分享了javascript+css实现进度条效果的具体代码，供大家参考，具体内容如下 主要是以样式实现进度条的效果，JavaScript控制显示的百分比 html模板 &lt;div class=progress_area&gt; ...

    asp+css+div请求状态条.rar

    仿手机QQ请求状态时的一个进度条，效果不错，asp+css+div请求状态条

    用CSS+JS实现的进度条效果效果

    进度条,就是在用户进入你的网站的时候,能让用户看到网页下载了多少,这个的作用非常明显—就是让用户的等待时间变长,可以有效...&lt;div u00a0id=”loading”&gt; ”loadcss”&gt; 33%&lt;/strong&gt; &lt;/div&gt; 好了,现在我们编写一下C

    css js 蒙板进度条(可移动)

    css加html实现的蒙板进度条 技术：js实现div层拖动技术，css样式和js实现蒙板，js实现进度条

    css 进度条的文字根据进度渐变的示例代码

    本文介绍了css 进度条的文字根据进度渐变的示例代码，分享给大家，具体如下： 需求 1.进度条里面的文字需要根据进度的长度而变化 原理 用两个一模一样的样式的 div 重叠起来 效果 字体开始为 蓝色，跟随进度条变为...

    HTML5/CSS3超酷进度条 不同进度多种颜色

    这是一款线条状的CSS3进度条，这款进度条有两个特点：一是随着进度条的进度更新，都会有数字百分比实时显示，让数据更加直观；二是在不同的进度阶段，进度条的颜色会有所变化，这样能更好的反应当前的进度状态。加上...

    html5＋css3 svg环形进度 多嵌套

    对于常用的环形进度条，网络上大多都是使用DIV，canvas 本人研究了这几种实现，最终采用SVG实现。 DIV环形进度条有毛边，而且无法多环嵌套。 canvas不适用移动段，有毛边。 本案例采用矢量图svg，完美。 10分良心分...

    CSS实现进度条和订单进度条

     CSS实现进度条： html结构： XML/HTML Code复制内容到剪贴板 &lt;div u00a0id=progress&gt;  &lt;span&gt;70%  &lt;/div&gt;  css样式： CSS Code复制内容到剪贴板 #progress{ width: 50%;  height: 30px; border:1...

    纯CSS3编写的的精美动画进度条(无flash/无图像/无脚本/附源码)

    加载动画和进度条的真正目的是让用户了解任务的进度，有很多的基于JavaScript的动画，但我决定切换到CSS3。 在本教程中，我决定制作动画的进度条，使用纯CSS：没有flash，没有图像，没有脚本。此外，我专注于寻找最...

    HTML5+CSS3网页加载进度条的实现，下载进度条的代码实例

    今天给大家带来一个比较炫的进度条，进度条在一耗时操作上给用户一个比较好的体验，不会让用户觉得在盲目等待，对于没有进度条的长时间等待，用户会任务死机了，毫不犹豫的关掉应用；一般用于下载任务，删除大量任务...

    基于CSS的进度条progre(c)ss.zip

    progre(c)ss 是纯 CSS 进度条，非常容易使用： 包括样式表 添加类 progrecss 到任意存在的元素中 添加数据属性 data-progrecss 定义完整百分比 (1 to 100) 和可选的数据属性 ，或者是用户希望的其他行为，位置...

    form表单填写进度条

    2.将进度条展示div放进页面,最好放在顶部: &lt;div class="top"&gt;&lt;div class="colors"&gt;&lt;/div&gt;&lt;/div&gt; 3.调用js函数 [removed] flash(); [removed] 4.在form标签添加class属性: class="form" 即可;

    html、css和jquery相结合实现简单的进度条效果实例代码

    主要介绍了html、css和jquery相结合实现简单的进度条效果的实例代码，这个进度条特别简单，首先html里面的话就是一个div里面嵌套一个div，然后写好想要的样式就行了，具有一定的参考借鉴价值，感兴趣的朋友一起看看...

    【JavaScript源代码】vue使用echarts画组织结构图.docx

    　这种需求，自己用div+css也是可以实现的，但是没有什么动画效果，我的css3又很差劲，而且项目中已经使用到了折线图、饼状图、柱状图之类的图表，用的还是百度的echarts，所以这个组织结构图之类的需求也就用了百度...

    非常精美的h5 进度条

    非常精美的h5 进度条 &lt;!doctype html&gt; ,chrome=1"&gt; , initial-scale=1.0"&gt; |DEMO_jQuery之家-自由分享jQuery、html5、css3的插件库 &lt;!--&lt;link rel="stylesheet" type="text/css" href="css/normalize.css" ...

    CSS实现进度条和订单进度条的示例

    最近半个月为了期末...CSS实现进度条： html结构： &lt;div id=progress&gt; &lt;span&gt;70% &lt;/div&gt; css样式： #progress{ width: 50%; height: 30px; border:1px solid #ccc; border-radius: 15px; margin: 50px 0 0 1

    CSS 说明横向进度条最后显示文字的实现代码

    在 div 标签中添加一个 relative 定位，然后使用绝对定位 absolute 在最右侧 &lt;div class=content&gt; &lt;div class=bar xss=removed&gt; &lt;span&gt;688 &lt;/div&gt; &lt;div class=bar xss=removed&gt; &lt;span&gt;688 &lt;/div&gt; &lt;div class...

Magicbox
Global site tag (gtag.js) - Google Analytics