纯css制作的漂亮好看的进度条

最新推荐文章于 2024-03-11 15:59:42 发布
最新推荐文章于 2024-03-11 15:59:42 发布
阅读量1.1k 收藏
点赞数
分类专栏： CSS

http://www.jb51.net/css/27189.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 

<html> 
<head> 
<title> new document </title> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<style> 
.process-bar 
{ 
width:100px; 
display:inline-block; 
*zoom:1; 
} 
.pb-wrapper 
{ 
border:1px solid gray; 
border-style:solid none; 
position:relative; 
background:#cfd0d2; 
} 
.pb-container 
{ 
border:1px solid gray; 
border-style:none solid; 
height:12px; 
position:relative; 
left:-1px; 
margin-right:-2px; 
font:1px/0 arial; 
padding:1px; 
} 
.pb-highlight 
{ 
position:absolute; 
left:0; 
top:0; 
_top:1px; 
width:100%; 
opacity:0.6; 
filter:alpha(opacity=60); 
height:6px; 
background:white; 
font-size:1px; 
line-height:0; 
z-index:1 
} 
.pb-text 
{ 
width:100%; 
position:absolute; 
left:0; 
top:0; 
text-align:center; 
font:10px/12px arial; 
} 
.pb-value 
{ 
height:100%; 
width:50%; 
background:#19d73d; 
} 
.pb-text 
{ 
color:black; 
} 
.grid 
{ 
border-collapse : collapse ; 
font:12px/1.5 arial; 
background:white; 
border:1px solid gray; 
width:500px; 
} 
.grid td, 
.grid th 
{ 
padding:5px 
} 
.grid th 
{ 
background:#eee; 
color:black; 
text-align:left; 
font-weight:normal 
} 
</style> 
</head> 
<body> 
<table cellpadding="0" cellspacing="0" border="1" class="grid" rules="rows" frame="void"> 
<tr> 
<th> 
项目ID 
</th> 
<th> 
项目名称 
</th> 
<th> 
开始时间 
</th> 
<th> 
项目进度 
</th> 
</tr> 
<tr> 
<td> 
#200912110001 
</td> 
<td> 
项目管理系统 
</td> 
<td> 
2010-12-01 
</td> 
<td> 
<div class="process-bar"> 
<div class="pb-wrapper"> 
<div class="pb-highlight"></div> 
<div class="pb-container"> 
<div class="pb-text">99%</div> 
<div class="pb-value" style="width:99%"></div> 
</div> 
</div> 
</div> 
</td> 
</tr> 
<tr> 
<td> 
#2009654001 
</td> 
<td> 
ERP 
</td> 
<td> 
2010-12-01 
</td> 
<td> 
<div class="process-bar"> 
<div class="pb-wrapper"> 
<div class="pb-highlight"></div> 
<div class="pb-container"> 
<div class="pb-text">10%</div> 
<div class="pb-value" style="width:10%"></div> 
</div> 
</div> 
</div> 
</td> 
</tr> 
<tr> 
<td> 
#200916540001 
</td> 
<td> 
OA 
</td> 
<td> 
2010-12-01 
</td> 
<td> 
<div class="process-bar"> 
<div class="pb-wrapper"> 
<div class="pb-highlight"></div> 
<div class="pb-container"> 
<div class="pb-text">89%</div> 
<div class="pb-value" style="width:89%"></div> 
</div> 
</div> 
</div> 
</td> 
</tr> 
<tr> 
<td> 
#20091214501 
</td> 
<td> 
河蟹养殖系统 
</td> 
<td> 
2010-12-01 
</td> 
<td> 
<div class="process-bar"> 
<div class="pb-wrapper"> 
<div class="pb-highlight"></div> 
<div class="pb-container"> 
<div class="pb-text">54%</div> 
<div class="pb-value" style="width:54%"></div> 
</div> 
</div> 
</div> 
</td> 
</tr> 
<tr> 
<td> 
#200912110001 
</td> 
<td> 
项目管理系统 
</td> 
<td> 
2010-12-01 
</td> 
<td> 
<div class="process-bar"> 
<div class="pb-wrapper"> 
<div class="pb-highlight"></div> 
<div class="pb-container"> 
<div class="pb-text">99%</div> 
<div class="pb-value" style="width:99%"></div> 
</div> 
</div> 
</div> 
</td> 
</tr> 
<tr> 
<td> 
#2009654001 
</td> 
<td> 
ERP 
</td> 
<td> 
2010-12-01 
</td> 
<td> 
<div class="process-bar"> 
<div class="pb-wrapper"> 
<div class="pb-highlight"></div> 
<div class="pb-container"> 
<div class="pb-text">10%</div> 
<div class="pb-value" style="width:10%"></div> 
</div> 
</div> 
</div> 
</td> 
</tr> 
<tr> 
<td> 
#200916540001 
</td> 
<td> 
OA 
</td> 
<td> 
2010-12-01 
</td> 
<td> 
<div class="process-bar"> 
<div class="pb-wrapper"> 
<div class="pb-highlight"></div> 
<div class="pb-container"> 
<div class="pb-text">89%</div> 
<div class="pb-value" style="width:89%"></div> 
</div> 
</div> 
</div> 
</td> 
</tr> 
<tr> 
<td> 
#20091214501 
</td> 
<td> 
河蟹养殖系统 
</td> 
<td> 
2010-12-01 
</td> 
<td> 
<div class="process-bar"> 
<div class="pb-wrapper"> 
<div class="pb-highlight"></div> 
<div class="pb-container"> 
<div class="pb-text">54%</div> 
<div class="pb-value" style="width:54%"></div> 
</div> 
</div> 
</div> 
</td> 
</tr> 
</table> 
</body> 
</html> 
mituan1234567
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
现代 CSS 高阶技巧，完美的波浪进度条效果。
sybh的博客
11-28 1135
好了，本文到此结束，希望本文对你有所帮助 :)如果还有什么疑问或者建议，可以多多交流，原创文章，文笔有限，才疏学浅，文中若有不正之处，万望告知。
肝了两宿才收集的17个超炫酷的 CSS 动画加载与进度条特效，绝对值得收藏！！！
热门推荐
Amo Xiang的博客
06-23 1万+
文章目录一、圆形加载动画二、上下跳动的圆球加载动画三、3D立体加载动画四、饼图加载动画五、多色圆点波动效果的加载动画六、制作顺时针放大的圆圈加载动画七、制作小圆圈轮流放大的加载动画八、制作竖条加载动画九、制作水波扩散效果加载动画十、制作逆时针逐渐放大多点加载动画十一、制作形状变化的加载动画十二、实现动态前进的阴影进度条十三、椭圆形进度条加载十四、彩色进度条加载效果十五、环形加载动画十六、制作斑马线样式的进度条十七、程序加载页面 一、圆形加载动画 1、实例描述：浏览网页时，难免会有网页加载慢的情况，当网页长时
CSS3渐变进度条效果 ​
wangxinwang996的博客
04-14 1246
7.给body标签添加动画效果,实现背景渐变的效果背景颜色,随着滚动条的颜色进行改变,滚动条颜色变化,背景颜色跟随变化.6.整个效果分为三步我们先让它快起来,再让它慢起来,设置背景色渐变,红色-黄色-深黄色。<h1>CSS3渐变进度条效果</h1>3.设置CSS3渐变进度条效果字体样式效果。同步使用关键帧动画，并且时间要保持一致。背景色黑色，背景色动画渐变时常5s。4.设置进度条外矩形块的样式和位置。CSS3渐变进度条效果。5.设置进度条显示效果。
10种动态进度条用css3实现
Mr_jianghanlin的博客
04-21 2089
用css做的10种动态进度条，喜欢可以直接去用话不多说先看效果图： 实现上图的，最主要的就是应用了css动画属性@keyframes和animation属性结合应用 下面看看语法： @keyframes @keyframes animationname {keyframes-selector {css-styles;}} animationname 必需的。定义animation的名称...
纯css进度条，简单美观实用。
最新发布
qq_34716929的博客
03-11 497
html：在style里给 “–precent”赋值，就能显示对应百分比。
HTML+CSS制作的进度条
03-10
总结一下，本案例中我们学习了如何使用HTML和CSS创建一个漂亮的进度条，包括定义HTML结构、CSS样式以及使用JavaScript动态更新进度。这个基础的进度条设计可以作为起点，通过添加更多的细节和功能，可以进一步提升...
漂亮的jQuery橙色进度条插件.zip
11-26
总的来说，"漂亮的jQuery橙色进度条插件"是一个结合了jQuery、HTML5、CSS和JavaScript技术的前端组件，它利用了这些技术的优点，创建了一个既实用又美观的进度条效果。对于前端开发者来说，研究这个插件的源代码可以...
CSS+JS制作的按钮
05-13
在压缩包中的"漂亮水晶质感导航条矢量素材"文件，很可能是用于制作按钮的背景图。矢量素材的优势在于其无限的缩放能力，无论放大多少倍都不会失真，非常适合用作UI元素的图形。设计师可以将这些矢量素材应用到CSS的...
原生 css 实现进度条
逆风优雅的博客
04-07 4357
方案一：通过data控制它的样式 方案二：通过js控制进度条
CSS实现漂亮的进度条
03-03
这是一款用CSS实现的进度条效果，各种颜色彰显时尚。
可以随进度显示不同颜色的css3进度条分享
12-13
一款进度条，它的外观是一条直线，末端有个小球，在进度变化时可以显示数字百分比，更可以用不同颜色来表示当前进度的状态。来看看效果图。 接下来我们来分析一下这款HTML5进度条的实现源码，篇幅有限，我们只挑核心的代码来说。 HTML代码很简单，构造一个进度条容器和数字百分比容器： 复制代码代码如下:0 首先我们来对进度条的容器进行样式渲染，利用CSS3的渐变属性来实现不同进
CSS3自定义滚动条
abigflower的博客
08-23 313
<html lang="en"><head> <meta charset="UTF-8"> <title>CSS3自定义滚动条</title> <style> header { font-family: 'Lobster', cursive; text-align: center; font-size: 25px;...
html与css实现炫酷进度条
2305_76372875的博客
02-20 437
进度条演示
html如何做滑动门效果,JavaScript实现滑动门效果
weixin_39879881的博客
06-03 599
本文实例为大家分享了JavaScript实现滑动门效果的具体代码，供大家参考，具体内容如下一、什么是滑动门首先你要了解什么是滑动门。生活中我们经常看到一些网站或是商城有一些滑动门的效果那么怎么实现一个简单的滑动门的网页特效呢？下面简单分享一下方法,二、实现滑动门所需技术1、简单的HTML基础知识2、简单的CSS基础样式3、基本的javascript知识三、如何实现滑动门(重点)准备好一段HTML代...
重构-滑块(拉动条)
weixin_43294560的博客
11-27 246
实现: hooks实现 动画: 提示框渐变显示 参数: disabled: PropTypes.bool, 禁用 onChange: PropTypes.func, 拉动回调,第一个参数是进度数值,防抖默认200毫秒 value: PropTypes.number, 初始进度值,0-10 sliderHeight:PropTypes.string, 滑块高度 sliderWdith: PropTypes.string, 滑块宽度 sliderColor: PropTypes.str
html5简单动画效果代码,分享12个简洁漂亮的纯CSS3进度条特效动画代码
weixin_32943417的博客
06-03 2098
进度条是很常用的一个用户体验项，用于表示事件的处理或加载状态，制作这些loading进度条我们通常会使用GIF图片来实现，但是这方法也有一些弊端，比如我要放大或改变颜色，这样就不好处理了。 要解决这些问题最好就是用代码来实现了，现在CSS3已经流行起来，我们是否也尝试一下用CSS来实现呢？方法是有的，而且很简单，看看下面这12个使用纯CSS3编写的进度条，loading图标和动画都很棒！如下图：这...
CSS好看的百分比进度条
weixin_44008801的博客
06-11 1831
CSS好看的百分比进度条 //css样式 <style> /* 百分比 */ .spc-tb2 .bfb-box{ position: relative; text-align: center; width:70px; height:20px; bac...
使用css制作一个圆环进度条
05-26
然后，我们使用 CSS 设置容器为圆形，并将进度条设置为圆环。我们可以使用 `border-radius` 属性将容器设置为圆形，使用 `border` 属性将进度条设置为圆环，还需要设置进度条的颜色和宽度： ```css .progress-...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值