环形加载 | wjs-css-effects

双环交错

三环嵌套

渐变追光

分段旋转

关键点

环形加载由两个或多个圆环组成，通过不同速度和方向的旋转营造交错感
每个环只给部分边框着色（如 border-top-color），旋转时形成动态光点
使用 position: absolute 让多环同心叠加，inset 或 top/left 控制间距
内外环 animation-direction: reverse 反向旋转，视觉层次更丰富
通过调整 border-width 和环的尺寸比例，控制整体粗细和视觉重量

效果说明

双环交错旋转的加载动画。外环顺时针、内环逆时针，通过不同颜色和粗细形成层次感。相比单环转圈，双环对冲更具视觉张力。这里展示 4 种变体：基础双环、三环嵌套、渐变追光、分段旋转。