產生尊重 reduced-motion 设置的加载动画 CSS. 靈感來自 pascalwengerter/awesome-webtools,並以 ToolNext 原生頁面實作,包含 SEO、中英以外語系 FAQ 與響應式版面。 由 ToolNext 免費線上工具箱提供。
Generate loading animation CSS that respects reduced-motion preferences.
Enter Duration seconds, results update automatically
Enter Color, results update automatically
.toolnext-preview .loader { width: 32px; height: 32px; border: 3px solid #ddd; border-top-color: #2563eb; border-radius: 50%; animation: spin 1.2s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .loader { animation: none; } }