在Flask中,当加载HTML页面时,可以使用滚动球来显示加载的进度。滚动球通常是一个旋转的动画,用于指示页面正在加载中。
滚动球可以通过CSS和JavaScript来实现。以下是一种实现滚动球的方法:
<div id="loading-spinner"></div>
#loading-spinner {
width: 40px;
height: 40px;
border: 4px solid #f3f3f3;
border-top: 4px solid #3498db;
border-radius: 50%;
animation: spin 2s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
这段CSS代码定义了一个圆形的滚动球,使用了CSS动画来使其旋转起来。
window.addEventListener('DOMContentLoaded', function() {
var spinner = document.getElementById('loading-spinner');
spinner.style.display = 'block';
});
这段JavaScript代码会在页面加载完成后显示滚动球。
以上就是在Flask中加载HTML页面时显示滚动球的方法。滚动球可以提升用户体验,让用户知道页面正在加载中,避免用户误以为页面没有响应。
推荐的腾讯云相关产品:腾讯云CDN(内容分发网络),可以加速静态资源的加载,提升网页加载速度。产品介绍链接:https://cloud.tencent.com/product/cdn
领取专属 10元无门槛券
手把手带您无忧上云