几款漂亮的纯css进度条

最新推荐文章于 2024-06-09 09:49:42 发布
最新推荐文章于 2024-06-09 09:49:42 发布
阅读量2.1k 收藏 1
点赞数
分类专栏： css 文章标签： css class div border html filter
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jiahong1219/article/details/6732114
版权 
 <!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;
font:10px/12px arial
}
/* -- 以下是重写的皮肤 -- */
/* green */
.skin-green .pb-wrapper
{
border-color:#666;
border-top-color:#628c2d;
}
.skin-green .pb-container
{
border-color:#666;
border-left-color:#628c2d;
}
.skin-green .pb-text{ color:black }
/* blue */
.skin-blue .pb-wrapper
{
border-color:#0e7c78;
border-top-color:#41beb9;
}
.skin-blue .pb-container
{
border-color:#0e7c78;
border-left-color:#41beb9;
}
.skin-blue .pb-text
{
color:white
}
.skin-blue .pb-value
{
background:#159b96;
}
/* red */
.skin-red .pb-wrapper
{
border-color:#8e1411;
border-top-color:#cb3d3a;
}
.skin-red .pb-container
{
border-color:#8e1411;
border-left-color:#cb3d3a;
}
.skin-red .pb-text
{
color:#470200;
}
.skin-red .pb-value
{
background:#d70500
}
/* orange */
.skin-orange .pb-wrapper,
.skin-orange .pb-container
{
border-color:#d55110;
}
.skin-orange .pb-text
{
color:#250f00;
}
.skin-orange .pb-value
{
background:#d75a00;
}
/* purple */
.skin-purple .pb-wrapper,
.skin-purple .pb-container
{
border-color:#a90561;
}
.skin-purple .pb-text
{
color:#720040;
}
.skin-purple .pb-value
{
background:#9d118e
}
/* black */
.skin-black .pb-wrapper,
.skin-black .pb-container
{
border-color:black
}
.skin-black .pb-text
{
color:gray;
}
.skin-black .pb-value
{
background:#111111;
}
/* 分割线样式 */
.hua-li-de-fen-ge-xian
{
border-bottom:2px dashed #eee;
height:1px;
font-size:1px;
margin:5px 0
}
</style>
</head>
<body>
     <div class="process-bar skin-green">
     <div class="pb-wrapper">
     <div class="pb-highlight"></div>
     <div class="pb-container">
     <div class="pb-text">10%</div>
     <div class="pb-value"></div>
     </div>
     </div>
     </div>
     <div class="hua-li-de-fen-ge-xian"></div>
     <div class="process-bar skin-blue">
     <div class="pb-wrapper">
     <div class="pb-highlight"></div>
     <div class="pb-container">
     <div class="pb-text">100%</div>
     <div class="pb-value" style="width:100%"></div>
     </div>
     </div>
     </div>
     <div class="hua-li-de-fen-ge-xian"></div>
     <div class="process-bar skin-red">
     <div class="pb-wrapper">
     <div class="pb-highlight"></div>
     <div class="pb-container">
     <div class="pb-text">18%</div>
     <div class="pb-value" style="width:18%"></div>
     </div>
     </div>
     </div>
     <div class="hua-li-de-fen-ge-xian"></div>
     <div class="process-bar skin-orange">
     <div class="pb-wrapper">
     <div class="pb-highlight"></div>
     <div class="pb-container">
     <div class="pb-text">55%</div>
     <div class="pb-value" style="width:55%"></div>
     </div>
     </div>
     </div>
     <div class="hua-li-de-fen-ge-xian"></div>
     <div class="process-bar skin-purple">
     <div class="pb-wrapper">
     <div class="pb-highlight"></div>
     <div class="pb-container">
     <div class="pb-text">32%</div>
     <div class="pb-value" style="width:32%"></div>
     </div>
     </div>
     </div>
     <div class="hua-li-de-fen-ge-xian"></div>
     <div class="process-bar skin-black">
     <div class="pb-wrapper">
     <div class="pb-highlight"></div>
     <div class="pb-container">
     <div class="pb-text">78%</div>
     <div class="pb-value" style="width:78%"></div>
     </div>
     </div>
     </div>
