一些样式小效果

纯css画3/4圆弧进度条

缺点圆弧不够圆润，有小瑕疵

js

number=7 total=60

结构页

<view class="cricle-box">
	<view class="circle">
		<view class="circle-left"></view>
		<view class="circle-left1" style="transform:rotate({{number/total<0.375?-45:number*4.5-135}}deg)"></view>
		<view class="circle-left2" style="opacity:{{number/total>0.725?0:1}};transform:rotate({{number*4.5-45}}deg)"></view>
		<view class='circle-right' style="z-index:{{number/total>0.375?0:2}}"></view>
		<view class='circle-mask'></view>
	</view>
</view>

/* 环形 */
.cricle-box {
  position: absolute;
}

.circle {
  width: 370rpx;
  height: 370rpx;
  border-radius: 50%;
  position: relative;
  /* background: #111; */
  overflow: hidden;
  -webkit-mask: radial-gradient(transparent 165rpx, #000 165rpx);
  /* 允许使用者通过部分或者完全隐藏一个元素的可见区域 */
}
/* 空白圆 */
.circle-left {
  width: 50%;
  height: 100%;
  background: #FF9662;
  transform-origin: 100% 50%;
  position: absolute;
  left: 0;
  z-index: 1;
  transform: rotate(45deg)
}

.circle-left1 {
  width: 50%;
  height: 50%;
  background: #FF9662;
  transform-origin: 100% 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;
  transform: rotate(-45deg);
}

.circle-left2 {
  position: absolute;
  width: 50%;
  height: 50%;
  background: #000;
  transform-origin: 100% 100%;
  left: 0;
  top: 0;
  z-index: 4;
  transform: rotate(-45deg)
}

.circle-right {
  width: 50%;
  height: 100%;
  background: #000;
  transform-origin: 0% 50%;
  position: absolute;
  right: 0;
  z-index: 2;
  transform: rotate(-45deg);
}

.circle-mask {
  width: 50%;
  height: 50%;
  /* background: #000; */
  transform-origin: 100% 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;
  transform: rotate(-135deg);
  /* opacity: 0; */
  /* background: rgba(255, 255, 255,1 ); */
}