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


 1         <!-- 饼图 -->
 2 <div class="pie"></div>
 3 
 4  <hr />
 5 
 6         <!-- 环形图 -->
 7 <div class="ring">
 8     <div class="child-ring"></div>
 9     <div class="left">
10         <div class="left-c"></div>
11     </div>
12     <div class="right">
13         <div class="right-c"></div>
14     </div>
15 </div>          1

/* 饼图进度样式开始 */
  2             .pie {
  3                 width: 100px;
  4                 height: 100px;
  5                 border-radius: 50%;
  6                 background: #1D7DB1;
  7                 background-image: linear-gradient(to right, transparent 50%, #9ACD32 0);
  8 
  9                 /* 线性渐变 */
 10                 /* background: linear-gradient(direction, color-stop1, color-stop2, ...); */
 11 
 12                 /* 径向渐变 */
 13                 /* background: radial-gradient(shape size at position, start-color, ..., last-color); */
 14             }
 15 
 16             .pie::before {
 17                 content: '饼';
 18                 display: block;
 19                 margin-left: 50%;
 20                 height: 100%;
 21                 /* 继承.pie的背景色 */
 22                 background-color: inherit;
 23                 color: #fff;
 24                 display: flex;
 25                 justify-content: center;
 26                 align-items: center;
 27                 border-radius: 0 50px 50px 0;
 28                 transform-origin: left;
 29                 transform: rotate(1deg);
 30                 animation: spin 6s linear infinite, bg 12s step-start infinite;
 31                 /* step-start/step-end 动画瞬变 */
 32             }
 33 
 34             @keyframes spin {
 35                 to {
 36                     transform: rotate(180deg);
 37                 }
 38             }
 39             @keyframes bg {
 40                 50% {
 41                     background: #9ACD32;
 42                 }
 43             }
 44 
 45 /* 饼图进度样式结束 */
 46 
 47 /* 环形进度条开始 */
 48             .ring {
 49                 width: 100px;
 50                 height: 100px;
 51                 background: #9ACD32;
 52                 border-radius: 50px;
 53                 position: relative;
 54             }
 55             /* 环形进度条 */
 56             .child-ring{
 57                 width: 100%;
 58                 height: 100%;
 59                 background-color: inherit;
 60                 border: 6px solid #1D7DB1;
 61                 box-sizing: border-box;
 62                 border-radius: 50%;
 63             }
 64             /* 左边遮罩 */
 65             .left{
 66                 width: 50%;
 67                 height: 100%;
 68                 position: absolute;
 69                 top: 0;
 70                 left: 0;
 71                 background-color: transparent;
 72                 border-radius: 50px 0 0 50px;
 73                 overflow: hidden;
 74             }
 75             .left-c{
 76                 width: 100%;
 77                 height: 100%;
 78                 background-color: #9ACD32;
 79                 border-radius: 50px 0 0 50px;
 80                 
 81                 /* 动画  左半部延时6s执行*/
 82                 transform-origin: right;
 83                 transform: rotate(0deg);
 84                 animation: ring 6s 6s linear 1;
 85                 /* 动画保持最后一个状态 */
 86                 animation-fill-mode: forwards;
 87             }        
 88             /* 右边遮罩 */
 89             .right{
 90                 width: 50%;
 91                 height: 100%;
 92                 position: absolute;
 93                 top: 0;
 94                 right: 0;
 95                 background-color: transparent;
 96                 border-radius: 0 50px 50px 0;
 97                 overflow: hidden;
 98             }
 99             .right-c{
100                 width: 100%;
101                 height: 100%;
102                 background-color: #9ACD32;
103                 border-radius: 0 50px 50px 0;
104                 
105                 /* 动画 */
106                 transform: rotate(0deg);
107                 transform-origin: left;
108                 animation: ring 6s linear 1;
109                 animation-fill-mode: forwards;
110             }
111             @keyframes ring {
112                 to{
113                     transform: rotate(180deg);
114                 }
115             }
116 /* 环形进度条结束 */