css3实现饼状图进度及环形进度条

 1         <!-- 饼图 -->
 <div class="pie"></div>

  <hr />

         <!-- 环形图 -->
 <div class="ring">
     <div class="child-ring"></div>
     <div class="left">
         <div class="left-c"></div>
     </div>
     <div class="right">
         <div class="right-c"></div>
     </div>
 </div>         

/* 饼图进度样式开始 */
             .pie {
                 width: 100px;
                 height: 100px;
                 border-radius: 50%;
                 background: #1D7DB1;
                 background-image: linear-gradient(to right, transparent 50%, #9ACD32 0);

                 /* 线性渐变 */
                 /* background: linear-gradient(direction, color-stop1, color-stop2, ...); */

                 /* 径向渐变 */
                 /* background: radial-gradient(shape size at position, start-color, ..., last-color); */
             }

             .pie::before {
                 content: '饼';
                 display: block;
                 margin-left: 50%;
                 height: 100%;
                 /* 继承.pie的背景色 */
                 background-color: inherit;
                 color: #fff;
                 display: flex;
                 justify-content: center;
                 align-items: center;
                 border-radius: 0 50px 50px 0;
                 transform-origin: left;
                 transform: rotate(1deg);
                 animation: spin 6s linear infinite, bg 12s step-start infinite;
                 /* step-start/step-end 动画瞬变 */
             }

             @keyframes spin {
                 to {
                     transform: rotate(180deg);
                 }
             }
             @keyframes bg {
                 50% {
                     background: #9ACD32;
                 }
             }

 /* 饼图进度样式结束 */

 /* 环形进度条开始 */
             .ring {
                 width: 100px;
                 height: 100px;
                 background: #9ACD32;
                 border-radius: 50px;
                 position: relative;
             }
             /* 环形进度条 */
             .child-ring{
                 width: 100%;
                 height: 100%;
                 background-color: inherit;
                 border: 6px solid #1D7DB1;
                 box-sizing: border-box;
                 border-radius: 50%;
             }
             /* 左边遮罩 */
             .left{
                 width: 50%;
                 height: 100%;
                 position: absolute;
                 top:;
                 left:;
                 background-color: transparent;
                 border-radius: 50px 0 0 50px;
                 overflow: hidden;
             }
             .left-c{
                 width: 100%;
                 height: 100%;
                 background-color: #9ACD32;
                 border-radius: 50px 0 0 50px;

                 /* 动画  左半部延时6s执行*/
                 transform-origin: right;
                 transform: rotate(0deg);
                 animation: ring 6s 6s linear 1;
                 /* 动画保持最后一个状态 */
                 animation-fill-mode: forwards;
             }
             /* 右边遮罩 */
             .right{
                 width: 50%;
                 height: 100%;
                 position: absolute;
                 top:;
                 right:;
                 background-color: transparent;
                 border-radius: 0 50px 50px 0;
                 overflow: hidden;
             }
             .right-c{
                 width: 100%;
                 height: 100%;
                 background-color: #9ACD32;
                 border-radius: 0 50px 50px 0;

                 /* 动画 */
                 transform: rotate(0deg);
                 transform-origin: left;
                 animation: ring 6s linear 1;
                 animation-fill-mode: forwards;
             }
             @keyframes ring {
                 to{
                     transform: rotate(180deg);
                 }
             }
 /* 环形进度条结束 */