纯CSS 加载样式

          先看下效果图

  <style rel="stylesheet">
                #iframeFather {
                    z-index: 1000000; 
                    position: absolute;
                    display: block;/*这里控制显示图标*/
                    width: 100%; 
                    height: 100%; 
                    top: 0px; 
                    left: 0px;
                    background-color:rgba(0,0,0,0.1);
                    text-align: center;
                    color: #fff;
                    font-size: 16px;
                    padding-top: 10%;
                }
                .loading {
                  width: 200px;
                  height: 200px;
                  color: #18a689;
                  transform-origin: center;
                  font-size: 0;
                  margin: 50px auto;
                  border-radius: 50%;
                  transform: scale(0.2);
                }
                .loading div {
                  color: #18a689;
                  width: 24px;
                  height: 24px;
                  margin-top: 12px;
                  margin-left: 12px;
                  position: absolute;
                  top: 50%;
                  left: 50%;
                  border-radius: 100%;
                }
                .loading div span {
                  width: 24px;
                  height: 24px;
                  animation: ball-spin 1s infinite ease-in-out;
                  display: block;
                  background-color: currentColor;
                  border: 0 solid currentColor;
                  border-radius: 100%;
                }
                .loading div:nth-child(1) {
                  transform: translate(100px, 0px);
                }
                .loading div:nth-child(1) > span {
                  animation-delay: -1.0714285714s;
                }
                .loading div:nth-child(2) {
                  transform: translate(90.0968867902px, 43.3883739118px);
                }
                .loading div:nth-child(2) > span {
                  animation-delay: -1.1428571429s;
                }
                .loading div:nth-child(3) {
                  transform: translate(62.3489801859px, 78.1831482468px);
                }
                .loading div:nth-child(3) > span {
                  animation-delay: -1.2142857143s;
                }
                .loading div:nth-child(4) {
                  transform: translate(22.2520933956px, 97.4927912182px);
                }
                .loading div:nth-child(4) > span {
                  animation-delay: -1.2857142857s;
                }
                .loading div:nth-child(5) {
                  transform: translate(-22.2520933956px, 97.4927912182px);
                }
                .loading div:nth-child(5) > span {
                  animation-delay: -1.3571428571s;
                }
                .loading div:nth-child(6) {
                  transform: translate(-62.3489801859px, 78.1831482468px);
                }
                .loading div:nth-child(6) > span {
                  animation-delay: -1.4285714286s;
                }
                .loading div:nth-child(7) {
                  transform: translate(-90.09688679px, 43.3883739118px);
                }
                .loading div:nth-child(7) > span {
                  animation-delay: -1.5s;
                }
                .loading div:nth-child(8) {
                  transform: translate(-99.9999999924px, 0.000000001px);
                }
                .loading div:nth-child(8) > span {
                  animation-delay: -1.5714285714s;
                }
                .loading div:nth-child(9) {
                  transform: translate(-90.0968866482px, -43.3883738896px);
                }
                .loading div:nth-child(9) > span {
                  animation-delay: -1.6428571429s;
                }
                .loading div:nth-child(10) {
                  transform: translate(-62.3489783022px, -78.1831479152px);
                }
                .loading div:nth-child(10) > span {
                  animation-delay: -1.7142857143s;
                }
                .loading div:nth-child(11) {
                  transform: translate(-22.2520743968px, -97.4927875004px);
                }
                .loading div:nth-child(11) > span {
                  animation-delay: -1.7857142857s;
                }
                .loading div:nth-child(12) {
                  transform: translate(22.2522469032px, -97.4927581554px);
                }
                .loading div:nth-child(12) > span {
                  animation-delay: -1.8571428571s;
                }
                .loading div:nth-child(13) {
                  transform: translate(62.3500128369px, -78.182905459px);
                }
                .loading div:nth-child(13) > span {
                  animation-delay: -1.9285714286s;
                }
                .loading div:nth-child(14) {
                  transform: translate(90.1028422071px, -43.3868560124px);
                }
                .loading div:nth-child(14) > span {
                  animation-delay: -2s;
                }

                @keyframes ball-spin {
                  0%,
                    100% {
                    opacity: 1;
                    transform: scale(1);
                  }
                  20% {
                    opacity: 1;
                  }
                  80% {
                    opacity: 1;
                    transform: scale(0);
                  }

            </style>

<div id="iframeFather">
                    <div style="position: relative;">
                        <div class="loading">
                              <div><span></span></div>
                              <div><span></span></div>
                              <div><span></span></div>
                              <div><span></span></div>
                              <div><span></span></div>
                              <div><span></span></div>
                              <div><span></span></div>
                              <div><span></span></div>
                              <div><span></span></div>
                              <div><span></span></div>
                              <div><span></span></div>
                              <div><span></span></div>
                              <div><span></span></div>
                              <div><span></span></div>
                        </div>
                    </div>
                </div>