bee-loading/build/Loading.css

Loading ui component for react

@charset "UTF-8";
/* FormGroup */
/*  Navlayout  */
/**
  * 文字
  */
.u-loading-desc {
  width: 100%;
  position: absolute;
  top: 50%;
  padding-top: 32px;
  font-size: 14px;
  color: #212121;
  text-align: center;
  line-height: 22px; }

.u-loading-container {
  position: relative; }

/**
  * default样式 单个圆圈加载
  */
.u-loading.u-loading-rotate > div, .u-loading.u-loading-default > div {
  position: absolute;
  margin: 2px;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  border: none !important;
  width: 40px;
  height: 40px;
  top: 50%;
  left: 50%;
  margin-left: -22px;
  margin-top: -22px;
  background: transparent !important;
  display: inline-block;
  -webkit-animation: rotate1 1s 0s linear infinite !important;
  animation: rotate1 1s 0s linear infinite !important;
  text-align: center;
  line-height: 40px; }
  .u-loading.u-loading-rotate > div > img, .u-loading.u-loading-default > div > img {
    width: 40px; }
  .u-loading.u-loading-rotate > div > .uf, .u-loading.u-loading-default > div > .uf {
    color: #0084ff;
    font-size: 40px;
    padding: 0; }

.u-loading.u-loading-rotate.u-loading-rotate-lg > div, .u-loading.u-loading-default.u-loading-rotate-lg > div {
  margin-left: -35px;
  margin-top: -35px;
  width: 60px;
  height: 60px;
  line-height: 60px; }
  .u-loading.u-loading-rotate.u-loading-rotate-lg > div > img, .u-loading.u-loading-default.u-loading-rotate-lg > div > img {
    width: 60px; }
  .u-loading.u-loading-rotate.u-loading-rotate-lg > div > .uf, .u-loading.u-loading-default.u-loading-rotate-lg > div > .uf {
    font-size: 60px; }

.u-loading.u-loading-rotate.u-loading-rotate-lg > .u-loading-desc, .u-loading.u-loading-default.u-loading-rotate-lg > .u-loading-desc {
  padding-top: 38px; }

.u-loading.u-loading-rotate.u-loading-rotate-sm > div, .u-loading.u-loading-default.u-loading-rotate-sm > div {
  margin-left: -15px;
  margin-top: -15px;
  width: 25px;
  height: 25px;
  line-height: 25px; }
  .u-loading.u-loading-rotate.u-loading-rotate-sm > div > img, .u-loading.u-loading-default.u-loading-rotate-sm > div > img {
    width: 25px; }
  .u-loading.u-loading-rotate.u-loading-rotate-sm > div > .uf, .u-loading.u-loading-default.u-loading-rotate-sm > div > .uf {
    font-size: 25px; }

.u-loading.u-loading-rotate.u-loading-rotate-sm > .u-loading-desc, .u-loading.u-loading-default.u-loading-rotate-sm > .u-loading-desc {
  padding-top: 25px; }

.u-loading.u-loading-rotate.u-loading-rotate-primary > div > .uf, .u-loading.u-loading-default.u-loading-rotate-primary > div > .uf {
  color: #3f51b5; }

.u-loading.u-loading-rotate.u-loading-rotate-success > div > .uf, .u-loading.u-loading-default.u-loading-rotate-success > div > .uf {
  color: #4caf50; }

.u-loading.u-loading-rotate.u-loading-rotate-warning > div > .uf, .u-loading.u-loading-default.u-loading-rotate-warning > div > .uf {
  color: #ff9800; }

.u-loading.u-loading-default > div > img {
  width: 34px;
  height: 34px; }

.u-loading-default-container .u-loading-desc {
  margin-top: -12px;
  color: rgb(245, 60, 50);
  font-size: 12px; }

.u-loading-backdrop {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1900;
  background-color: rgba(255, 255, 255, 0.4); }
  .u-loading-backdrop.full-screen {
    position: fixed; }

@keyframes rotate1 {
  0% {
    -webkit-transform: rotate(0deg) scale(1);
    transform: rotate(0deg) scale(1); }
  50% {
    -webkit-transform: rotate(180deg) scale(1);
    transform: rotate(180deg) scale(1); }
  100% {
    -webkit-transform: rotate(360deg) scale(1);
    transform: rotate(360deg) scale(1); } }

.u-loading.u-loading-line {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -30px;
  margin-left: -25px; }
  .u-loading.u-loading-line > div {
    background-color: #C2C3C5;
    width: 6px;
    height: 50px;
    border-radius: 2px;
    margin: 2px;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    display: inline-block; }
  .u-loading.u-loading-line.u-loading-line-lg {
    margin-top: -50px;
    margin-left: -30px; }
    .u-loading.u-loading-line.u-loading-line-lg > div {
      width: 8px;
      height: 90px; }
  .u-loading.u-loading-line.u-loading-line-sm {
    margin-top: -22px;
    margin-left: -20px; }
    .u-loading.u-loading-line.u-loading-line-sm > div {
      width: 4px;
      height: 35px; }
  .u-loading.u-loading-line div:nth-child(1) {
    -webkit-animation: line-scale 1s 0.1s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
    animation: line-scale 1s 0.1s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
    background-color: #F44336; }
  .u-loading.u-loading-line div:nth-child(2) {
    -webkit-animation: line-scale 1s 0.2s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
    animation: line-scale 1s 0.2s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
    background-color: #7ED321; }
  .u-loading.u-loading-line div:nth-child(3) {
    -webkit-animation: line-scale 1s 0.3s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
    animation: line-scale 1s 0.3s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
    background-color: #0084FF; }
  .u-loading.u-loading-line div:nth-child(4) {
    -webkit-animation: line-scale 1s 0.4s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
    animation: line-scale 1s 0.4s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
    background-color: #FF9800; }
  .u-loading.u-loading-line div:nth-child(5) {
    -webkit-animation: line-scale 1s 0.5s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
    animation: line-scale 1s 0.5s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
    background-color: #D0021B; }
  .u-loading.u-loading-line.u-loading-line-primary > div {
    background-color: #3f51b5; }
  .u-loading.u-loading-line.u-loading-line-success > div {
    background-color: #4caf50; }
  .u-loading.u-loading-line.u-loading-line-warning > div {
    background-color: #ff9800; }

.u-loading.u-loading-custom > div {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%); }

@keyframes line-scale {
  0% {
    -webkit-transform: scaley(1);
    transform: scaley(1); }
  50% {
    -webkit-transform: scaley(0.4);
    transform: scaley(0.4); }
  100% {
    -webkit-transform: scaley(1);
    transform: scaley(1); } }