纯css来实现一个loading, 支持局部loading和全局loading

在日常开发中， 有时候会遇到编写一些小型项目、demo之类的， 这时为了性能或者其他原因一般不会引入大型且功能全面的js库或者css库， 此时如果遇到一个需求需要在网络请求时间段内展示一个loading的动画需要如何处理，本人就是遇到了以上问题， 才想到了这个方法，分享出来、当然也可能是村里刚通网、没有见过世面。

本方法用到的css特性有属性选择器、before、 after2个伪类元素、 keyframes 来添加一个简单的选转动画。

实现思路就是，当接到loading需求的时候，

1: 可以给指定dom一个自定义属性， 本文中使用的是data-custom-loading, 利用html5的dataset给指定dom添加loading的属性

dom.dataset.customLoading = 'true';

如果想要全局loading可以直接将自定义属性添加在body上。

2: 利用css实现功能，思路就是after 设置成100%的大小用来充当mask， before 居中展示，内置一张好看的的loading样式的图片（本人当时偷了elementUI的一张图片）， 附加一个旋转的动画，就可以了，下面将代码贴出来

body, article, aside, footer, table, ul, ol, dl {
  &[data-custom-loading="true"] {
    position: relative;

    &::after {
      content: ' ';
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      background-color: rgba(000, 000, 000, 0.5);
    }
  
    &::before {
      z-index: 10;
      position: absolute;
      content: url('../../assets/icon-loading-circle.svg');  // 我这里的
      top: calc(50% - 6px);
      left: calc(50% - 10px);
      animation: rotate-infinite 1s linear infinite;
    }
  
    @keyframes rotate-infinite {
      from {
        transform: rotate(0);
      }
      to {
        transform: rotate(360deg);
      }
    }
  }
}

3: 假设接口请求完成， 这个时候只需要将自定义属性值随便修改一下就可以了 dom.dataset.customLoading = 'false';。

总结： 个人感觉这个方法还是用一些应用场景的， 既可以全局loading， 也可以局部loading， 最后希望我的分享能帮助到大家。