How to create a success checkmark サクセスチェックの作り方
Animated checkmark drawn to indicate successful completion. 完了時に描画されるアニメーションチェックマーク。
ライブデモ Live Demo
概要・用途・特徴Overview, Usage & Features
何ができるかWhat it does
Animated checkmark drawn to indicate successful completion.
完了時に描画されるアニメーションチェックマーク。
どこで使うかWhere to use
web application, marketing page
フォーム送信成功、支払い完了、タスク完了、オンボーディングステップ完了
特徴Key features
Animated SVG checkmark that draws itself on success using stroke-dashoffset animation. Circle scales in as the checkmark draws. Triggered by JavaScript class toggle. Customizable size and color.
stroke-dashoffsetアニメーションで成功時に自己描画するアニメーションSVGチェックマーク。チェックマークが描かれる際に円がスケールイン。JavaScriptクラストグルでトリガー。サイズとカラーをカスタマイズ可能。
調整可能パラメータ Adjustable Parameters
| Parameter | Default | Description |
|---|---|---|
--success-color | — | Checkmark color |
--circle-size | — | Animation size |
実装コード Implementation Code
// react/S-009.jsx
import './S-009.css';
export default function SuccessCheck({ message = 'Success!' }) {
return (
<div className="success-wrapper">
<svg className="success-anim" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">
<circle className="success-circle" cx="26" cy="26" r="25" />
<path className="success-check" d="M14.1 27.2l7.1 7.2 16.7-16.8" />
</svg>
<div className="success-text">{message}</div>
</div>
);
}/* react/S-009.css */
/* S-009: React styles */
.success-wrapper {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 40px;
}
.success-anim {
width: 80px;
height: 80px;
margin-bottom: 20px;
}
.success-circle {
stroke-dasharray: 166;
stroke-dashoffset: 166;
stroke-width: 2;
stroke: #22c55e;
fill: none;
animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}
.success-check {
stroke-dasharray: 48;
stroke-dashoffset: 48;
stroke-width: 3;
stroke: #22c55e;
fill: none;
animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.6s forwards;
}
@keyframes stroke {
100% {
stroke-dashoffset: 0;
}
}
.success-text {
opacity: 0;
transform: translateY(10px);
animation: fadeUp 0.4s ease 0.9s forwards;
font-size: 24px;
font-weight: 600;
color: #1d2242;
}
@keyframes fadeUp {
100% {
opacity: 1;
transform: translateY(0);
}
}import './S-009.css';
export default function SuccessCheck({ message = 'Success!' }) {
return (
<div className="success-wrapper">
<svg className="success-anim" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">
<circle className="success-circle" cx="26" cy="26" r="25" />
<path className="success-check" d="M14.1 27.2l7.1 7.2 16.7-16.8" />
</svg>
<div className="success-text">{message}</div>
</div>
);
}/* S-009: React styles */
.success-wrapper {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 40px;
}
.success-anim {
width: 80px;
height: 80px;
margin-bottom: 20px;
}
.success-circle {
stroke-dasharray: 166;
stroke-dashoffset: 166;
stroke-width: 2;
stroke: #22c55e;
fill: none;
animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}
.success-check {
stroke-dasharray: 48;
stroke-dashoffset: 48;
stroke-width: 3;
stroke: #22c55e;
fill: none;
animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.6s forwards;
}
@keyframes stroke {
100% {
stroke-dashoffset: 0;
}
}
.success-text {
opacity: 0;
transform: translateY(10px);
animation: fadeUp 0.4s ease 0.9s forwards;
font-size: 24px;
font-weight: 600;
color: #1d2242;
}
@keyframes fadeUp {
100% {
opacity: 1;
transform: translateY(0);
}
}仕組みとカスタマイズHow It Works & Customization
仕組みHow it works
An SVG contains a circle and a polyline (checkmark path). Both have stroke-dasharray set to their total path length and stroke-dashoffset starts at the full length (invisible). On trigger, CSS transitions stroke-dashoffset to 0, drawing the path progressively. The circle animates first (scale), then the checkmark draws after a delay.
SVGには円とポリライン（チェックマークパス）が含まれます。両方ともstroke-dasharrayが全パス長に設定され、stroke-dashoffsetが全長（不可視）から始まります。トリガー時にCSSトランジションがstroke-dashoffsetを0に遷移させパスを段階的に描画。円が最初にアニメーション（スケール）し、遅延後にチェックマークが描かれます。
カスタマイズ方法Customization
Change stroke color to match brand (green for success, blue for completion). Adjust the animation-duration for a quick snap or slow ceremonial reveal. Add a scale bounce on the circle for extra delight after the check draws.
ブランドに合わせてストロークカラーを変更（成功には緑、完了には青）。素早いスナップまたはゆっくりした厳かなリビールにanimation-durationを調整。チェックマーク描画後に追加の喜びとして円にスケールバウンスを追加。
注意点Caveats
The SVG animation is purely visual — always announce success via aria-live="polite" or by updating the page title/heading to reflect the successful state. Include a text confirmation ("Payment successful") alongside the visual animation.
SVGアニメーションは純粋に視覚的なものです — 成功状態を反映するためにaria-live="polite"またはページタイトル/見出しの更新で常に成功をアナウンスしてください。視覚的アニメーションと一緒にテキスト確認（"支払いが完了しました"）を含めてください。
よくある質問 Frequently Asked Questions
How to customize the success checkmark? Success Checkmarkをカスタマイズするには？
Modify the CSS custom properties and class styles defined in the code section. Key adjustable values include colors, sizes, durations, and spacing. See the Adjustable Parameters section for specific variables.
コードセクションで定義されているCSSカスタムプロパティとクラススタイルを変更してください。色、サイズ、時間、間隔が主な調整可能値です。具体的な変数は調整可能パラメータセクションを参照してください。
How to use the success checkmark in React? ReactでSuccess Checkmarkを使うには？
Import the provided React component and its CSS file. The component accepts props for customization. Check the React code section for the full implementation and available props.
提供されているReactコンポーネントとCSSファイルをインポートしてください。コンポーネントのpropsでカスタマイズできます。完全な実装と利用可能なpropsはReactコードセクションを参照してください。
What are the performance implications of success checkmark? Success Checkmarkのパフォーマンスへの影響は？
This implementation uses CSS transforms and opacity for animations, which are GPU-accelerated. It's lightweight and doesn't cause layout thrashing. Consider using prefers-reduced-motion for accessibility.
この実装はCSSのtransformとopacityを使用しており、GPUアクセラレーションされます。軽量でレイアウトスラッシングを引き起こしません。アクセシビリティのためにprefers-reduced-motionの使用を検討してください。
AIへの指示テンプレート AI Prompt Template
以下をAIに貼り付けると実装を依頼できます。 Paste the following into your AI assistant to request implementation.