cra-template-doly/template/src/components/PageLoader/index.module.less

[![npm][npm]][npm-url] 

.pageLoader {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
  padding: 16px;
  overflow: scroll;
  text-align: center;
  background-color: var(--doly-page-bg-color);
  inset: 0;

  .loadErrorText {
    font-size: 14px;

    a {
      display: inline-block;
      padding: 8px;
      color: #108ee9;
      cursor: pointer;
    }
  }

  .loadingText {
    margin: 8px;
    color: gray;
    font-size: 14px;
  }
}

@keyframes animation-zoom {
  50% {
    transform: scale(0.75);
    opacity: 0.2;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.beatLoader {
  > span {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin: 2px;
    background-color: var(--doly-spinner-color);
    border-radius: 100%;
    animation: animation-zoom 0.7s 0s infinite linear;
    animation-fill-mode: both;

    &:nth-child(2n) {
      animation-delay: 0.35s;
    }
  }
}