dorado环形进度条

正常html中进度条

最底部直径100px的绿色圆环
其次是使用绝对布局的直径为100px的灰色左半圆和使用绝对布局直径为100px的灰色右半圆
最上面是使用绝对布局的直径为80px的白色圆

<div id="c">
  <div id="l"></div>
  <div id="r"></div>
  <div id="m">80%</div>
</div>

#c {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: green;
  position: relative;
}
#l {
  background: gray;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  position: absolute;
  clip: rect(0px, 50px, auto, auto);
}
#r {
  background: gray;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  position: absolute;
  clip: rect(0px, auto, auto, 50px);
}
#m {
  position: absolute;
  background: white;
  width: 80px;
  height: 80px;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  border-radius: 50%;
  margin: auto;
  text-align:center;
  line-height:80px;
}

$(function () {
  var percent = parseInt($("#m").text());
  var baseColor = $("#c").css("background");
  if (percent <= 50) {
    $("#r").css("transform", "rotate(" + percent * 3.6 + "deg)");
  } else {
    $("#r").css({
      transform: "rotate((0deg))",
      background: baseColor
    });
    $("#l").css("transform", "rotate(" + (percent - 50) * 3.6 + "deg)");
  }
});

dorado中进度条

var percent = parseInt(view.get("#mask.text"));
var baseColor = view.get("#circle").getDom().style.background;

if(percent<=50){
	view.get("#right").set({
		style:{
			transform:"rotate(" + percent * 3.6 + "deg)",
		}
	});
}else{
	view.get("#right").set({
		style:{
			transform:"rotate((0deg))",
			background: baseColor,
		}
	});
	
	view.get("#left").set({
		style:{
			transform:"rotate(" + (percent - 50) * 3.6 + "deg)",
		}
	});
}

container[anchor]
width=height=150px

#circle
width=height=100px


#left
width=height=100px

#right
width=height=100px


#mask
width=height=80px

为什么container[anchor]width=height=150px？

因为dorado时，旋转时，直径为100px的圆旋转，内嵌它的边长为100px正方形也在旋转，此时正方形最大牵扯到的面积为边长为100√2的正方形