やってみよう「支払う」を押してみてください
通知・フィードバックメジャー（よく見る）
完了のチェックアニメーション
Success Checkmark
丸がくるっと描かれて、中にチェックの線がシュッと引かれる。「完了しました」をはっきり伝える。
別名チェックマークアニメーション完了アニメーション送信完了の表示成功アニメーション
どこで使われている？
- よく見かける場所
- 決済の完了画面、送信完了、予約完了、Apple Pay の支払い
- 使うとよい場面
- お金の支払いや大事な送信が、ちゃんと終わったことを伝えたいとき
- 避けたい場面
- 何度も繰り返す小さな操作（毎回出ると大げさ）
AIへの指示文
これをコピーしてAIに貼り付ければOKです。Webサイトを作る前提の内容です（右上の「何を作る？」で変えられます）。
HTML / CSS / JavaScript で「完了のチェックアニメーション（Success Checkmark）」を実装してください。 動き：処理が終わったら、緑の丸の輪郭を線を描くように一周させ、続けて中のチェックの線を左から右へ描く。最後に全体を少し弾ませ、「お支払いが完了しました」の文字を出す。 使う部品：SVG の stroke-dasharray と stroke-dashoffset で線を描く
もっと詳しく：プログラムでの部品名
同じ動きでも、作るものによってプログラムの中での部品の名前が違います。上の指示文にはすでに入っているので、覚える必要はありません。AIの説明に出てきた単語を確認したいときに使ってください。
| Webサイトなら | SVG の stroke-dasharray と stroke-dashoffset で線を描く |
|---|---|
| iPhoneアプリなら | Image(systemName: "checkmark.circle") ＋ .symbolEffect（または trim で描く） |
| Androidアプリなら | AnimatedVectorDrawable（または Path を trim で描く） |
| Flutterなら | CustomPaint で線を描く（Lottie でも可） |
| React Nativeなら | react-native-svg の strokeDashoffset を動かす（Lottie でも可） |