css 实现 加载中动画效果

上代码：

<style>
.pswp__preloader__icn {
      opacity:0.75;
      width: 24px;
      height: 24px;
      -webkit-animation: clockwise 500ms linear infinite;
      animation: clockwise 500ms linear infinite;
      margin-left: 60px;
    }

    .pswp__preloader__cut {
      position: relative;
      width: 12px;
      height: 24px;
      overflow: hidden;
      position: absolute;
      top: 0;
      left: 0;
    }

    .pswp__preloader__donut {
      box-sizing: border-box;
      width: 24px;
      height: 24px;
      border: 2px solid #000;
      border-radius: 50%;
      border-left-color: transparent;
      border-bottom-color: transparent;
      position: absolute;
      top: 0;
      left: 0;
      background: none;
      margin:0;
      -webkit-animation: donut-rotate 1000ms cubic-bezier(.4,0,.22,1) infinite;
      animation: donut-rotate 1000ms cubic-bezier(.4,0,.22,1) infinite;
    }

    @-webkit-keyframes clockwise {
      0% { -webkit-transform: rotate(0deg) }
      100% { -webkit-transform: rotate(360deg) }
    }
    @keyframes clockwise {
      0% { transform: rotate(0deg) }
      100% { transform: rotate(360deg) }
    }
    @-webkit-keyframes donut-rotate {
      0% { -webkit-transform: rotate(0) }
      50% { -webkit-transform: rotate(-140deg) }
      100% { -webkit-transform: rotate(0) }
    }
    @keyframes donut-rotate {
      0% { transform: rotate(0) }
      50% { transform: rotate(-140deg) }
      100% { transform: rotate(0) }
    }
</style>

<div class="pswp__preloader__icn">
  <div class="pswp__preloader__cut">
     <div class="pswp__preloader__donut"></div>
  </div>
</div>