div css实现进度条

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>  

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