loading加载中效果 css实现

html代码

 

    

    
加载中，请稍候...
 

css样式

 /* 加载中容器的样式 */
 .loading-container {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 100vh; /* 全屏高度，方便展示 */
            // background-color: #f0f0f0; /* 可选背景色 */
        }
 
        /* 加载指示器的样式 */
        .spinner {
            width: 30px;
            height: 30px;
            border: 3px solid rgba(0, 0, 0, 0.1);
            border-radius: 50%;
            border-top-color: #3498db; /* 加载指示器的颜色 */
            animation: spin 1s linear infinite;
            margin-bottom: 10px;
        }
 
        /* 旋转动画 */
        @keyframes spin {
            to {
                transform: rotate(360deg);
            }
        }
        .loading-text {
            font-size: 16px;
            color: #333;
            width: 100%;
            text-align: center;
        }

效果