javascript - 如何使CSS圆形微调器的前缘半月形

Question

图片:Circular spinner rotating along the border rim of other solid circle

请访问:https://codepen.io/sadashivjp/pen/oqqzwg 我在这里创建了一个 UI codepen。您可以对此进行任何更改，并在此处发布解决方案。

同样的代码如下:

.outer-circle{
  width:330px;
  height:330px;
  border:30px solid #001b33;
  position:absolute;
  top:0; bottom:0; left:0;right:0;
  margin:auto;
  border-radius:50%; 
}

.spinner {
	animation: rotate 5s linear infinite;
	border-radius: 50%;
	height: 360px;
	width: 360px;
	position: relative;
  left: -15px;
  top: -15px;
}

.spinner:before,
.spinner:after {
	content: '';
	position: absolute;
}

.spinner:before {
	border-radius: 50%;
	background:
		linear-gradient(0deg,   hsla(0, 0%, 100%, 0) 50%, hsla(0, 0%, 100%, 0.1) 100%)   0%   0%,
		linear-gradient(90deg,  hsla(0, 0%, 100%, 0.1)  0%, hsla(0, 0%, 100%, 0.5) 100%) 100%   0%,
		linear-gradient(180deg, hsla(0, 0%, 100%, 0.5)  0%, hsla(0, 0%, 100%, 0.60) 100%) 100% 100%,
		linear-gradient(360deg, hsla(0, 0%, 100%, 0.60)  0%, hsla(0, 0%, 100%, 0.70 ) 100%)   0% 100%
	;
	background-repeat: no-repeat;
	background-size: 50% 50%;
	top: -1px;
	bottom: -1px;
	left: -1px;
	right: -1px;
}

.spinner:after {
	background: black;
        border: 15px solid #001b33;
	border-radius: 50%;
	top: 3%;
	bottom: 3%;
	left: 3%;
	right: 3%;
}

@keyframes rotate {
	from { transform: rotate(0deg);   }
	to   { transform: rotate(360deg); }
}

<div class="outer-circle">
<div class="spinner"></div>
</div>

这段代码有两个问题: 1) 导致 IE11 浏览器中微调器的摇晃效果。但是，在谷歌浏览器中完美运行。 2) 如附图所示，需要在内部白色微调器圆圈前端的前缘具有类似的半月形(圆柱底形)效果。

如何解决这两个问题？ 修改我现有的代码或在任何其他代码上使用 SVG 或 Canvas 提供解决方案都可以。

Answer 1

在微调器中添加一个 div。

.outer-circle{
  width:330px;
  height:330px;
  border:30px solid #001b33;
  position:absolute;
  top:0; bottom:0; left:0;right:0;
  margin:auto;
  border-radius:50%; 
}

.spinner {
	animation: rotate 5s linear infinite;
	border-radius: 50%;
	height: 360px;
	width: 360px;
	position: relative;
  left: -15px;
  top: -15px;
}

.spinner:before,
.spinner:after {
	content: '';
	position: absolute;
}

.spinner:before {
	border-radius: 50%;
	background:
		linear-gradient(0deg,   hsla(0, 0%, 100%, 0) 50%, hsla(0, 0%, 100%, 0.1) 100%)   0%   0%,
		linear-gradient(90deg,  hsla(0, 0%, 100%, 0.1)  0%, hsla(0, 0%, 100%, 0.5) 100%) 100%   0%,
		linear-gradient(180deg, hsla(0, 0%, 100%, 0.5)  0%, hsla(0, 0%, 100%, 0.60) 100%) 100% 100%,
		linear-gradient(360deg, hsla(0, 0%, 100%, 0.60)  0%, hsla(0, 0%, 100%, 0.70 ) 100%)   0% 100%
	;
	background-repeat: no-repeat;
	background-size: 50% 50%;
	top: -1px;
	bottom: -1px;
	left: -1px;
	right: -1px;
}

.spinner:after {
	background: black;
        border: 15px solid #001b33;
	border-radius: 50%;
	top: 3%;
	bottom: 3%;
	left: 3%;
	right: 3%;
}

@keyframes rotate {
	from { transform: rotate(0deg);   }
	to   { transform: rotate(360deg); }
}
.circle{
        background: #b1bac1;
    width: 10px;
    height: 10px;
    position: absolute;
    top: 177px;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: 50% 50%;

}

<div class="outer-circle">
  <div class="spinner">
      <div class="circle">
      </div>
  </div>
</div>