任意角度弧形进度条

简述

• 绘制一个270°的弧形进度条，根据所传入的分数显示进度位置。（可根据需要调整自己的度数）

思想

• 将一个正方形分为左右两个矩形
• 左右矩形各画半圆（实际是一个圆超出部分被隐藏了）
• 左边用180°半圆，右边用90°弧形（transform：rotate（）旋转得到）--------底色拼完
• 进度条颜色初始通过旋转隐藏
• 通过计算得到相应分数的进度条旋转度数

例子参数

 可以先看文章最后的效果图，便于理解哦

• 绿色：底色
• 蓝色：左半圆进度颜色
• 枣红色：右半弧进度颜色（方便区分，实际情况应该与左半圆同色）

代码

HTML

<div class="circleProgress_wrapper">     //进度条
  <div id="score">0</div>                //分数
    <!-- 右 -->
  <div class="wrapper right">           // 矩形容器
    <div  class="circle rightbox "></div>   //进度条底色（绿色）容器
    <div class="circle rightcircle">        //进度条（蓝色）颜色
    </div>
  </div>
  <!-- 左 -->
  <div class="wrapper left">
      <div  class="circle lefttbox "></div>
      <div class="circle leftcircle">
      </div>
    </div>
</div>

CSS

 .circleProgress_wrapper{
    width: 200px;
    height: 200px;
    margin: 50px auto;
    position: relative;         //此处是为了定位分数的位置
    border:1px solid #ddd;     //此处是为了方便观看，可删
    transform: rotate(45deg);     //使开口朝下
    }

.wrapper{ 
  width: 100px;
  height: 200px;
  position: absolute;
  top: 0;
  overflow: hidden;			//重要！！隐藏超出部分
  }
  .right{ right: 0;}
  .left{  left: 0;}
  .circle{
    width: 160px;
    height: 160px;
    border:20px solid transparent;     //使进度条能够呈现出缺口
    border-radius: 50%;
    position: absolute;
    top:0;
  }
  .rightbox{
    border-top: 20px solid #99edd1;
    border-right: 20px solid #99edd1;
    right:0;
    transform: rotate(-45deg);		//使右边的进度条底色旋转到相应位置
  }
  .lefttbox{
    border-bottom: 20px solid #99edd1;
    border-left: 20px solid #99edd1;
    transform: rotate(45deg); 	//使左的进度条底色旋转到相应位置（半圆）
  }
  .leftcircle{
    border-bottom:20px solid rgb(101, 198, 228);
    border-left:20px solid  rgb(101, 198, 228);
    left:0;
  }
  .rightcircle{
    border-top: 20px solid  rgba(209, 97, 77, 0.945);
  border-right: 20px solid  rgba(209, 97, 77, 0.945);
  transform: rotate(-135deg);	//右边进度条颜色隐藏（旋转到左半圆后面）
  right: 0;
  }
  #score{		//分数位置，可调，这个不精确，可自己用flex
    position: absolute;
    color: #aaa;
    top:100px;
    left: 100px;;
    font-size: 30px;
    font-weight: bolder;
    transform: rotate(-45deg);
  }

JavaScript

  var leftDegScore = (100/270)*180;   		//左半圆总分数
  var rightDegScore =  100 - leftDegScore;		//右圆弧总分数
  var leftRotate =document.getElementsByClassName('leftcircle')[0];	
  var rightRotate =document.getElementsByClassName('rightcircle')[0];
  var yourScore = document.getElementById('score');

function ScoreDeg(score){
  yourScore.innerHTML=score;	//显示分数
  if(score <= leftDegScore)	
  {
    var leftDeg = (score/leftDegScore)*180-135;		
    leftRotate.style.transform='rotate('+leftDeg+'deg)';
   }else if(score > 100){
	  leftRotate.style.transform='rotate(-135deg)';
	  rightRotate.style.transform='rotate(-135deg)';
   }else{
	  leftRotate.style.transform='rotate(45deg)';
	  var rightDeg = (score-leftDegScore)*90/rightDegScore-135;
	  rightRotate.style.transform='rotate('+rightDeg+'deg)';
   }
 }
ScoreDeg(0);		//修改分数测试

效果图