body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
}
.loading-container {
text-align: center;
}
.loading-spinner {
border: 4px solid #333;
border-top-color: transparent;
border-radius: 50%;
width: 30px;
height: 30px;
animation: spin 1s linear infinite;
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.loading-text {
margin-top: 20px;
font-size: 18px;
color: #333;
}
This HTML code creates a simple loading screen with a spinning spinner and a "头条收藏正在加载..." message. The page is centered vertically and horizontally on the screen, and the background is set to a light gray color. The CSS includes a keyframe animation for the spinning spinner.