css实现loading动画效果

最新推荐文章于 2024-06-25 10:37:03 发布

惜缘贞

最新推荐文章于 2024-06-25 10:37:03 发布

阅读量303

点赞数

本文链接：https://blog.csdn.net/qq_33624126/article/details/76639741

版权

html代码如下：

<div class="wait">
   <span class="close">+</span>
   <div class="tp">
      Loading...
   </div>
   <span class="explain">上传中</span>
</div>
<div class="black_overlay_1"></div>

css代码如下：

.wait .tp{position: relative;top:15%;font-size: 10px;text-indent: -9999em;background: #fff;margin: 0 auto;width: 4em;height: 4em;border-radius: 50%;background: -moz-linear-gradient(left, #ffffff, #616161 60%);background: -webkit-linear-gradient(left, #ffffff, #616161 60%);background: -o-linear-gradient(left, #ffffff, #616161 60%);background: -ms-linear-gradient(left, #ffffff, #616161 60%);background:linear-gradient(to right,#fff,#616161 60%);-webkit-animation: load 1.4s infinite linear;/* animation: load 1.4s infinite linear; */}
.wait .tp:before{width: 24px;height: 24px;background: #FFF;border-radius: 100% 0 0 0;position: absolute;top: 0;left: 0;content: '';}
.wait .tp:after{background: #4C4C4C;width: 36px;height: 36px;border-radius: 50%;content: '';margin: auto;position: absolute;top: 0;left: 0;bottom: 0;right: 0;}
@-webkit-keyframes load {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}
@keyframes load {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.wait{display: none; position:fixed;z-index:1002 ; width: 130px;height: 110px;border-radius: 10px;left: 50%;top:50%;margin:-50px 0 0 -60px;background: #4C4C4C;}
.wait .close{display: inline-block;font-size: 30px;text-align: center;color: #999;line-height: 27px;font-weight: bold; top: -11%;right:-6%;width: 30px;height: 30px; background: #4C4C4C;border-radius: 50%;transform:rotate(45deg);-ms-transform:rotate(45deg);-moz-transform:rotate(45deg);-webkit-transform:rotate(45deg);-o-transform:rotate(45deg);  position: absolute;}
.tp{-webkit-transform: translateZ(0);-moz-transform: translateZ(0);-ms-transform: translateZ(0);-o-transform: translateZ(0);transform: translateZ(0);}
.wait .tp:before,.tp:after {content: '';position: absolute;top: 0;}
.black_overlay_1{display: none; position:fixed; top:0; left: 0; width: 100%; height: 100%; background-color: #fff; z-index:1001; opacity:.0;  }
.wait .explain {
  display: block;
  text-align: center;
  color: #fff;
  position: absolute;
  top: 75px;
  width: 100%;
}