CSS3 Loader加载指示器动画效果

原创已于 2025-06-27 10:47:33 修改 · 533 阅读

CC 4.0 BY-SA版权

文章标签：

于 2025-06-24 14:25:34 首次发布

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3 Loader加载指示器动画效果</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Arial', sans-serif;
}

body {
background: #f5f7fa;
color: #333;
padding: 40px 20px;
display: flex;
flex-direction: column;
align-items: center;
min-height: 100vh;
}

h1 {
text-align: center;
margin-bottom: 40px;
color: #2c3e50;
}

.loader-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 40px;
max-width: 1000px;
margin-bottom: 40px;
}

.loader-card {
background: white;
border-radius: 10px;
padding: 30px;
width: 300px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
text-align: center;
transition: transform 0.3s, box-shadow 0.3s;
}

.loader-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.loader-title {
margin-bottom: 20px;
color: #3498db;
font-size: 18px;
}

/* 1. 旋转圆圈加载器 */
.circle-loader {
width: 50px;
height: 50px;
border: 5px solid #f3f3f3;
border-top: 5px solid #3498db;
border-radius: 50%;
margin: 0 auto;
animation: spin 1s linear infinite;
}

/* 2. 跳动圆点加载器 */
.dot-loader {
display: flex;
justify-content: center;
gap: 8px;
height: 50px;
align-items: center;
}

.dot-loader div {
width: 12px;
height: 12px;
background: #3498db;
border-radius: 50%;
animation: bounce 1.4s infinite ease-in-out;
}

.dot-loader div:nth-child(1) {
animation-delay: -0.32s;
}

.dot-loader div:nth-child(2) {
animation-delay: -0.16s;
}

/* 3. 进度条加载器 */
.progress-loader {
width: 100%;
height: 8px;
background: #f3f3f3;
border-radius: 4px;
overflow: hidden;
margin: 0 auto;
}

.progress-loader::after {
content: '';
display: block;
width: 100%;
height: 100%;
background: #3498db;
border-radius: 4px;
animation: progress 2s ease-in-out infinite;
}

/* 4. 旋转方块加载器 */
.square-loader {
width: 50px;
height: 50px;
background: #3498db;
margin: 0 auto;
animation: rotate 1.5s infinite ease-in-out;
}

/* 5. 脉冲加载器 */
.pulse-loader {
width: 50px;
height: 50px;
background: #3498db;
border-radius: 50%;
margin: 0 auto;
animation: pulse 1.5s infinite ease-in-out;
}

/* 6. 波浪加载器 */
.wave-loader {
display: flex;
justify-content: center;
gap: 5px;
height: 50px;
align-items: flex-end;
}

.wave-loader div {
width: 8px;
background: #3498db;
animation: wave 1.2s infinite ease-in-out;
}

.wave-loader div:nth-child(1) {
height: 20px;
animation-delay: -0.4s;
}

.wave-loader div:nth-child(2) {
height: 30px;
animation-delay: -0.2s;
}

.wave-loader div:nth-child(3) {
height: 40px;
animation-delay: 0s;
}

.wave-loader div:nth-child(4) {
height: 30px;
animation-delay: 0.2s;
}

.wave-loader div:nth-child(5) {
height: 20px;
animation-delay: 0.4s;
}

/* 7. 旋转光盘加载器 */
.disc-loader {
width: 50px;
height: 50px;
border: 5px solid rgba(52, 152, 219, 0.2);
border-left-color: #3498db;
border-right-color: #3498db;
border-radius: 50%;
margin: 0 auto;
animation: spin 1s linear infinite;
}

/* 8. 彩虹加载器 */
.rainbow-loader {
width: 50px;
height: 50px;
border-radius: 50%;
margin: 0 auto;
background: conic-gradient(
#3498db,
#2ecc71,
#f1c40f,
#e74c3c,
#9b59b6,
#3498db
);
animation: spin 1.5s linear infinite;
position: relative;
}

.rainbow-loader::after {
content: '';
position: absolute;
width: 40px;
height: 40px;
background: white;
border-radius: 50%;
top: 5px;
left: 5px;
}

/* 动画定义 */
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}

@keyframes bounce {
0%, 80%, 100% { transform: scale(0); }
40% { transform: scale(1); }
}

@keyframes progress {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}

@keyframes rotate {
0% { transform: perspective(120px) rotateX(0deg) rotateY(0deg); }
50% { transform: perspective(120px) rotateX(-180deg) rotateY(0deg); }
100% { transform: perspective(120px) rotateX(-180deg) rotateY(-180deg); }
}

@keyframes pulse {
0%, 100% { transform: scale(0.8); opacity: 0.5; }
50% { transform: scale(1.2); opacity: 1; }
}

@keyframes wave {
0%, 100% { transform: scaleY(0.5); }
50% { transform: scaleY(1.5); }
}

.link-container {
text-align: center;
margin-top: 40px;
}

.more-link {
display: inline-block;
padding: 12px 30px;
background: #3498db;
color: white;
text-decoration: none;
border-radius: 30px;
font-weight: bold;
transition: all 0.3s;
box-shadow: 0 5px 15px rgba(52, 152, 219, 0.4);
}

.more-link:hover {
background: #2980b9;
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(52, 152, 219, 0.6);
}
</style>
</head>
<body>
<h1>CSS3 Loader加载指示器动画效果</h1>

<div class="loader-container">
<div class="loader-card">
<h3 class="loader-title">旋转圆圈加载器</h3>
<div class="circle-loader"></div>
</div>

<div class="loader-card">
<h3 class="loader-title">跳动圆点加载器</h3>
<div class="dot-loader">
<div></div>
<div></div>
<div></div>
</div>
</div>

<div class="loader-card">
<h3 class="loader-title">进度条加载器</h3>
<div class="progress-loader"></div>
</div>

<div class="loader-card">
<h3 class="loader-title">旋转方块加载器</h3>
<div class="square-loader"></div>
</div>

<div class="loader-card">
<h3 class="loader-title">脉冲加载器</h3>
<div class="pulse-loader"></div>
</div>

<div class="loader-card">
<h3 class="loader-title">波浪加载器</h3>
<div class="wave-loader">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>

<div class="loader-card">
<h3 class="loader-title">旋转光盘加载器</h3>
<div class="disc-loader"></div>
</div>

<div class="loader-card">
<h3 class="loader-title">彩虹加载器</h3>
<div class="rainbow-loader"></div>
</div>
</div>

</body>
</html>