带圆角的微调器 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/

带圆角的微调器 CSS

Spinner CSS with Rounded Corners

css

css-loader