圆形进度

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  5     <title></title>
  6     <meta charset="utf-8" />
  7     <link rel="stylesheet" href="style/style.css">
  8     <script src="js/jquery-1.10.2.min.js"></script>
  9     <style>
 10      .section-project_1 .cicle {
 11     position: relative;
 12     width: 75px;
 13     height: 75px;
 14     border-width: 4px;
 15     border-color: rgba(55, 178, 72, 0.51);
 16     border-style: solid;
 17     border-radius: 50%;
 18     float: left;
 19     margin-top: 5px;
 20 }
 21 
 22     .section-project_1 .cicle .bar {
 23         position: absolute;
 24             width: 45px;
 25     height: 83px;
 26         overflow: hidden;
 27         margin-bottom: 30px;
 28     }
 29 
 30    .section-project_1 .cicle .bar-left {
 31         top: -4px;
 32     left: -8px;
 33     }
 34 
 35         .section-project_1 .cicle .bar-left .bar-left-an {
 36             position: absolute;
 37             z-index: 10;
 38             width: 75px;
 39             height: 75px;
 40                 left: 4px;
 41             border-width: 4px;
 42             border-style: solid;
 43             border-radius: 50%;
 44             transform: rotate(-135deg);
 45             transition: transform 1s linear;
 46         }
 47 
 48     .section-project_1 .cicle .bar-right {
 49             top: -4px;
 50     left: 35px;
 51     }
 52 
 53         .section-project_1 .cicle .bar-right .bar-right-an {
 54             position: absolute;
 55             left: -39px;
 56             z-index: 20;
 57             width: 75px;
 58             height: 75px;
 59             border-width: 4px;
 60             border-style: solid;
 61             border-radius: 50%;
 62             transform: rotate(-135deg);
 63             transition: transform 1s linear;
 64         }
 65 
 66     .section-project_1 .cicle .tx {
 67         position: absolute;
 68     width: 75px;
 69     height: 75px;
 70     line-height: 75px;
 71     text-align: center;
 72     font-size: 12px;
 73     top: -4px;
 74     left: -4px;
 75     }.section-project_1 .cicle .tx p:nth-of-type(1){
 76              position: absolute;
 77     top: -5px;
 78     width: 75px;
 79      }
 80      .section-project_1 .cicle .tx p:nth-of-type(2){
 81              position: absolute;
 82     top: 14px;
 83     left: 19px;
 84     font-size: 12px;
 85 color: #BDC3C7;
 86      }
 87     .section-project_1 .cicle .barAllan{
 88         border-color: transparent transparent #37B248 #37B248;
 89     }
 90     </style>
 91     
 92 </head>
 93 <body>
 94     <div class="StateMarke section-project_1">
 95         <div class="cicle" progress="100">
 96             <div class="bar bar-left">
 97                 <div class="bar-left-an barAllan" style="transform: rotate(-135deg);"></div>
 98             </div>
 99             <div class="bar bar-right">
100                 <div class="bar-right-an barAllan" style="transform: rotate(45deg);"></div>
101             </div>
102             <div class="tx">100%</div>
103         </div>
104     </div>
105     
106 </body>
107 </html>
108 <script>
109         $(function () {
110             var bar_left = "-135";
111             var bar_right = "45";
112             //proNum是数据所占的百分比
113             var proNum =70;
114             if (proNum == 100) {
115                 bar_left = "45";
116                 bar_right = "-135";
117             } else if (proNum > 0 && proNum < 100) {
118                 if (proNum > 50) {
119                     bar_right = "-135";
120                     bar_left = ((proNum - 50) / 50 * 225) + 180;
121                 } else {
122                     if (proNum == 50)
123                         bar_right = "225"
124                     else
125                         bar_right = ((proNum / 50 * 225) <= 45 ? (45 + proNum) : (proNum / 50 * 225));
126                 }
127             }
128             $(".bar-left>div").css("transform", "rotate(" + bar_left + "deg)")
129             $(".bar-right>div").css("transform", "rotate(" + bar_right + "deg)")
130         })
131 </script>