使用CSS实现的平面阴影进度条效果

本来只是想做个简单的两色平面进度条的，结果误打误撞做出了个平面阴影效果，感觉效果完爆之前的构想图，简直是惊喜！！

整体效果如下：

整体设计方面，主要照顾到的是HTML文档的语义性，即使在不使用CSS和JS时也能够保证文档可以理解。元素使用<span>语义性也较强，使用了两层嵌套结构，外层可理解为全百分比（即100%），内层则可理解为当前百分比。

HTML代码如下：

<ul><li>HTML<span class="sklevel"><span>0.80</span></span></li><li>CSS<span class="sklevel"><span>0.85</span></span></li><li>JavaScript<span class="sklevel"><span>0.75</span></span></li><li>Python<span class="sklevel"><span>0.80</span></span></li><li>Java<span class="sklevel"><span>0.50</span></span></li><li>C<span class="sklevel"><span>0.65</span></span></li><li>PhotoShop<span class="sklevel"><span>0.75</span></span></li></ul>

未加载CSS和JS的情况下的页面效果如下，信息基本上还是可用的：

CSS代码如下：

span.sklevel {    position: absolute;    right: 0;    top: 25%;    width: 120px;    height: 50%;    background: #ccc;    border-radius: 5px; /*设为高度的一半最佳*/}span.sklevel span {    position: absolute;    left: 0;    top: 0;    width: 25%;    height: 90%;  /*可变进度条高度稍低于进度槽*/    line-height: 100%;    color: #ccc;    font-size: 50%;    text-align: center;    background: #666;    border-radius: inherit;    border-top-right-radius: 0;    border-bottom-right-radius: 0;    transition: width 1s; /*添加载入动画*/}

仅加载CSS后的页面效果如下，信息基本可用，样式的话可能会让用户产生些许误解：

JavaScript代码如下，图省事就没有写原生了：

(function($) {    $(function() {        //根据进度值（0～1）调整进度条长度        (function() {            var sklevel_span = $("span.sklevel span");            for (var i=0, len=sklevel_span.length; i<len; i++) {                var lv = +$(sklevel_span[i]).text();                lv = lv > 1 ? 100 : lv * 100;                $(sklevel_span[i]).css({"width": lv + "%"}).text(""); //调整进度条长度并清除文字说明            }        }());    });}(jQuery));

对兼容性方面没有过多地测试，Safari9.0.3和Chrome48下都表现正常，IE11由于不支持border-radius属性，没有表现出圆角来，也算是另一种风格吧。