div css实现进度条

进度条前端开发中经常用到今天来看下简单的HTML和css实现的进度条。
我们先看下代码：

 <div class="progress">  <span class="bar" style="width: 40%;">40%</span>  </div>

也可以将<span>标签换为<div>
下面重点是css代码：

<style type="text/css">
body{margin: 0;}.progress {  overflow: hidden;  height: 20px;  margin-bottom: 20px;  margin-top: 20px;  margin-left: 30px;  background-color: #f7f7f7;  background-image: -moz-linear-gradient(top, #f5f5f5, #f9f9f9);  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f5f5f5), to(#f9f9f9));  background-image: -webkit-linear-gradient(top, #f5f5f5, #f9f9f9);  background-image: -o-linear-gradient(top, #f5f5f5, #f9f9f9);  background-image: linear-gradient(to bottom, #f5f5f5, #f9f9f9);  background-repeat: repeat-x;  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#fff9f9f9', GradientType=0);  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);  -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);  -webkit-border-radius: 4px;  -moz-border-radius: 4px;  border-radius: 4px;  width:408px;  margin-right:12px;  }  .progress .bar {  width: 0%;  height: 100%;  color: #ffffff;  float: left;  font-size: 12px;  text-align: center;  align-items: center;  display: flex;  justify-content: center;  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);  background-color: #0e90d2;  background-image: -moz-linear-gradient(top, #149bdf, #0480be);  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#149bdf), to(#0480be));  background-image: -webkit-linear-gradient(top, #149bdf, #0480be);  background-image: -o-linear-gradient(top, #149bdf, #0480be);  background-image: linear-gradient(to bottom, #149bdf, #0480be);  background-repeat: repeat-x;  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff149bdf', endColorstr='#ff0480be', GradientType=0);  -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);  -moz-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);  -webkit-box-sizing: border-box;  -moz-box-sizing: border-box;  box-sizing: border-box;  -webkit-transition: width 0.6s ease;  -moz-transition: width 0.6s ease;  -o-transition: width 0.6s ease;  transition: width 0.6s ease;  }
</style>

今天简单介绍简单进度条，接下来会继续写环形进度条和滑动条的希望对大家有帮助。

div css实现进度条相关推荐

CSS 斜条纹进度条动画
这是第一版进度条 ,用css写的.但是后续因为数据不同,要显示不同的颜色和数据,所以又改了一版,直接用的el-progress.自定义的样式.对于新手小白来说比较友好.先上这一版代码. <div ...
CSS实现进度条和订单进度条
由于近期需要做一个订单进度条,比较直观的反应当前订单的状态,css样式借鉴了网上的相关代码,下面是效果图,以及实现说明一.说明 1.首先页面需要引入jQuery的相关js,一般页面都已经引入了就不多 ...
css圆环进度条的几种方法
方法一: 用H5自带的canvas画圆环 <!DOCTYPE html> <html lang="en"> <head><meta cha ...
jquery css 流程进度条
方案1: 方案2: <!DOCTYPE html> <html><head> <meta charset="utf-8"> < ...
css环形进度条clip,使用CSS clip 属性实现音频播放圆环进度条
这是效果突然有需求要做一个圆环的音频播放进度条(上图效果),自己琢磨尝试了半天,也没有实现.最后度娘一下,才知道css还有一个clip属性,完美实现需求.分享一下,说不定能帮其它小伙伴.至于有没有用 ...
css 渐变色进度条
效果: 代码:  <view class="progress-box"><view class="progress& ...
bootstrap3的 progress 进度条
: 2.3版 3.0版 .bar .progress-bar .bar-* .progress-bar-* 2.代码: [html] view plaincopy < ...
jquery实现页面加载进度条(转)
实现原理: 根据页面执行js的顺序将遮罩层和loading图片最先显示出来,等到页面加载完成后,用js控制图片消失.既在网页的头部放置一个文字或者图片的 loading 状态,然后页尾载入一段 JS ...
Bootstrap学习笔记——缩略图、警示框、进度条、媒体对象、列表组、画板
1 缩略图缩略图(一) 缩略图在网站中最常用的地方就是产品列表页面,一行显示几张图片,有的在图片底下(左侧或右侧)带有标题.描述等信息. Bootstrap框架将这一部独立成一个模块组件.并通过&q ...

div css实现进度条

div css实现进度条

div css实现进度条相关推荐

最新文章

热门文章