CSS 旋转器样式

Question

有人可以改进我的微调器吗？我想要一端粗一点，另一端细一点。我尝试了一些但没有用。

<div id="data-loader">
      <div class="loader">
          <div class="blue"></div>
      </div>
  </div>


#data-loader{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color:#ffffff;
}
.loader {
    left: 50%;
    top: 50%;
    position: fixed;
    width: 60px;
    height: 60px;
    margin: -30px 0 0 -30px;
    border-radius:50%;
}

.loader .blue {
    position: absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    border-top:4px solid #7199C1;
    border-right:3px solid #7199C1;
    border-bottom:1px solid #7199C1;
    border-radius:50%;
    -webkit-animation: spin 1s linear infinite;
    -moz-animation:spin 1s linear infinite;
    animation: spin 1s linear infinite;
    -webkit-animation-name: spinner;
    -moz-animation-name: spinner;
}

@-webkit-keyframes spinner
{
    from{-webkit-transform:rotate(0deg);}
    to{-webkit-transform:rotate(360deg);}
}
@-moz-keyframes spinner
{
    from{-moz-transform:rotate(0deg);}
    to{-moz-transform:rotate(360deg);}
}

我在 div 的顶部、右侧和底部设置了边框。边界半径为 50%，

http://plnkr.co/edit/UKJZzDsDyfHxknRu12ZP?p=preview

Answer 1

我从来没有在这里回答过，但试着把你的 border-left: 4px solid transparent。

将您的 border-top 设为 4px solid #color。如果你想在末端增加厚度，将 10px 放在 border-left 和 border-top.

上

Answer 2

如果你想要的效果就是我认为你想要的效果，那么你就太接近了。

通过改变这三个数字，动画在开始时变粗，到结束时变细。

border-top:3px solid #7199C1; border-right:6px solid #7199C1; border-bottom:6px solid transparent;

CSS 旋转器样式

CSS spinner styling

html

css

css-transitions