Css静态进度条

图片预览:

Css代码:

<style>
.statusList{width:240px; float:left; line-height:68px;margin:0 2px; text-align:center; font-family:"微软雅黑"; font-size:14px;}

/*颜色*/
.scheduleGray{background-color:#e5e5e5;height:9px; }                                  /*紫色*/
.scheduleGreen{background-color: #6dc942;width: 50%;height: 9px;float:left;}       /*绿色*/
.scheduleBlue{background-color:#6767c6; width:80%;height:9px; float:left;}         /*蓝色*/
</style>

Html代码:

<div class="statusList">
  <div class="scheduleGray" style="position:relative; margin-top:22px; z-index:-1;">
    <div style="float:left; position:absolute; left:0; top:0; z-index:10; z-index:9999;"><img src="workanpai_15.png"/></div>
  <!-- 可以设置class改变进度条的颜色,width可以设置进度条进度 -->
  <div class="scheduleGreen" style="position:relative; z-index:0;width:20%">
    <div style="position: absolute; top: 11px; left: 120px; height: 14px; line-height: 14px; color:#6dc942;">20%</div>
  </div>
  <!-- 模板 -->
    <div style="float:right; position:absolute; right:0; top:0;"><img src="workanpai_18.png" /></div>
  </div>
</div>
时间: 2024-10-11 02:15:55

Css静态进度条的相关文章

CSS 静态进度条效果

今天学习到了实现一个静态进度条的方法,固写一篇笔记稳固一下自己的知识. 最终的效果如下,进度条放在一个框里,水平宽自适应. 现在就开始,首先写一个进度条先. .progress-bar{ /* 进度条的槽 */ width:47%; /* 设置进度条的高度 */ height: 5px; /*进度条外层div的背景色,进度未达到的地方的颜色 */ background-color: #f9e1e3; border-radius: 3px; } .progress{ /* 进度部分 */ /* 利

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

原文:CSS实现进度条和订单进度条 最近半个月为了期末考试,可要了学渣我半瓶血啊!今天本该好好复习的,可是状态不好,就随便找点乐子玩一玩,于是乎就想起之前面试时面试官给的一道题(见标题),那就弄点简单的小玩意给自己洗洗脑咯. 简单地效果图如下: CSS实现进度条: html结构: <div id="progress"> <span>70%</span> </div> css样式: #progress{ width: 50%; height

纯css实现进度条效果

去年7月份做一个公司商城的微信页面(微信用的chrome内核)需要写一个提示返现进度的进度条效果. 一个完整的进度条效果其实可以拆分一下: 一段背景: 一小段的静态的斜纹进度条: 斜纹进度条用线性渐变 linear-gradient 类实现,原理很好理解,2个参数: 1.角度: 2.关键点(包含2个参数,1是颜色,2是长度位置) display: inline-block; width: 100px; height: 100px; background-image: linear-gradien

利用CSS制作进度条

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" con

【css系列】创建网页加载进度条

一.最简单或者明显的方式是使用定时器 1.在网页中加入布局覆盖真实网页内容 2.使用定时器确定加载所用时间的长短,其实并不是真正的加载进度实现 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>定时器的进度条</title> <script src="../js/jquery-3.2.1.j

一、纯css实现顶部进度条随滚动条滚动

一.效果图 二.直接复制粘贴 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compa

Ext js 的几种进度条(转)

<script type="text/javascript"> /*1.使用MessageBox.wait()方法实现进度条*/ function Read1() { Ext.Msg.wait("内容","Extjs进度条应用",{text:"正在加载..."}); } /*2.使用MessageBox.show()方法中的配置参数wait:true,实现进度条*/ function Read2() { Ext.M

进度条的美化(一)

这里记录一种用css控制进度条美化的效果 css代码: @-webkit-keyframes progress-bar-stripes { from { background-position: 40px 0 } to { background-position: 0 0 } } @-moz-keyframes progress-bar-stripes { from { background-position: 40px 0 } to { background-position: 0 0 } }

利用jQuery和CSS实现环形进度条

html代码 1 <div class="circle" style="left:0"> 2 <div class="pie_left"><div class="left"></div></div> 3 <div class="pie_right"><div class="right"></div&