1.饼状图实现：

html:

<div class="rign"></div>

css:

 .rign{width: 200px;height: 200px;border-radius: 200px;background: conic-gradient(#3ebd3e 0, #3ebd3e 33.33%, #ff9800 33.33%, #ff9800 66.66%, #03a9f4 66.66%, #03a9f4 100%);}

2.加载中动画实现

html:

<div class="load"></div> 

css:

.load{width: 200px;height: 200px;border-radius: 200px;position: relative;background: conic-gradient(rgba(255,152,0,1) 0, rgba(255,152,0,0) 100%);animation: run ease-out 1s infinite}
@keyframes run{
	from{transform: rotate(0deg);}
	to{transform: rotate(360deg);}
}
.load:after{content: "";text-align: center;line-height:160px;font-size: 20px;width: 160px;height: 160px;background: #fff;border-radius: 200px;position: absolute;top: 20px;left: 20px;z-index: 2;}