Toggle Loading
<section class="p-6 bg-white rounded-lg shadow-sm">
<div class="max-w-md mx-auto space-y-6">
<!-- 基本加载状态开关 -->
<div class="space-y-4">
<h3 class="text-lg font-medium text-gray-900">基本加载状态开关</h3>
<div class="flex items-center gap-2">
<label class="inline-flex items-center cursor-wait">
<input type="checkbox" class="sr-only peer">
<div class="relative w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600">
<!-- 加载指示器 -->
<svg class="animate-spin h-4 w-4 text-blue-600 absolute top-1 left-1 z-10" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>
</div>
<span class="ml-3 text-sm font-medium text-gray-900">处理中...</span>
</label>
</div>
</div>
<!-- 带背景遮罩的加载状态 -->
<div class="space-y-4">
<h3 class="text-lg font-medium text-gray-900">带背景遮罩的加载状态</h3>
<div class="relative">
<div class="flex items-center gap-2">
<label class="inline-flex items-center">
<input type="checkbox" checked class="sr-only peer">
<div class="relative w-11 h-6 bg-gray-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
<span class="ml-3 text-sm font-medium text-gray-900">已启用</span>
</label>
</div>
<!-- 遮罩层 -->
<div class="absolute inset-0 bg-white bg-opacity-60 flex items-center justify-center cursor-wait">
<svg class="animate-spin h-5 w-5 text-blue-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>
</div>
</div>
</div>
<!-- 加载中脉冲效果 -->
<div class="space-y-4">
<h3 class="text-lg font-medium text-gray-900">加载中脉冲效果</h3>
<div class="flex items-center gap-2">
<label class="inline-flex items-center cursor-wait">
<input type="checkbox" class="sr-only peer">
<div class="relative w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600 pulse-loading"></div>
<span class="ml-3 text-sm font-medium text-gray-900">处理中</span>
</label>
</div>
<style>
@keyframes pulseLoading {
0%, 100% {
box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.5);
}
50% {
box-shadow: 0 0 0 8px rgba(59, 130, 246, 0);
}
}
.pulse-loading {
animation: pulseLoading 1.5s infinite;
}
</style>
</div>
<!-- 加载中带文本变化 -->
<div class="space-y-4">
<h3 class="text-lg font-medium text-gray-900">加载中带文本变化</h3>
<div class="flex flex-col gap-2">
<div class="flex items-center">
<label class="inline-flex items-center cursor-wait">
<input type="checkbox" class="sr-only peer loading-toggle">
<div class="relative w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600">
<!-- 加载指示器 -->
<svg class="animate-spin h-4 w-4 text-blue-600 absolute top-1 left-1 z-10" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>
</div>
</label>
<div class="ml-3">
<div class="text-sm font-medium text-gray-900 loading-text-initial">点击启用</div>
<div class="text-sm font-medium text-blue-600 loading-text-loading hidden">正在处理请求...</div>
<div class="text-sm font-medium text-green-600 loading-text-success hidden">已成功启用！</div>
</div>
</div>
<button onclick="simulateLoading()" class="mt-1 px-4 py-1 text-xs text-white bg-blue-600 rounded-md hover:bg-blue-700">模拟加载</button>
</div>
<script>
function simulateLoading() {
const toggle = document.querySelector('.loading-toggle');
const initialText = document.querySelector('.loading-text-initial');
const loadingText = document.querySelector('.loading-text-loading');
const successText = document.querySelector('.loading-text-success');
// 显示加载状态
initialText.classList.add('hidden');
loadingText.classList.remove('hidden');
successText.classList.add('hidden');
// 3秒后显示成功
setTimeout(() => {
toggle.checked = true;
loadingText.classList.add('hidden');
successText.classList.remove('hidden');
// 2秒后重置
setTimeout(() => {
initialText.classList.remove('hidden');
successText.classList.add('hidden');
toggle.checked = false;
}, 2000);
}, 3000);
}
</script>
</div>
<!-- 禁用状态加载中 -->
<div class="space-y-4">
<h3 class="text-lg font-medium text-gray-900">禁用状态加载中</h3>
<div class="flex items-center gap-2">
<label class="inline-flex items-center cursor-not-allowed">
<input type="checkbox" disabled class="sr-only peer">
<div class="relative w-11 h-6 bg-gray-100 border border-gray-200 peer-focus:outline-none rounded-full peer opacity-60 after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-gray-300 after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all">
<!-- 加载指示器 -->
<svg class="animate-spin h-4 w-4 text-gray-400 absolute top-[3px] left-[3px] z-10" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>
</div>
<span class="ml-3 text-sm font-medium text-gray-400">系统维护中</span>
</label>
</div>
</div>
</div>
</section>
Copied to clipboard