<view class=”loader-wrapper”>
<view class=”loader-bar”>
<view class=”loader-progress”></view>
</view>
<text class=”loader-text”>正在生成内容…</text>
</view>
.loader-wrapper {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 20rpx;
}
.loader-bar {
width: 80%;
height: 10rpx;
background: #e0e0e0;
border-radius: 20rpx;
overflow: hidden;
position: relative;
}
.loader-progress {
width: 40%;
height: 100%;
background: linear-gradient(to right, #3aa8ff, #6cc8ff, #3aa8ff);
animation: loading 1.2s infinite linear;
border-radius: 20rpx;
}
@keyframes loading {
0% {
transform: translateX(-100%);
}
50% {
transform: translateX(50%);
}
100% {
transform: translateX(100%);
}
}
.loader-text {
margin-top: 16rpx;
font-size: 24rpx;
color: #3aa8ff;
}