</body>
</html>


 

魔方_小影
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
肝了两宿才收集的17个超炫酷的 CSS 动画加载与进度条特效，绝对值得收藏！！！
Amo Xiang的博客
06-23 1万+
文章目录一、圆形加载动画二、上下跳动的圆球加载动画三、3D立体加载动画四、饼图加载动画五、多色圆点波动效果的加载动画六、制作顺时针放大的圆圈加载动画七、制作小圆圈轮流放大的加载动画八、制作竖条加载动画九、制作水波扩散效果加载动画十、制作逆时针逐渐放大多点加载动画十一、制作形状变化的加载动画十二、实现动态前进的阴影进度条十三、椭圆形进度条加载十四、彩色进度条加载效果十五、环形加载动画十六、制作斑马线样式的进度条十七、程序加载页面 一、圆形加载动画 1、实例描述：浏览网页时，难免会有网页加载慢的情况，当网页长时
html5 css3制作柱形图,一步一步教你实现纯CSS的柱形图
weixin_36033929的博客
06-21 1747
烈火网教程 CSS在处理排版之强大，没有做不到，只有想不到。下面我们将一同实现一个柱状图。先打好一个具体的框架。我们利用无序列表做整体，里面的东西我们根本选择内联无素span，strong，em来填充。使命召唤:35%机器战争:40%CS:87%光环:45%半条命:23%提示：可修改后代码再运行!使命召唤：35%机器战争：40%CS：87%光环：45%半条命：23%解释一下，ul里面的每一个li就...
HTML实现进度条/加载框模版
最新发布
joe_g12345的博客
06-09 950
【代码】HTML实现进度条/加载框模版。
CSS3技巧32：CSS3制作经典进度条
九天翔龙的技术博客
01-20 1727
放假了，不想到处走亲戚。 窝在家里 coding 玩儿~ 看到一个很不错的进度条效果，很简单，但是很好看，就写写练练手。
纯css制作的漂亮好看的进度条
品寂寞、悟人生
12-12 1449
<!-- .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; p
CSS3渐变进度条效果 ​
wangxinwang996的博客
04-14 1261
7.给body标签添加动画效果,实现背景渐变的效果背景颜色,随着滚动条的颜色进行改变,滚动条颜色变化,背景颜色跟随变化.6.整个效果分为三步我们先让它快起来,再让它慢起来,设置背景色渐变,红色-黄色-深黄色。<h1>CSS3渐变进度条效果</h1>3.设置CSS3渐变进度条效果字体样式效果。同步使用关键帧动画，并且时间要保持一致。背景色黑色，背景色动画渐变时常5s。4.设置进度条外矩形块的样式和位置。CSS3渐变进度条效果。5.设置进度条显示效果。
9款极具创意的HTML5/CSS3进度条动画
08-23
今天我们要分享9款极具创意的HTML5/CSS3进度条动画，...3、纯CSS3实现动态Loading加载 仅6个span标签 之前我们介绍过几款具有各种动画效果的CSS3进度条，我们可以在CSS3进度条栏目中查看演示和下载[......] 阅读全文>>
漂亮的CSS3动画进度条 可自定义进度条颜色
08-23
今天我们要再来分享一款很漂亮的CSS3动画...之前我们也有分享过很多功能强大的CSS3进度条，像纯CSS3进度条 华丽5色进度条示例、CSS3 SVG 进度条 Loading 动画 炫酷发光特效都和今天分享的这款比较类似，可以看看。
基于html5的纯js+css实现环形进度条
12-27
使用html5的canvas插件，配合css3就可以在页面上画出漂亮的环形进度条。
纯css进度条，简单美观实用。
qq_34716929的博客
03-11 519
html：在style里给 “–precent”赋值，就能显示对应百分比。
10种动态进度条用css3实现
Mr_jianghanlin的博客
04-21 2118
用css做的10种动态进度条，喜欢可以直接去用话不多说先看效果图： 实现上图的，最主要的就是应用了css动画属性@keyframes和animation属性结合应用 下面看看语法： @keyframes @keyframes animationname {keyframes-selector {css-styles;}} animationname 必需的。定义animation的名称...
使用css 实现渐变色条纹丝滑进度条
PhoenixGuangyu的博客
03-05 730
【代码】使用css 实现渐变色条纹丝滑进度条。
css滚动条美化
XYLH2015的博客
11-16 511
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/ ::-webkit-scrollbar { width: 5px; height: 5px; background-color: #F5F5F5; } /*定义滚动条轨道 内阴影+圆角*/ ::-webkit-scrollbar-track { -webkit-box-...
现代 CSS 高阶技巧，完美的波浪进度条效果。
sybh的博客
11-28 1144
好了，本文到此结束，希望本文对你有所帮助 :)如果还有什么疑问或者建议，可以多多交流，原创文章，文笔有限，才疏学浅，文中若有不正之处，万望告知。
CSS3实现炫酷进度条
u013742084的专栏
06-10 2346
看了一个进度条很漂亮，所以自己试试看 html 0 css样式： * { margin: 0; padding: 0; font-family: 'microsoft yahei'; } html,body { width: 100%; height: 100%; background-color: #222; }
如何使用Tailwind CSS轻松设计惊艳的进度条
前端达人
08-18 402
开发背景在当今快节奏的数字世界中，用户体验是网站开发的关键方面之一。提升用户体验的一种有效方式是在您的网站或应用程序中加入进度条。考虑到您正在为一个云存储应用构建在线文件上传功能。当用户上传文件时，他们通常希望了解上传进度，以估计剩余时间或确保上传过程成功完成。通过将进度条集成到文件上传功能中，您可以向用户提供实时反馈，让他们了解文件上传的进度。这样可以减少不确定性，提供对上传过程的控制感，从而提...
css动态进度条-css制作进度条生长动画效果
yh8899abc的博客
09-30 1937
1、HTML部分 <div class="line" v-for="(item, index) in originData" :key="index"> <div class="progress"> <!-- 上面的指标 --> <div class="cursor" ref="cursor1" :style="{ borderTop: item.cusorBorder, left: (aniShow ? item.cursor : '0' )
css进度条动画百分比
06-09
您可以使用CSS3中的动画和关键帧来创建一个进度条动画，并使用伪元素(::before或::after)来显示百分比。以下是一个示例代码： HTML代码： ```html <div class="progress-bar"> <div class="progress-bar-inner"></div> </div> ``` CSS代码： ```css /* 进度条容器样式 */ .progress-bar { width: 300px; height: 10px; background-color: #ddd; position: relative; } /* 进度条内部样式 */ .progress-bar-inner { width: 0%; height: 100%; background-color: #007bff; position: absolute; top: 0; left: 0; animation: progress-animation 3s ease; } /* 进度条动画关键帧 */ @keyframes progress-animation { 0% { width: 0; } 100% { width: 100%; } } /* 显示百分比样式 */ .progress-bar-inner::before { content: attr(data-percent); display: block; position: absolute; top: -20px; left: 0; width: 100%; text-align: center; font-size: 14px; font-weight: bold; } ``` 在上面的代码中，我们创建了一个进度条容器和内部元素。我们使用动画和关键帧来实现进度条的动画效果。我们还使用伪元素来显示百分比文本，并使用属性选择器将百分比值存储在data-percent属性中。 您可以通过更改.progress-bar-inner元素的宽度来控制进度条的百分比。在上面的示例中，我们将动画持续时间设置为3秒，并使用ease函数使动画平滑地开始和结束。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值