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; }
/*中(zhōng)間文本區域*/
      .jdt_body{ position:absolute; top:5%; left:5%; width:90%; height:90%; line-height:100%; background:#fff;/*中(zhōng)間區域背景顔色*/ 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代碼，是實現動态改變進度條的百分(fēn)比，如果要用其它語言，自己置換即可，隻需改變變量jdt_percent的值即可，别的都無需改動
//如果不需要動态改變，則可以去(qù)掉相關動态代碼，隻需要改變jdt_pr1（-180deg到0deg）與jdt_pr2（0deg到180deg）中(zhōng)rotate的值即可
$jdt_percent = 0.6; //進度條：顯示百分(fēn)比

$jdt1 = ""; //初始化進度條：前半圈
$jdt2 = ""; //初始化進度條：後半圈
//如果小(xiǎo)于50%，則隻顯示前半圈的進度條
if ( $jdt_percent > 0 and $jdt_percent <= 0.5 ){
      $deg1 = (1 - $jdt_percent * 2) * (-180); //進度條顯示的百分(fēn)比
      $jdt1 = " transform:rotate(".$deg1."deg);";
}elseif( $jdt_percent > 0.5 ){ //如果大(dà)于50%，則前半圈完全顯示：從-180deg到0deg
      $jdt1 = " transform:rotate(0deg);";
}
//如果大(dà)于50%，則顯示後半圈的進度條
if ( $jdt_percent > 0.5 and $jdt_percent <= 1 ){
      $deg2 = ($jdt_percent - 0.5) * 2 * 180; //進度條顯示的百分(fēn)比，最大(dà)值爲180
      if ( $deg2 > 180 ) $deg2 = 180;
      $jdt2 = " width:50%; height:100%; transform:rotate(".$deg2."deg);";
}elseif( $jdt_percent > 1 ){ //如果大(dà)于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>