CSS实现圆形进度条

<title>CSS实现圆形进度条</title>
<style>
/*圆圈进度条*/
.jdt_box{ clear:both; width:120px; height:120px; border:1px #000 solid; border-radius:50%; position:relative; overflow:hidden;}
/*前半圈背景*/
      .jdt_bg1{ position:absolute; width:50%; height:100%; border-radius:100% 0 0 100%; background:#fff;/*进度条背景颜色*/ overflow:hidden; z-index:3; }
/*后半圈背景*/
      .jdt_bg2{ position:absolute;left:50%; width:50%; height:100%; border-radius:0px 100% 100% 0; background:#fff;/*进度条背景颜色*/ z-index:1; }
/*前半圈进度条*/
      .jdt_pr1 { position:absolute; left:50%; width:50%; height:100%; border-radius:0px 100% 100% 0px; background:#000;/*进度条颜色*/ transform:rotate(-180deg); transform-origin:0px 50%; z-index:2; }
/*后半圈进度条*/
      .jdt_pr2 { position:absolute; left:50%; border-radius:0px 100% 100% 0px; background:#000;/*进度条颜色*/ transform:rotate(-180deg); transform-origin:0px 50%; z-index:4; }
/*中间文本区域*/
      .jdt_body{ position:absolute; top:5%; left:5%; width:90%; height:90%; line-height:100%; background:#fff;/*中间区域背景颜色*/ border:1px #000 solid; box-sizing:border-box; border-radius:50%; overflow:hidden; z-index:5; }
            .jdt_body_txt{ clear:both; width:90%; margin:0 auto; line-height:30px; margin-top:30%; text-align:center;}
</style>
<?
//本代码是PHP代码，是实现动态改变进度条的百分比，如果要用其它语言，自己置换即可，只需改变变量jdt_percent的值即可，别的都无需改动
//如果不需要动态改变，则可以去掉相关动态代码，只需要改变jdt_pr1（-180deg到0deg）与jdt_pr2（0deg到180deg）中rotate的值即可
$jdt_percent = 0.6; //进度条：显示百分比

$jdt1 = ""; //初始化进度条：前半圈
$jdt2 = ""; //初始化进度条：后半圈
//如果小于50%，则只显示前半圈的进度条
if ( $jdt_percent > 0 and $jdt_percent <= 0.5 ){
      $deg1 = (1 - $jdt_percent * 2) * (-180); //进度条显示的百分比
      $jdt1 = " transform:rotate(".$deg1."deg);";
}elseif( $jdt_percent > 0.5 ){ //如果大于50%，则前半圈完全显示：从-180deg到0deg
      $jdt1 = " transform:rotate(0deg);";
}
//如果大于50%，则显示后半圈的进度条
if ( $jdt_percent > 0.5 and $jdt_percent <= 1 ){
      $deg2 = ($jdt_percent - 0.5) * 2 * 180; //进度条显示的百分比，最大值为180
      if ( $deg2 > 180 ) $deg2 = 180;
      $jdt2 = " width:50%; height:100%; transform:rotate(".$deg2."deg);";
}elseif( $jdt_percent > 1 ){ //如果大于100%，则后半圈完全显示：从0deg到180deg
      $jdt2 = " width:50%; height:100%; transform:rotate(180deg);";
}
?>
<div class="jdt_box">
      <div class="jdt_bg1"></div>
      <div class="jdt_bg2"></div>
      <div class="jdt_pr1" style="<?=$jdt1?> /*transform:rotate(-50deg);*/"></div>
      <div class="jdt_pr2" style="<?=$jdt2?> /*width:50%; height:100%; transform:rotate(80deg);*/"></div>
      <div class="jdt_body">
            <div class="jdt_body_txt">CSS实现圆形进度条</div>
      </div>
</div>


=======================================================


<title>CSS实现圆形进度条动画</title>
<style>
.jdt_box{ clear:both; width:120px; height:120px; border:1px #000 solid; border-radius:50%; position:relative; overflow:hidden;}
      .jdt_bg1{ position:absolute; width:50%; height:100%; border-radius:100% 0 0 100%; background:#fff; overflow:hidden; z-index:3; }
      .jdt_bg2{ position:absolute;left:50%; width:50%; height:100%; border-radius:0px 100% 100% 0; background:#fff; z-index:1; }
      .jdt_pr1 { position:absolute; left:50%; width:50%; height:100%; border-radius:0px 100% 100% 0px; background:#000; transform:rotate(-180deg); transform-origin:0px 50%; z-index:2; /*进度条动画*/animation:pr1A 5s infinite linear forwards; }
      .jdt_pr2 { position:absolute; left:50%; border-radius:0px 100% 100% 0px; background:#000; transform:rotate(-180deg); transform-origin:0px 50%; z-index:4; /*进度条动画*/animation:pr2A 5s infinite linear forwards; }
      .jdt_body{ position:absolute; top:5%; left:5%; width:90%; height:90%; line-height:100%; background:#fff; border:1px #000 solid; box-sizing:border-box; border-radius:50%; overflow:hidden; z-index:5; }
            .jdt_body_txt{ clear:both; width:90%; margin:0 auto; line-height:30px; margin-top:20%; text-align:center;}
      /*进度条动画*/
      @keyframes pr1A { 0% { transform:rotate(-180deg); } 50% { transform:rotate(0deg); } 100% { transform:rotate(0deg); } }
      @keyframes pr2A { 0% { transform:rotate(-180deg); } 100%{ width:50%; height:100%; transform:rotate(180deg); } }
</style>
<div class="jdt_box">
      <div class="jdt_bg1"></div>
      <div class="jdt_bg2"></div>
      <div class="jdt_pr1"></div>
      <div class="jdt_pr2"></div>
      <div class="jdt_body">
            <div class="jdt_body_txt">CSS实现圆形进度条动画</div>
      </div>
</div>