CSS 实现页面底部加载中与加载完毕效果

效果图

实现代码

<view class="bottom-load-tip">
  <view class="line-tip"></view>
  <view class="loading-animation" v-if="!lastPage"></view>
  <view>{{ lastPage ? "没有更多了" : "加载中" }}</view>
  <view class="line-tip"></view>
</view>

/* 底部加载中 */
.bottom-load-tip {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
  font-size: 24rpx;
  margin-top: 20rpx;
  .line-tip {
    width: 10%;
    height: 1rpx;
    background: #c0c4cc;
    margin: 0 15rpx;
  }
  .loading-animation {
    position: relative;
    margin-right: 30rpx;
    margin-left: 8rpx;
  }
  .loading-animation::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 6rpx;
    height: 6rpx;
    color: rgba(0, 0, 0, 0.4);
    margin: auto;
    box-shadow: 0 -14rpx rgba(0, 0, 0, 0.9), 14rpx 0, 0 14rpx, -14rpx 0 rgba(0, 0, 0, 0.7), -10rpx -10rpx rgba(0, 0, 0, 0.8),
      10rpx -10rpx rgba(0, 0, 0, 1), 10rpx 10rpx, -10rpx 10rpx;
    animation: loading-spin 1s steps(8) infinite;
    border-radius: 100%;
  }
}
@keyframes loading-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}