一个有意思的胶囊状的进度指示条（纯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 }
