ローダーにステップの進捗状況も付与する

:::note
ノーフレームワークのプロジェクトでの開発です
:::

# 1. 背景

業務でローダーを実装しています。

待機時間が長すぎるかつ、ステップが分かれている為以下の追加要件を満たしユーザのストレスを減らしたいと思います。

- 進捗率の表示をしたい
- 全体のステップのうち、今どこのステップなのか知りたい
  例）データ更新、計算、ダウンロード等

:::note
実際の使用状況としてはユーザは待機するのみで、処理のステップが複数あり、ステップの進捗状況と連動して変わるようにしたいです。
また、拡張機能かつ、動いているサイトの要素も更新しない為スケルトンスクリーンは検討していません。
:::

これを実現するにあたってどのようなローダー、はたまたローダーとは別の物にしようか考えたいと思います。

# 2. ステップインジケータ（Step Indicator）

https://designsystem.utah.gov/library/components/widgetsIndicators/stepIndicators

>ユーザーが複数のページにまたがるフォームやプロセスを、3つ以上のハイレベルなステップやチャプターに整理して作業している場合に利用されるべきである

:::note
ユーザの作業によりステップが変わる際に使うことを推奨されているため、今回の要件とは異なると考えました。

要件：実際の使用状況としてはユーザは待機するのみで、処理のステップが複数あり、ステップの進捗状況と連動して変わるようにしたい
:::

# 3. ローダー（スピナー）

:::note
ローダー + 「進捗状況と実行中のステップ名を表示」という物を作ってみます。
進捗状況・・・例）5ステップ中1ステップ目であることを示す
:::

https://toucanlab.org/good-bad-ui-design-v2/

こちらのステップインジケータからヒントを得ました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/405182/87d6cd91-f98b-31f3-c6a9-8c3d5f7306ea.png)
[引用元](![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/405182/147d720c-8149-4b12-ad7a-af2c7e60f6b8.png)
)

## シンプルなローダー

https://fffuel.co/svg-spinner/

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="wvbBeoG" data-user="uuylkesg-the-styleful" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/uuylkesg-the-styleful/pen/wvbBeoG">
  loader with step progress information</a> by 山根大生 (<a href="https://codepen.io/uuylkesg-the-styleful">@uuylkesg-the-styleful</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

このローダーの内側にステップの進捗とステップ名を表示させます。

## ステップの進捗状況とステップ名も付与したローダー

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="mdYyMbr" data-user="uuylkesg-the-styleful" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/uuylkesg-the-styleful/pen/mdYyMbr">
  Loader with step progress information</a> by 山根大生 (<a href="https://codepen.io/uuylkesg-the-styleful">@uuylkesg-the-styleful</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

# 4. 最後に
ユーザにとって優しい設計をしたいです！
ステップインジケータの名前、定義を知らなかったのでとても勉強になりました

# 5. 参考
- [UI UXデザインやWebデザインの参考になるおすすめサイト38選を紹介](https://blog.nijibox.jp/article/uiux_recommended_site/)
- https://www.granfairs.com/blog/staff/centering-by-css
- [UIデザインを比較！ステップインジケータUIの意外な落とし穴とは？](https://toucanlab.org/good-bad-ui-design-v2/)
- [スケルトンスクリーンをちゃんと理解する](https://jackswim3411.hatenablog.com/entry/2022/04/19/015724)
- [MDN viewBox](https://developer.mozilla.org/ja/docs/Web/SVG/Attribute/viewBox)
- [MDN cy](https://developer.mozilla.org/ja/docs/Web/SVG/Attribute/cy)
- [MDN stroke-dasharray](https://developer.mozilla.org/ja/docs/Web/SVG/Attribute/stroke-dasharray)
- [MDN tspan](https://developer.mozilla.org/ja/docs/Web/SVG/Element/tspan)
- [MDN text](https://developer.mozilla.org/ja/docs/Web/SVG/Element/text)
- [待機状態のUIについて整理してみる(デザイン編](https://zenn.dev/kii/articles/progress-indicator-ui)
- [ローディング演出に使えるアイデア7選](https://mo-no.design/blog/article/loading/)
- [これはすごい便利！ HTMLはdiv一つ、あとはCSSをコピペするだけで500種類以上のローダーが簡単に実装できる -CSS Loaders](https://coliss.com/articles/build-websites/operation/css/collection-of-css-loading-animations.html)
- [コピペで簡単！ローディングアニメーションの参考になるサイトまとめ](https://webdesign-trends.net/entry/4132)
- [CSSで作るローディングアニメーション40選〜待ち時間を楽しくするテクニック](https://photopizza.design/css_loading/)
- [ローディング画面実装のメリット・デメリット](https://www.mediaprimestyle.jp/column_post/loading-screen/#i-4)
- [スケルトンローダーvsスピナーvsプログレスバー](https://marron-web.site/blog/cdad43/#%E3%82%B9%E3%83%94%E3%83%8A%E3%83%BC)