使用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属性，没有表现出圆角来，也算是另一种风格吧。