More than 1 year has passed since last update.

プログレスバーの作り方をメモ：時折現れ、どうつくろうか〜

Last updated at 2023-07-11Posted at 2023-07-11

時々出てきて、どうつくろう〜となるプログレスバーの作り方をメモ
タイトルはChatGPTに任せた結果

使ったもの

Rails(7)のテンプレートエンジン
Tailwind CSS

こう書くと

<div class='rounded-full w-full h-2 border border-secondary'>
    <div class='bg-secondary h-full' style="width: calc((<%= step %> / 13) * 100%)"></div>
</div>

stepが進捗
13は合計のstep数だけれど、直書きせずに〇〇.sizeとかでstepの合計をプログラムで取得して渡した方がstepが増えた時とか不具合が起きなくてすみそう

こういう感じのものができる

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up