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

图片：Circular spinner rotating along the border rim of other solid circle
请访问：https://codepen.io/sadashivjp/pen/oqqzwg
我在这里创建了一个UI代码笔。您可以对此进行任何更改，并在此处发布解决方案。
同一代码如下：

.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浏览器中引起旋转圈抖动（抖动）效应。但是，在Google chrome浏览器中工作得很好。
2）如附图所示，需要在内部白色微调器圆前面的前缘处具有类似半月形（圆柱底形）的效果。
如何解决这两个问题？
修改我现有的代码或提供SVG或画布在任何其他解决方案将是罚款。

最佳答案

把你纺纱机里的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>

关于javascript - 如何使CSS圆微调框的前缘半月形，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/49585735/