给予jquery的进度条，三列数据

先看一下效果图吧：

一.css部分：

<style>
        .progress-part{position: relative; width:400px; height:50px; border: 1px solid #ddd;background-color: #fff;border-radius:6px;}
        .progress-part-left{float:left;height: 100%;z-index: 1;top: 0;left: 0;}
        .progress-part-first{float:left; height: 100%; width: 1%;line-height:50px !important; top: 0;left: 0;border: none;background-color: #1ab394;text-align: center;color: #fff;z-index: 1;border-bottom-left-radius: 6px;border-top-left-radius: 6px;}
        .progress-part-second{float:left; height: 100%;width: 1%;line-height:50px !important; top: 0;border: none;background-color: #f8ac59;text-align: center;color: #fff;z-index: 1;}
        .progress-part-third{float:left; height: 100%;width: 1%;line-height:50px !important; top: 0;border: none;background-color: #eee;text-align: center;color: #333;z-index: 1; border-bottom-right-radius: 6px;border-top-right-radius: 6px;}
    </style>

二.html部分

    <div style="width: 1000px; margin: 50px auto;">
        <div class="progress-part">
            <span class="progress-part-first">已 50%</span>
            <span class="progress-part-second">本周 30%</span>
            <span class="progress-part-third">未 20%</span>
        </div>
    </div>

三.js部分

<script type="text/javascript"> 
        $(".progress-part-first").animate({ width: "50%" }, 500);       
        $(".progress-part-second").animate({ width: "30%" }, 500);       
        $(".progress-part-third").animate({ width: "20%" }, 500);
    </script>