Django项目 数据加载中的提示框如何制作

你可以使用 JavaScript 和 CSS 来制作 Django 项目中的数据加载提示框。具体步骤如下：

1. 在 HTML 文件中添加一个 div 元素，用于显示提示框。

2. 使用 CSS 样式来设置提示框的样式，包括背景色、边框、圆角等。

3. 使用 JavaScript 来控制提示框的显示和隐藏。当数据加载时，显示提示框；当数据加载完成后，隐藏提示框。

以下是示例代码：

HTML：

<div id="loading" class="loading">
<div class="loading-icon"></div>
<div class="loading-text">数据加载中，请稍候...</div>
</div>

CSS：

.loading {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
z-index: 9999;
}

.loading-icon {
width: 50px;
height: 50px;
margin: 0 auto;
border-radius: 50%;
border: 5px solid #fff;
border-top-color: #3498db;
animation: spin 1s infinite linear;
}

.loading-text {
color: #fff;
font-size: 16px;
text-align: center;
margin-top: 20px;
}

@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}

JavaScript：

function showLoading() {
document.getElementById("loading").style.display = "block";
}

function hideLoading() {
document.getElementById("loading").style.display = "none";
}

在 Django 项目中，当需要加载数据时，调用 showLoading() 函数显示提示框；当数据加载完成后，调用 hideLoading() 函数隐藏提示框。