js实现spinner
使用纯CSS实现Spinner
通过CSS的@keyframes和animation属性可以轻松创建一个旋转的spinner效果。以下是一个简单的实现示例：
<style>
.spinner {
width: 40px;
height: 40px;
border: 4px solid rgba(0, 0, 0, 0.1);
border-radius: 50%;
border-top-color: #09f;
animation: spin 1s linear infinite;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
</style>
<div class="spinner"></div>使用SVG实现Spinner
SVG提供了更精细的控制，适合需要复杂动画的场景：
<svg class="spinner" viewBox="0 0 50 50">
<circle cx="25" cy="25" r="20" fill="none" stroke="#09f" stroke-width="4"></circle>
</svg>
<style>
.spinner {
animation: rotate 2s linear infinite;
width: 40px;
height: 40px;
}
@keyframes rotate {
100% {
transform: rotate(360deg);
}
}
</style>使用JavaScript控制Spinner
如果需要动态控制spinner的显示/隐藏，可以结合JavaScript：
function showSpinner() {
document.getElementById('spinner').style.display = 'block';
}
function hideSpinner() {
document.getElementById('spinner').style.display = 'none';
}使用第三方库
对于更复杂的需求，可以考虑使用第三方库如Spin.js：
var opts = {
lines: 12, // 线条数量
length: 7, // 每条线长度
width: 5, // 线宽
radius: 10, // 内圆半径
color: '#000', // 颜色
speed: 1, // 旋转速度
trail: 60, // 拖尾百分比
shadow: false // 是否显示阴影
};
var target = document.getElementById('spinner-container');
var spinner = new Spinner(opts).spin(target);响应式Spinner实现
确保spinner在不同设备上都能正常显示：
.spinner {
width: 5vw;
height: 5vw;
min-width: 40px;
min-height: 40px;
/* 其余样式保持不变 */
}可访问性考虑
为spinner添加ARIA属性，提升无障碍体验：
<div class="spinner" role="status" aria-label="Loading..."></div>
