效果图
文章来源：https://www.toymoban.com/news/detail-671290.html
文章来源地址https://www.toymoban.com/news/detail-671290.html
实现代码
<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);
}
}到了这里，关于CSS 实现页面底部加载中与加载完毕效果的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
![uniapp - [ H5 网页 / App ] 高性能 tabbar 底部菜单凸起效果，原生系统自定义底部菜单不卡顿、切换页面不闪烁、自动缓存页面（底部菜单中间自定义一个图片并悬浮起来）](https://imgs.yssmx.com/Uploads/2024/02/831617-1.gif)
