【纯CSS实现loading加载中效果】

常规 loading

<template>
	<div class="loaderBox1" style="color: #FFFFFF"></div>
</template>

<style>
.loaderBox{
	font-size: 30rpx;
	overflow: hidden;
	width: 30rpx;
	height: 30rpx;
	border-radius: 50%;
	transform: translateZ(0);
	animation: loadBox 2s infinite ease, round 2s infinite ease;
}
@keyframes loadBox {
	0% {
	  box-shadow: 0 -0.83px 0 -0.4px, 0 -0.83px 0 -0.42px, 0 -0.83px 0 -0.44px,
		0 -0.83px 0 -0.46px, 0 -0.83px 0 -0.477px;
	}

	5%,
	95% {
	  box-shadow: 0 -0.83px 0 -0.4px, 0 -0.83px 0 -0.42px, 0 -0.83px 0 -0.44px,
		0 -0.83px 0 -0.46px, 0 -0.83px 0 -0.477px;
	}

	10%,
	59% {
	  box-shadow: 0 -0.83px 0 -0.4px, -0.087px -0.825px 0 -0.42px,
		-0.173px -0.812px 0 -0.44px, -0.256px -0.789px 0 -0.46px,
		-0.297px -0.775px 0 -0.477px;
	}

	20% {
	  box-shadow: 0 -0.83px 0 -0.4px, -0.338px -0.758px 0 -0.42px,
		-0.555px -0.617px 0 -0.44px, -0.671px -0.488px 0 -0.46px,
		-0.749px -0.34px 0 -0.477px;
	}

	38% {
	  box-shadow: 0 -0.83px 0 -0.4px, -0.377px -0.74px 0 -0.42px,
		-0.645px -0.522px 0 -0.44px, -0.775px -0.297px 0 -0.46px,
		-0.82px -0.09px 0 -0.477px;
	}

	100% {
	  box-shadow: 0 -0.83px 0 -0.4px, 0 -0.83px 0 -0.42px, 0 -0.83px 0 -0.44px,
		0 -0.83px 0 -0.46px, 0 -0.83px 0 -0.477px;
	}
}

@keyframes round {
	0% {
	  transform: rotate(0deg);
	}

	100% {
	  transform: rotate(360deg);
	}
}
</style>

电池充电式 loading

<template>
	<div class="loaderBox2"></div>
</template>

<style>
.loaderBox2 {
    width: 80rpx;
    height: 40rpx;
    border: 2rpx solid rgb(103, 194, 58);
    padding: 3rpx;
    background: repeating-linear-gradient(
        90deg,
        rgb(103, 194, 58) 0 10rpx,
        #0000 0 16rpx
      )
      0/0% no-repeat content-box content-box;
    position: relative;
    animation: cartoon 2s infinite steps(6);
}
.loaderBox2::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 100%;
    transform: translateY(-50%);
    width: 10rpx;
    height: 10rpx;
    border: 2rpx solid rgb(103, 194, 58);
}
@keyframes cartoon {
    100% {
      background-size: 120%;
    }
}
</style>

进度条波纹 loading

<template>
	<div class="loaderBox3"></div>
</template>

<style>
.loaderBox3 {
    width: 120rpx;
    height: 20rpx;
    border-radius: 20rpx;
    background: repeating-linear-gradient(
	  135deg,
	  #f03355 0 10rpx,
	  #ffa516 0 20rpx
	) 0/0% no-repeat, repeating-linear-gradient(135deg, #ddd 0 10px, #eee 0 20px) 0/100%;
	animation: cartoon 2s infinite;
}
@keyframes cartoon {
	100% {
	  background-size: 100%;
	}
}
</style>

椭圆式进度条 loading

<template>
	<div class="loaderBox4"></div>
</template>

<style>
.loaderBox4 {
    width: 120rpx;
    height: 22rpx;
    border-radius: 100rpx;
    color: #514b82;
    border: 2rpx solid #514b82;
    position: relative;
}
.loaderBox4::before {
	width: 112rpx;
	height: 14rpx;
    border-radius: 100rpx;
    content: "";
    position: absolute;
    margin: 2rpx;
    background: linear-gradient(rgb(81, 75, 130) 0 0) 0/0% no-repeat #ddd;
    animation: cartoon 2s infinite linear;
}
@keyframes cartoon {
	100% {
	  background-size: 100%;
	}
}
</style>