脉冲圆环加载动画
带上折叠和环形动囊载转转器，带上涟漪涟漪一样的传张。
HTMLCSS
加载器组件，使用脉冲效果，带有像涟漪一样传播的美丽环。
预览
用例和功能
这种“脉冲环形加载器”在以下情况下特别有效。
-
文件上传/下载：当您想要直观地表示发送和接收数据的“心跳”时，这是理想的选择。
-
数据分析、AI生成等长时间处理：与简单的旋转动画不同，丰富的表情和扩散的涟漪减轻了用户等待时的压力。
-
英雄部分中心：因为它作为单个元素脱颖而出，所以在加载内容时它也可以完美地用作占位符。
设计和用户体验要点
-
渐变和阴影的协同效果：通过在中央核心区域使用生动的渐变（靛蓝-紫色-粉色）并添加相似颜色的发光（阴影），给人一种现代而高级的印象。
-
非线性动画（三次贝塞尔曲线）：我们使用“三次贝塞尔曲线”作为环传播的速度，创建一个首先快速传播然后逐渐消失的自然波纹。
-
由于延迟而产生多个涟漪：通过设置多个环之间的时间差（“动画延迟”），我们创建了运动始终持续的连续性。
如何定制
-
颜色更改：您可以通过更改
.pulse-core的background: Linear-gradient(...)或.pulse-ring的border-color来匹配主题颜色。 -
涟漪的大小和速度：通过增加
@keyframesring-pulse的transform:scale(3.5)值，涟漪会进一步扩散，通过改变animation的2.5s，可以调整速度。 -
核心脉动条件：通过改变
@keyframes core-pulse的transform:scale(1.2)，可以改变中心心跳的强度。
实现代码
<div class="pulse-loader-container">
<div class="pulse-ring"></div>
<div class="pulse-ring delay-1"></div>
<div class="pulse-ring delay-2"></div>
<div class="pulse-core"></div>
</div>
<style>
/* 整个装载机的容器放置 */
.pulse-loader-container {
position: relative;
width: 100px;
height: 100px;
display: flex;
align-items: center;
justify-content: center;
}
/* 中心のコア部分 */
.pulse-core {
width: 30px;
height: 30px;
background: linear-gradient(135deg, #6366f1, #a855f7, #ec4899);
border-radius: 50%;
position: absolute;
z-index: 10;
box-shadow: 0 0 15px rgba(168, 85, 247, 0.6);
animation: core-pulse 2s infinite ease-in-out;
}
/* 波紋となるリング部分 */
.pulse-ring {
position: absolute;
width: 30px;
height: 30px;
border-radius: 50%;
border: 2px solid rgba(168, 85, 247, 0.8);
box-sizing: border-box;
animation: ring-pulse 2.5s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
opacity: 0;
}
/* 波紋のディレイ（時間差） */
.delay-1 {
animation-delay: 0.8s;
}
.delay-2 {
animation-delay: 1.6s;
}
/* コアの脈打ちアニメーション */
@keyframes core-pulse {
0%, 100% {
transform: scale(1);
box-shadow: 0 0 15px rgba(168, 85, 247, 0.6);
}
50% {
transform: scale(1.2);
/* 拡大時にシャドウも強くして発光感をアップ */
box-shadow: 0 0 25px rgba(168, 85, 247, 0.8), 0 0 40px rgba(236, 72, 153, 0.4);
}
}
/* 波紋が広がるアニメーション */
@keyframes ring-pulse {
0% {
transform: scale(1);
opacity: 1;
border-width: 2px;
border-color: rgba(99, 102, 241, 1);
}
50% {
border-color: rgba(168, 85, 247, 0.5);
border-width: 1px;
}
100% {
transform: scale(3.5);
opacity: 0;
border-width: 0px;
border-color: rgba(236, 72, 153, 0);
}
}
</style>浏览器兼容性状态
|浏览器 |兼容性状态 |笔记|
| ---| ---| ---|
|铬 | ✅ 兼容 | |
|野生动物园| ✅ 兼容 | |
|火狐 | ✅ 兼容 | |
|边缘| ✅ 兼容 | |