@codog/vue3-infinite-loading/src/styles/spinner.less

An infinite scroll plugin for Vue.js

@deep: ~'>>>';

@import './wave-dots';
@import './circles';
@import './bubbles';

// default spinner
.loading-default {
  position: relative;
  border: 1px solid #999;
  animation: loading-rotating ease 1.5s infinite;
  &:before {
    @size: 6px;
    content: '';
    position: absolute;
    display: block;
    top: 0;
    left: 50%;
    margin-top: -@size/2;
    margin-left: -@size/2;
    width: @size;
    height: @size;
    background-color: #999;
    border-radius: 50%;
  }
}

// spiral spinner
.loading-spiral {
  border: 2px solid #777;
  border-right-color: transparent;
  animation: loading-rotating linear .85s infinite;
}

// rotate animation
@keyframes loading-rotating {
  0%{
    transform: rotate(0);
  }
  100%{
    transform: rotate(360deg);
  }
}

// common styles for the bubble spinner and circle spinner
.loading-bubbles,
.loading-circles {
  position: relative;
}
.loading-circles @{deep} .circle-item,
.loading-bubbles @{deep} .bubble-item {
  @delay: .093s;
  position: absolute;
  top: 50%;
  left: 50%;
  display: inline-block;
  border-radius: 50%;
  &:nth-child(2) {
    animation-delay: @delay;
  }
  &:nth-child(3) {
    animation-delay: @delay * 2;
  }
  &:nth-child(4) {
    animation-delay: @delay * 3;
  }
  &:nth-child(5) {
    animation-delay: @delay * 4;
  }
  &:nth-child(6) {
    animation-delay: @delay * 5;
  }
  &:nth-child(7) {
    animation-delay: @delay * 6;
  }
  &:last-child {
    animation-delay: @delay * 7;
  }
}