html loading 效果,原生html css3 Loading效果

测试loading

html{font-size: 100px;}

/*loading 效果*/

.loadingW{position: fixed;top: 0px;left:0px;width: 100%;height: 100%;z-index: 100;display: block;background-color: rgba(0,0,0,0.3);}

.loadingDiv{position: relative;background-color: rgba(0,0,0,0.6);width: 1.5rem;height: 1.5rem;left:50%;top:50%;border-radius: 15px;transform: translate(-50%,-50%);}

.loadingDiv span{display: inline-block;height: 0.05rem;width: 0.2rem;border-radius: 0.025rem;background-color: white;position: absolute;

animation: loadingMove 1.2s linear infinite;-webkit-animation: loadingMove 1.2s linear infinite;opacity: 0.3;left:17%;top:50%;transform:translateY(-50%);

transform-origin: 0.5rem 0.025rem;-ms-transform-origin: 0.5rem 0.025rem;-webkit-transform-origin: 0.5rem 0.025rem;-moz-transform-origin: 0.5rem 0.025rem;-o-transform-origin: 0.5rem 0.025rem;

}

.loadingDiv span:nth-of-type(1){animation-delay: 0s;}

.loadingDiv span:nth-of-type(2){transform: rotate(30deg);-ms-transform: rotate(30deg);-webkit-transform: rotate(30deg);-moz-transform: rotate(30deg);-o-transform: rotate(30deg);animation-delay: 0.1s;}

.loadingDiv span:nth-of-type(3){transform: rotate(60deg);-ms-transform: rotate(60deg);-webkit-transform: rotate(60deg);-moz-transform: rotate(60deg);-o-transform: rotate(60deg);animation-delay: 0.2s;}

.loadingDiv span:nth-of-type(4){transform: rotate(90deg);-ms-transform: rotate(90deg);-webkit-transform: rotate(90deg);-moz-transform: rotate(90deg);-o-transform: rotate(90deg);animation-delay: 0.3s;}

.loadingDiv span:nth-of-type(5){transform: rotate(120deg);-ms-transform: rotate(120deg);-webkit-transform: rotate(120deg);-moz-transform: rotate(120deg);-o-transform: rotate(120deg);animation-delay: 0.4s;}

.loadingDiv span:nth-of-type(6){transform: rotate(150deg);-ms-transform: rotate(150deg);-webkit-transform: rotate(150deg);-moz-transform: rotate(150deg);-o-transform: rotate(150deg);animation-delay: 0.5s;}

.loadingDiv span:nth-of-type(7){transform: rotate(180deg);-ms-transform: rotate(180deg);-webkit-transform: rotate(180deg);-moz-transform: rotate(180deg);-o-transform: rotate(180deg);animation-delay: 0.6s;}

.loadingDiv span:nth-of-type(8){transform: rotate(210deg);-ms-transform: rotate(210deg);-webkit-transform: rotate(210deg);-moz-transform: rotate(210deg);-o-transform: rotate(210deg);animation-delay: 0.7s;}

.loadingDiv span:nth-of-type(9){transform: rotate(240deg);-ms-transform: rotate(240deg);-webkit-transform: rotate(240deg);-moz-transform: rotate(240deg);-o-transform: rotate(240deg);animation-delay: 0.8s;}

.loadingDiv span:nth-of-type(10){transform: rotate(270deg);-ms-transform: rotate(270deg);-webkit-transform: rotate(270deg);-moz-transform: rotate(270deg);-o-transform: rotate(270deg);animation-delay: 0.9s;}

.loadingDiv span:nth-of-type(11){transform: rotate(300deg);-ms-transform: rotate(300deg);-webkit-transform: rotate(300deg);-moz-transform: rotate(300deg);-o-transform: rotate(300deg);animation-delay: 1s;}

.loadingDiv span:nth-of-type(12){transform: rotate(330deg);-ms-transform: rotate(330deg);-webkit-transform: rotate(330deg);-moz-transform: rotate(330deg);-o-transform: rotate(330deg);animation-delay: 1.1s;}

@keyframes loadingMove{

0%{opacity: 1}

100%{opacity: 0.3}

}

用js 代码控制  .loadingW  的显示和隐藏即可。

用多个span块指定一个旋转原点，再指定每个span的旋转角度就能围成一个圈。

每个span都加载动画 opacity 透明度，并且分别延迟加载动画不同的时间即可。