边框 loading，在线预览HTML/Vue

HTML

格式化

支持Emmet，输入 p 后按 Tab键试试吧！

<head> ...

展开

</head>

<body>

<div class="container active">
    <!-- 噪点背景 -->
    <svg xmlns="http://www.w3.org/2000/svg" width="500" height="500">
        <filter id="noise" x="0" y="0">
            <feTurbulence type="fractalNoise" baseFrequency="0.65" numOctaves="3" stitchTiles="stitch" />
            <feBlend mode="screen" />
        </filter>
        <rect width="500" height="500" filter="url(#noise)" opacity="0.1" />
    </svg>

    <!-- 百分比 -->
    <span class="overlay" id="percent">0%</span>
</div>

</body>

CSS

格式化


body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #4070f4;
  
}



.container,
.overlay {
  display: flex;
  z-index: 999;
  align-items: center;
  justify-content: center;
}

.container {
  position: relative;
  height: 400px;
  width: 300px;
  border-radius: 16px;
  background-color: #fff;
  overflow: hidden;
}
.container.active {
  background-color: #000;
}
.container::before {
  content: "";
  position: absolute;
  height: 650px;
  width: 650px;
  background-image: conic-gradient(transparent, transparent, transparent, #ff2257);
}
.container.active:before {
  animation: rotate 4s linear infinite;
}
@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.container .overlay {
  position: absolute;
  height: 390px;
  width: 290px;
  font-size: 40px;
  font-weight: 500;
  color: #fff;
  border-radius: 12px;
  opacity: 0.9;
  background:radial-gradient(100% 100% at 100% 0,#131221 0,rgba(29, 30, 48, 0.9));
}

格式化

const container = document.querySelector(".container");
const percent = document.querySelector("#percent");
let perVal = 0;
let increament = setInterval(() => {
    perVal++;
    percent.textContent = `${perVal}%`;
    if (perVal == 100) {
        perVal = 1;
    }
}, 150);

预览

控制台