meri-design-dev/custom/theme/IndexLoading.styl

基于vue框架的ui库

/*!
 * @meri-design-dev v0.0.13
 * (c) 2019-2020 wangyongcun
 * Released under the MIT License.
 * 2024-04-29 11:26:20
 */
.p-index-loading
  position: fixed
  left: 0
  top: 0
  background-color: $theme
  width: 100%
  height: 100%
  z-index: 9000

.p-index-loading .p-index-loading-box
  position: absolute
  top: 50%
  left: 50%
  display: flex
  justify-content: center
  align-items: center
  width: 200px
  height: 50px
  transform: translate(-100px,-60px)
  z-index: 9000

.p-index-loading .p-index-loading-box .p-index-loading-list
  border-radius: 4px
  width: 6px
  height: 100%
  background-color: $blue-500

.p-index-loading .p-index-loading-box .p-index-loading-list + .p-index-loading-list
  margin-left: 4px

.p-index-loading .p-index-loading-box .p-index-loading-list:nth-of-type(1)
  animation: indexLoading .8s ease-in-out 200ms infinite alternate

.p-index-loading .p-index-loading-box .p-index-loading-list:nth-of-type(2)
  animation: indexLoading .8s ease-in-out 400ms infinite alternate

.p-index-loading .p-index-loading-box .p-index-loading-list:nth-of-type(3)
  animation: indexLoading .8s ease-in-out 600ms infinite alternate

.p-index-loading .p-index-loading-box .p-index-loading-list:nth-of-type(4)
  animation: indexLoading .8s ease-in-out 800ms infinite alternate

.p-index-loading .p-index-loading-box .p-index-loading-list:nth-of-type(5)
  animation: indexLoading .8s ease-in-out 1000ms infinite alternate

.p-index-loading .p-index-loading-box .p-index-loading-list:nth-of-type(6)
  animation: indexLoading .8s ease-in-out 1200ms infinite alternate

@keyframes indexLoading
  0%, 100%
    transform: scaleY(1)
  50%
    transform: scaleY(.4)
@keyframes indexLoading
  0%, 100%
    transform: scaleY(1)
  50%
    transform: scaleY(.4)
@keyframes indexLoading
  0%, 100%
    transform: scaleY(1)
  50%
    transform: scaleY(.4)
@keyframes indexLoading
  0%, 100%
    transform: scaleY(1)
  50%
    transform: scaleY(.4)