如何自定义spinner，实现其环绕盒子的展示效果？

算力阿峰

2026-9-23

实现方案

你可以用纯CSS实现这个环绕盒子的加载动画效果，不需要引入额外的JS库，具体实现逻辑如下：

基础结构

首先写HTML结构，外层是需要加加载效果的容器，里面放盒子原有内容，再加一个用来做环绕动画的节点即可，也可以直接用伪元素实现，减少多余DOM：

<div class="box-wrapper">
  <!-- 盒子原有内容 -->
  <div class="box-content">
    这里是盒子内部的内容
  </div>
</div>

核心CSS实现

给外层容器加相对定位，用伪元素做绝对定位铺满容器，通过圆锥渐变加旋转动画实现环绕效果：

/* 外层容器基础样式 */
.box-wrapper {
  position: relative;
  width: 300px;
  height: 200px;
  border-radius: 8px;
  overflow: hidden;
  /* 可根据需求调整容器宽高、圆角等属性 */
}

/* 内容区域，层级高于动画层 */
.box-content {
  position: relative;
  z-index: 2;
  padding: 20px;
  background-color: #fff;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  box-sizing: border-box;
}

/* 用伪元素实现环绕spinner */
.box-wrapper::before {
  content: "";
  position: absolute;
  inset: -2px; /* 比容器大2px，露出边框效果 */
  z-index: 1;
  border-radius: 8px;
  background: conic-gradient(
    from 0deg,
    #3b82f6 0%,
    rgba(59, 130, 246, 0.3) 30%,
    rgba(59, 130, 246, 0.1) 70%,
    #3b82f6 100%
  );
  /* 旋转动画，2秒转一圈，无限循环 */
  animation: spin 2s linear infinite;
}

/* 旋转动画定义 */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}