带圆角的微调器 CSS

Question

我正在尝试开发具有三个环的微调器。 我希望边缘光滑。 有人可以帮忙吗？

看那个：

 .loader { animation: spin 4s infinite linear; border: solid 2vmin transparent; border-radius: 50%; border-right-color: #00ACC6; border-top-color: #00ACC6; box-sizing: border-box; height: 20vmin; left: calc(50% - 10vmin); position: fixed; top: calc(50% - 10vmin); width: 20vmin; z-index: 1; }.loader:before { animation: spin 5s infinite linear; border: solid 2vmin transparent; border-radius: 50%; border-right-color: #A0C800; border-top-color: #A0C800; box-sizing: border-box; content: ""; height: 16vmin; left: 0; position: absolute; top: 0; width: 16vmin; }.loader:after { animation: spin 4s infinite linear; border: solid 2vmin transparent; border-radius: 50%; border-right-color: #984509; border-top-color: #984509; box-sizing: border-box; content: ""; height: 12vmin; left: 2vmin; position: absolute; top: 2vmin; width: 12vmin; } @keyframes spin { 50% { transform: rotate(360deg); } }

 <div class="loader"> </div>

Answer 1

您要求的微调器的工作样本，

 .spinner { margin: 50px auto; position: relative; width: 150px; height: 150px }.spinner.circle { border-radius: 50%; border: 5px solid transparent; border-top-color: #000; animation: rotate linear infinite; position: absolute }.spinner.circle.one { width: 50px; height: 50px; left: 50px; top: 50px; animation-duration: .8s }.spinner.circle.two { width: 75px; height: 75px; left: 38px; top: 38px; animation-duration: .7s }.spinner.circle.three { width: 100px; height: 100px; left: 25px; top: 25px; animation-duration: 1s } @keyframes rotate { form { transform: rotate(0deg) } to { transform: rotate(360deg) } }

 <div class="spinner"> <div class="circle one"></div> <div class="circle two"></div> <div class="circle three"></div> </di

这里有一个页面，里面有各种各样的 CSS 加载器，请看一下。 它确实有您要求的类似微调器。

https://raju28.github.io/loaders/