一个有意思的胶囊状的进度指示条（纯CSS）

这段时间主要在做前端的一些报表工作，做了几个用CSS样式来控制的图形，感觉挺有意思，就跟大家一起分享一下。

第一个，胶囊一样的进度指示图，如图

进度指示可以通过设置样式progress_0 ~ progress_5来动态改变，直接上代码了。 

HTML Code

 1 <div class='level_bar progress_0'>
 2   <div class='level_item'></div><!--
 3   --><div class='level_item'></div><!--
 4   --><div class='level_item'></div><!--
 5   --><div class='level_item'></div><!--
 6   --><div class='level_item'></div>
 7 </div>
 8 
 9 <div class='level_bar progress_3'>
10   <div class='level_item'></div><!--
11   --><div class='level_item'></div><!--
12   --><div class='level_item'></div><!--
13   --><div class='level_item'></div><!--
14   --><div class='level_item'></div>
15 </div>
16 
17 <div class='level_bar progress_5'>
18   <div class='level_item'></div><!--
19   --><div class='level_item'></div><!--
20   --><div class='level_item'></div><!--
21   --><div class='level_item'></div><!--
22   --><div class='level_item'></div>
23 </div>

 

SCSS Code

 1 .level_bar {
 2   position: relative;
 3   padding: 2px;
 4   //display: inline-block;
 5   width: 6.2em;
 6   height: 2em;
 7   border: 0.3em solid red;
 8   border-radius: 6em;
 9   white-space: nowrap;
10   
11   .level_item {
12     margin-right: 2px;
13     padding: 0;
14     display: inline-block;
15     width: 1.14em;
16     height: 100%;
17     background-color: blue;
18   }
19   
20   .level_item:first-child {
21     margin-right: 2px;
22     background-color: black;
23     border-radius: 1em 0 0 1em;
24   }
25   
26   .level_item:last-child {
27     background-color: black;
28     border-radius: 0em 1em 1em 0;
29   } 
30 }
31 
32 
33 $loops: 5;
34 @for $i from 0 through $loops {
35   $j = $i + 1;
36 
37   .level_bar.progress_#{$i} {
38     .level_item:nth-child(n+$j) {
39       display: none;
40     }
41   }
42 }

 

转载于:https://www.cnblogs.com/minstars/articles/5471208.html