ローディングCSSラボ。モバイル対応の軽量なWebワークフロー用ツールです. pascalwengerter/awesome-webtools に着想を得て、SEO、FAQ、レスポンシブ表示に対応したToolNextネイティブページとして実装しています。 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; } }