UNPKG

react-app-shell

Version:

react打包脚本和example, 这里的版本请忽略

123 lines (116 loc) 2.8 kB
/** * * */ .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 !important; 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; }