彩色边框loading




import styles from "./test.module.css";

export default function Test() {
  return (
    <div className={styles.bg}>
      <div className={styles.flowBorder}></div>
    </div>
  );
}



.bg {

    height: 40px;
    width: 40px;
    box-sizing: border-box;
}

.flowBorder {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 8px; /* 可选：圆角 */
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden; /* 隐藏超出范围的渐变背景 */
}

/* 核心：彩色旋转背景 */
.flowBorder::before {
  content: "";
  position: absolute;
  width: 150%; /* 宽高要大于父级，确保旋转时覆盖全 */
  height: 150%;
  background: conic-gradient(
    #ff0000,
    #ff8000,
    #ffff00,
    #00ff00,
    #00ffff,
    #8000ff,
    #ff00ff,
    #ff0000
  );
  animation: rotate 3s linear infinite;
}

/* 核心：遮盖层，形成“边框”视觉 */
.flowBorder::after {
  content: "";
  position: absolute;
  inset: 2px; /* 这里决定了边框的粗细，2px即为边框宽度 */
  background-color: #ffffff; /* 必须与背景色相同 */
  border-radius: 6px; /* 比父级稍微小一点点 */
}

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