用伪类和 svg 来实现 loading 效果

前言

之前用 antd，一直很好奇，antd 里面这种按钮的 loading 效果是怎么做出来的。

Apr-08-2021 23-33-21.gif

最近刚好有兴趣，就花时间好好的研究了一下，这个效果究竟是如何实现的。

首先我们打开控制台，可以看到，加载的时候，动态的遮罩，就是通过这个 ::before 这个伪类添加上去的。

image.png

想要自己尝试的童鞋，可以试着将 before 删除掉，就会发现，按钮上的遮罩消失了。

而按钮文字上的 loading 小圆圈又是如何实现的呢？

这个很简单，antd 本身就有这种 Icon 组件。

知道了基本原理以后，那么我们就可以很容易的来模仿一个我们自己的 loading 状态按钮了。

放出一波预览

先预览一下，我们最终写出来的效果吧：

Apr-08-2021 23-52-13.gif

怎么样，效果还不错吧，很像是那么一回事儿。

具体怎么做呢，别急，接下来让我娓娓道来。

实现步骤

首先，我们需要对目标按钮设置 position: relative 属性。

这样做的目的，是为了，让 ::before 生成的元素，能够刚好定位到我们的目标上，做成这种遮罩的效果。

#submitBtn {
  position: relative;
  cursor: pointer;
  height: 32px;
  width: 64px;
  position: relative;
  border: 1px solid #d9d9d9;
  background: #339999;
  color: #fff;
  padding: 0;
  margin: 20px auto;
  line-height: 32px;
  vertical-align: middle;
  text-align: center;
}
#submitBtn:focus {
  outline: unset;
}
#submitBtn:active {
  box-shadow: 2px 2px 5px 2px #d6d6d6;
  transform: scale(1.01);
}

当然，为了我们的 button 按钮更美观，这里还做了一些其他样式的调整。

我们先尝试下，如何给 ::before 伪类添加到按钮上方，做成那种效果。

我们直接将 content 属性设置为空，然后调整样式，使其定位到目标按钮上方，并且设置一定的透明效果。

代码如下：

.loading::before {
  display: block;
  position: absolute;
  top: -1px;
  right: -1px;
  bottom: -1px;
  left: -1px;
  z-index: 1;
  background: rgb(255, 255, 255);
  border-radius: inherit;
  opacity: 0.35;
  transition: opacity 0.2s;
  content: "";
  cursor: not-allowed;
}

为了添加一个转圈的动画效果，我们用到了一段 svg 动画代码。

<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="28px"
height="28px"
viewBox="0 0 50 50"
style="enable-background: new 0 0 50 50"
xml:space="preserve"
>
  <path
    fill="#FF6700"
    d="M25.251,6.461c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615V6.461z"
    transform="rotate(275.098 25 25)"
  >
    <animateTransform
      attributeType="xml"
      attributeName="transform"
      type="rotate"
      from="0 25 25"
      to="360 25 25"
      dur="0.6s"
      repeatCount="indefinite"
    ></animateTransform>
  </path>
</svg>

为了实现，点击的时候，动态的添加到按钮上，有几种方案可以实现：

1. 可以直接将这段 svg 代码，放到 html 代码里。初始化的时候，将其 display 属性设置为 none；当需要实现加载效果的时候，动态的更改 display 属性
2. 动态的通过 js，来控制这段 html 代码的添加与否。

至于，具体采用哪种方式，视自己的喜好来决定就好。

具体详细的代码，这里就不贴出来了，感兴趣的童鞋，可以参考下，这个这个 demo：https://lovefengruoqing.github.io/frontend_spark/before_loading/index.html。

可以自己点进去，操控一下，亲自感受下效果。

有兴趣了解源码的话，传送门在这里：https://github.com/lovefengruoqing/frontend_spark/tree/master/before_loading。

或者直接在 demo 页面，调出 devtool 即可，代码没有压缩，直接可看。