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>