fine-true/lib/loading/index.less

A small and beautiful Vue3 version of the UI Library

/*
jiangbei 2021/07/08
*/

@keyframes fineRotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes fineSpinMove {
  from {
    opacity: 0.3;
  }
  to {
    opacity: 1;
  }
}
.fine-loading-nested {
  position: relative;
}
.find-gloab-loading {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: var(--fine-loading-mask-zindex);
}
.find-loading-nested-inline {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.5);
}
.fine-loading {
  display: inline-block;
  font-size: var(--fine-loading-icon-color);
  color: var(--fine-loading-icon-color);
  span {
    display: inline-block;
    vertical-align: middle;
  }
}
.fine-loading-icon {
  position: relative;
}
.fine-spin-spot {
  position: relative;
  animation: fineRotate 1.2s infinite linear;
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
}

.fine-spin-spot-item {
  position: absolute;
  display: block;
  width: 0.6em;
  height: 0.6em;
  background-color: var(--fine-blue);
  border-radius: 100%;
  transform: scale(0.75);
  transform-origin: 50% 50%;
  opacity: 0.3;
  animation: fineSpinMove 1s infinite linear alternate;
}

.fine-spin-spot-item:nth-child(1) {
  top: 0;
  left: 0;
}

.fine-spin-spot-item:nth-child(2) {
  top: 0;
  right: 0;
  animation-delay: 0.4s;
}

.fine-spin-spot-item:nth-child(3) {
  right: 0;
  bottom: 0;
  animation-delay: 0.8s;
}

.fine-spin-spot-item:nth-child(4) {
  bottom: 0;
  left: 0;
  animation-delay: 1.2s;
}

@keyframes fineCircular {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }

  50% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -40;
  }

  100% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -120;
  }
}

.fine-loading-spiner {
  position: relative;
  display: inline-block;
  max-width: 100%;
  max-height: 100%;
  width: 1.5em;
  height: 1.5em;
  vertical-align: middle;
  animation: fineRotate 0.8s linear infinite;
  animation-duration: 2s;
}

.fine-loading__circular {
  display: block;
  width: 100%;
  height: 100%;
}

.fine-loading__circular circle {
  animation: fineCircular 1.5s ease-in-out infinite;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
}

.fine-loading-vertical {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .fine-loading-message {
    margin-top: 8px;
    margin-left: 0;
  }
}

.fine-loading-message {
  margin-left: 8px;
  color: inherit;
}