【UI库】Loading组件

本次要模仿的是vant组件中的loading组件

需求

本次开发有两种加载样式，一种是圆形滚动，一种是菊花图。

开发过程

圆形滚动

开发圆形滚动的过程中我们需要使用到svg。

<svg width="100%" height="100%" viewBox="25 25 50 50">
	<circle cx="50" cy="50" r="20" fill="none"  stroke="#ddd" stroke-width="5px"></circle>
</svg>

svg: 长宽是100%， viewBox可以理解成你在换头像的时候，从坐标0,0开始，截取长宽为50 50的部分头像。

circle：一个半径为20，中心点位于50 50,没有填充色，边框为5px的#ddd的圆形。

viewBox: 个人尝试之后理解这里的取值是 cx/2 cx/2 cx cx。

组件的实现代码如下：

<div class="ar-loading">
    <div class="ar-loading-spinner">
      <svg class="circular" viewBox="25 25 50 50">
        <circle id="circle1" cx="50" cy="50" r="20" fill="none"></circle>
      </svg>
    </div>
 </div>

.ar-loading{
  &-spinner{
    position: relative;
    display: inline-block;
    width: 30px;
    height: 30px;
    vertical-align: middle;
    animation: ar-rotate 0.8s linear infinite;
    .circular{
      width: 100%;
      height: 100%;
      circle {
        stroke: @--color-primary;
        stroke-width: 3;
        stroke-linecap: round;
        animation: ar-circular 1.5s ease-in-out infinite;
      }
    }
  }
}

@keyframes ar-rotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes ar-circular {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }

  50% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -40;
  }

  100% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -120;
  }
}

内部圆圈的变化通过控制它的stroke-dasharray和stroke-dashoffset,然后圆圈的转动由外部的容器旋转完成。

菊花图

 <div class="ar-loading-spinner">
     <i v-for="(item, index) in 12" :key="index"></i>
  </div>

这里的i样式，用了less中的when语法：

.ar-loading{
  &-spinner{
    position: relative;
    display: inline-block;
    width: 30px;
    height: 30px;
    vertical-align: middle;
    animation: ar-rotate 1.5s linear infinite;
    animation-timing-function: steps(12);
    color: currentColor;
    i{
      position: absolute;
      top:0;
      left: 0;
      width: 100%;
      height: 100%;
      &::before{
        content: '';
        display: block;
        width: 2px;
        height: 25%;
        margin: 0 auto;
        background: currentColor;
        border-radius: 40%;
      }
    }
  }
}

.generate-spinner(@n, @i: 1) when (@i =< @n) {
  .ar-loading-spinner i:nth-of-type(@{i}) {
    transform: rotate(@i * 30deg);
    opacity: 1 - (0.75 / 12) * (@i - 1);
  }
  .generate-spinner(@n, (@i + 1));
}
.generate-spinner(12);

最终实现效果：

学习链接

loading带你svg入门

SVG学习之stroke-dasharray 和 stroke-dashoffset 详解

结尾

后期研究了如何能this.$loading.show()完善这篇文章~