旋转加载圈 · 加载
前端Wiki/CSS 特效合集/旋转加载圈

旋转加载圈

正反双圈不同速旋转,最经典的加载等待方案

← 返回 加载 类特效列表

上方为纯 CSS 实时演示,直接将鼠标移上去 / 点击感受效果

CSS 代码

CSS
.fx .spin{display:flex;gap:30px;justify-content:center;padding:50px 0}
.fx .spin div{width:44px;height:44px;border-radius:50%;border:4px solid rgba(74,158,255,.2);border-top-color:#4a9eff;animation:kfx-spin 1s linear infinite}
.fx .spin .rev{border:4px solid rgba(247,120,186,.2);border-top-color:#f778ba;animation:kfx-spin 1.4s linear infinite reverse}
@keyframes kfx-spin{to{transform:rotate(360deg)}}

HTML 结构

HTML
<div class="fx">
<div class="spin"><div></div><div class="rev"></div></div>
</div>
实现要点:加载圈 = 单边框上色 + linear 无限旋转;反向双圈是常见升级

其它加载类特效

回到 前端Wiki 首页 · CSS 特效合集