纯 css 实现 a 标签 loading 效果

啥也不说了，把下面的代码加入根 scss / less 文件就行了。

需要原生 css 代码的话，自己改改就行了。

    a {
      &[data-loading='true'] {
        opacity: 0.6;
        cursor: default;
        pointer-events: none;
        &::before {
          content: '';
          display: inline-block;
          width: 1em;
          height: 1em;
          margin-right: 0.5em;
          color: currentColor;
          border: 1px solid currentColor;
          border-radius: 50%;
          vertical-align: -10%;
          clip-path: polygon(0% 0%, 100% 0%, 100% 30%, 0% 30%);
          animation: rotate 1s linear infinite;
          @keyframes rotate {
            from {
              transform: rotateZ(0deg);
            }
            to {
              transform: rotateZ(360deg);
            }
          }
        }
      }
    }

复制代码

然后使用 data-loading boolean 属性就行了。

比如 React 中：

<a data-loading={loading} onClick={this.onClick}>点我</a>
复制代码

Vue 中

<a :data-loading="loading" @click="click">点我</a> 
复制代码

---

为什么使用 data-loading 而不是 loading？

React 会对 html 标签中非原生 boolean 属性报错。

Vue 的话好像不报错，可以自己改成 loading。