带圆角的矩形微调器

Question

我正在尝试制作在

上看起来像这样的加载程序

CodePen

但我需要圆形边框和矩形，而不是方框。这样我就可以把我们公司的logo放到loader上了

我试着再制作一层，这将制作内联半径和包装器，我设置了 border-radius 和 overflow: hidden。

但是，动画看起来很糟糕而且不流畅。

你能帮我把这个动画做得更好吗？或者你创造了类似的东西？

更新代码SASS

我还在试验。

#logoLoader
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 250px;
  height: 50px;
  margin-left: -125px;
  margin-top: -32px;
  -webkit-transition: background-color 500ms;
  transition: background-color 500ms;
  cursor: pointer;
  overflow: hidden;
  border-radius: 5px;
  .logo-image-wrapper
    display: inline-block;
    position: absolute;
    width: 100%;
    z-index: 150;
    img 
      width: 100%;
      height: auto;
  .logo-inline-corner
    display: block;
    position: absolute;
    width: calc(100% - 6px);
    height: calc(100% - 6px);
    background-color: #fff;
    border-radius: 5px;
    z-index: 130;
    margin: 3px;
  .logo-background
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #fff;
    z-index: 100;
  .loader
    display: block;
    position: absolute;
    background-color: #8dc63f;
    z-index: 125;

@keyframes slide1
  0%
    border-top-right-radius: 0;
  50%
    width: calc(100% - 2px);
    margin-left: 0;
  99%
    border-top-right-radius: 0;
  100%
    margin-left: 100%;
    border-top-right-radius: 50px;

@keyframes slide2
  0%
    border-top-right-radius: 0;
  50%
    height: calc(100% - 2px);
    margin-top: 0;
  99%
    border-top-right-radius: 0;
  100%
    margin-top: 100%;
    border-bottom-right-radius: 50px;

@keyframes slide3
  0%
    border-top-right-radius: 0;
  50%
    width: calc(100% - 2px);
    margin-right: 0;
  99%
    border-top-right-radius: 0;
  100%
    margin-right: 100%;
    border-bottom-left-radius: 50px;

@keyframes slide4
  0%
    border-top-right-radius: 0;
  50%
    height: calc(100% - 2px); 
    margin-bottom: 0;
  99%
    border-top-right-radius: 0;
  100%
    margin-bottom: 100%;
    border-top-left-radius: 50px;

HTML

<div id="logoLoader" style="display: none;">
      <div class="c4w-logo">
        <img src="images/c4w-logo-loader.png" />
      </div>
      <div class="logo-inline-corner"></div>
      <div class="loader" style="left:2px; top:0; height:2px; width:0; animation:slide1 1s linear forwards infinite" ></div>
      <div class="loader" style="right:0; top:2px; width:2px; height:0; animation:slide2 1s linear forwards infinite; animation-delay:0.5s"></div>
      <div class="loader" style="right:2px; bottom:0; height:2px; width:0; animation:slide3 1s linear forwards infinite"></div>
      <div class="loader" style="left:0; bottom:2px; width:2px; height:0; animation:slide4 1sl inear forwards infinite; animation-delay:0.5s"></div>
      <div class="logo-background"></div>
</div>

Answer 1

SVG 会更适合这里。只需调整 width/height 和 stroke 属性的值：

svg {
  width: 200px;
  height: 100px;
  margin: 10px;
  overflow: visible;
}

svg>rect {
  stroke:purple;
  fill:transparent;
  stroke-dasharray: 130, 150;
  animation: rotate 2s linear infinite;
}

@keyframes rotate {
  to {
    stroke-dashoffset: 280;
  }
}

<svg xmlns="http://www.w3.org/2000/svg">
  <rect x="5" y="5" height="100%" width="100%"  rx="20" ry="20" stroke-width="10"/>
</svg>

不过用CSS也可以做到。这是一个没有透明度的想法，其中的诀窍是旋转一个仅覆盖边框的元素，我们将在其中应用 clip-path:

.box {
  width:200px;
  height:100px;
  overflow:hidden;
  border-radius:20px;
  position:relative;
  z-index:0;
}
.box:after {
  content:"";
  position:absolute;
  top:10px;
  left:10px;
  right:10px;
  bottom:10px;
  background:#fff;
  border-radius:10px;
}
.box:before{
  content:"";
  position:absolute;
  top:-50%;
  left:-50%;
  right:-50%;
  bottom:-50%;
  background:blue;
  clip-path:polygon(0 0,0 100%,100% 0, 100% 100%);
  animation:rotate 1s linear infinite;
}
@keyframes rotate {
  50% {
    transform:rotate(90deg) scaleX(0.5) ;
  }
  100% {
    transform:rotate(180deg);
  }
}

<div class="box">

</div>

要理解技巧，请移除溢出并更改一些颜色：

.box {
  width:200px;
  height:100px;
  border-radius:20px;
  position:relative;
  z-index:0;
  border:1px solid;
  margin:50px;
}
.box:after {
  content:"";
  position:absolute;
  top:10px;
  left:10px;
  right:10px;
  bottom:10px;
  background:rgba(255,255,255,0.4);
  border-radius:10px;
}
.box:before{
  content:"";
  position:absolute;
  top:-50%;
  left:-50%;
  right:-50%;
  bottom:-50%;
  background:blue;
  clip-path:polygon(0 0,0 100%,100% 0, 100% 100%);
  animation:rotate 1s linear infinite;
}
@keyframes rotate {
  50% {
    transform:rotate(90deg) scaleX(0.5) ;
  }
  100% {
    transform:rotate(180deg);
  }
}

<div class="box">

</div>

不用clip-path和一个简单的矩形也可以做到：

.box {
  width:200px;
  height:100px;
  overflow:hidden;
  border-radius:20px;
  position:relative;
  z-index:0;
}
.box:after {
  content:"";
  position:absolute;
  top:10px;
  left:10px;
  right:10px;
  bottom:10px;
  background:#fff;
  border-radius:10px;
}
.box:before{
  content:"";
  position:absolute;
  top:-100%;
  left:30%;
  right:30%;
  bottom:-100%;
  background:blue;
  animation:rotate 1s linear infinite;
}
@keyframes rotate {
  50% {
    transform:rotate(90deg) scaleX(0.5) ;
  }
  100% {
    transform:rotate(180deg);
  }
}

<div class="box">

</div>

带圆角的矩形微调器

Rectangle spinner with rounded corners

css

loader

css-animations