javascript - 带有边框/周边的按钮作为加载器？

Question

撇开实际的网络集成方面不谈，创建一个周长/边框是加载器的按钮的最佳 css/javascript 技术是什么，如下图所示：

标签： javascriptbutton

Answer 1

是你在找什么吗？

.rect {
  fill:green;
  stroke-width:3;
  stroke:yellow;
  border-radius: 10%;
  stroke-dashoffset: -50px;
  animation: loader-animation 4s linear;
}

@keyframes loader-animation {
  0% {
    stroke-dasharray: 0, 400px;
  }
  100% {
    stroke-dasharray: 400px, 0;
  }
}

<svg>
  <rect class="rect" x="10" y="10" rx="5" width="100" height="100"/>
</svg>