react-app-shell
Version:
react打包脚本和example, 这里的版本请忽略
123 lines (116 loc) • 2.8 kB
text/less
/**
*
*
*/
.loader-wrapper {
padding: 0;
margin: 0;
height: 100%;
width: 750px;
font-size: 16px;
background: rgba(0, 0, 0, .7);
font-family: "Source Sans Pro";
box-sizing: border-box;
z-index: 99999;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
.loader {
height: 80px;
width: 80px;
margin: 0 auto;
margin-top: 100px;
}
}
@keyframes rotate {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
50% {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.ball-clip-rotate > div {
background-color: #fff;
width: 40px;
height: 40px;
border-radius: 100%;
margin: 4px;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
border: 4px solid rgba(254, 133, 69, 1);
border-bottom-color: transparent;
background: transparent ;
display: block;
-webkit-animation: rotate 0.75s 0s linear infinite;
animation: rotate 0.75s 0s linear infinite;
margin: 0 auto;
}
@-webkit-keyframes scale {
0% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
45% {
-webkit-transform: scale(0.1);
transform: scale(0.1);
opacity: 0.7;
}
80% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
}
@keyframes scale {
0% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
45% {
-webkit-transform: scale(0.1);
transform: scale(0.1);
opacity: 0.7;
}
80% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
}
.ball-pulse > div:nth-child(1) {
-webkit-animation: scale 0.75s -0.24s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
animation: scale 0.75s -0.24s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08); }
.ball-pulse > div:nth-child(2) {
-webkit-animation: scale 0.75s -0.12s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
animation: scale 0.75s -0.12s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08); }
.ball-pulse > div:nth-child(3) {
-webkit-animation: scale 0.75s 0s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
animation: scale 0.75s 0s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08); }
.ball-pulse > div {
background-color: rgba(254, 133, 69, 1);
width: 15px;
height: 15px;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
display: inline-block;
border: 7.5px solid rgba(254, 133, 69, 1);
border-top-left-radius: 999px; /* 左上角 */
border-top-right-radius: 999px; /* 右上角 */
border-bottom-right-radius: 999px; /* 右下角 */
border-bottom-left-radius: 999px; /* 左下角 */
border-radius: 999px;
background-clip: padding-box;
padding: 0;
margin: 5px;
}