CSS ロードアニメーションジェネレーター
ガイド
CSS ロードアニメーションジェネレーター
Generate eight popular loading animations in pure CSS — rotating ring, dual ring, pulse dots, bouncing dots, bouncing ball, equalizer bars, pulse circle, and typing indicator. Tweak color, size, stroke width, and duration; watch the live preview update instantly; copy the @keyframes + minimal HTML into your project. Zero JavaScript, zero SVG, zero external dependencies.
使用方法
- Choose an animation type from the dropdown.
- Set the loader size in pixels and adjust the stroke width for ring-based types.
- Pick a primary color and a track / secondary color.
- Set the duration (in seconds) for one full cycle.
- Select an output format — HTML + CSS combined, CSS only, or HTML only.
- Optionally set a custom ARIA label for screen readers.
- Copy the generated snippet or download it as a file.
機能
- Eight animation styles — covers the most common loading patterns in modern UIs.
- ライブプレビュー — every change re-renders instantly so you can verify timing and smoothness before copying.
- Pure CSS output — no JavaScript runtime cost and no SVG markup to maintain.
- スコープ付きクラス名 — each generated snippet uses a unique prefix so multiple loaders can coexist without colliding.
- Accessible by default — every loader includes role=”status” and a configurable aria-label.
- Three output modes — combined HTML + CSS, CSS only, or HTML only, depending on how you integrate it.
よくある質問
-
What does @keyframes do in CSS?
The @keyframes at-rule defines the intermediate steps of a CSS animation. Each step (0%, 50%, 100%, etc.) describes the styles an element should have at that moment of the animation cycle. The browser interpolates between the steps to produce smooth motion. Without @keyframes, the animation property has nothing to play.
-
Why use CSS animations instead of SVG or JavaScript for loaders?
CSS animations run on the browser's compositor thread, which means they continue smoothly even when the main JavaScript thread is busy. They have no script dependency, no extra payload, and they degrade gracefully on older devices. SVG and JavaScript loaders can do more complex things, but for a simple spinner or bouncing dots, CSS is the lightest and most reliable option.
-
What is a cubic-bezier timing function?
A cubic-bezier timing function describes how an animation accelerates and decelerates over time using four control points on a curve. Compared to keywords like linear or ease-in-out, cubic-bezier lets you fine-tune the feel of motion — for example, a bouncing ball uses cubic-bezier(0.5, 0.05, 0.5, 0.95) to mimic gravity.
-
Why do loading animations need a role and aria-label?
Screen readers cannot see a spinning circle, so they need a programmatic hint that something is happening. role="status" tells assistive technology that the element conveys a live status update, and aria-label provides the human-readable text that gets announced. Without these attributes, a loader is invisible to non-sighted users.
