コンポーネント工房：Reflexライブラリ100
·
講座の概要
レイアウト
·
Box
·
Flex
·
Stack
·
Grid
·
Container
·
Section
·
Center
·
Spacer
·
Separator
·
Card
·
Inset
·
Aspect Ratio
·
Fragment
タイポグラフィ
·
Text
·
Heading
·
Link
·
Code
·
Markdown
·
Blockquote
·
Quote
·
Strong
·
Em
·
Kbd
フォーム
·
Button
·
Input
·
Text Area
·
Checkbox
·
Switch
·
Radio Group
·
Select
·
Slider
·
Form
·
Upload
データ表示
·
Badge
·
Avatar
·
Icon
·
Callout
·
List
·
Data List
·
Code Block
·
Progress
·
Spinner
·
Scroll Area
·
Moment
開閉と切り替え
·
Tabs
·
Accordion
·
Segmented Control
オーバーレイ
·
Tooltip
·
Popover
·
Hover Card
·
Dialog
·
Alert Dialog
·
Drawer
·
Dropdown Menu
·
Context Menu
·
Toast
動的レンダリング
·
Cond
·
Match
·
Foreach
·
Auto Scroll
メディア
·
Image
·
Audio
·
Video
表とデータグリッド
·
Table
·
Data Table
·
Data Editor
チャート
·
Area Chart
·
Bar Chart
·
Line Chart
·
Composed Chart
·
Pie Chart
·
Radar Chart
·
Radial Bar Chart
·
Scatter Chart
·
Funnel Chart
·
Treemap
·
Sankey Chart
·
Error Bar
チャートの部品
·
Axis
·
Cartesian Grid
·
Chart Tooltip
·
Legend
·
Label
·
Reference
·
Brush
ほかのチャートライブラリ
·
Plotly
·
Pyplot
HTML要素
·
HTML
·
HTML Text
·
HTML Layout
·
HTML Forms
·
HTML Media
·
HTML Tables
·
SVG
そのほかの道具
·
Theme
·
Skeleton
·
Clipboard
·
Html Embed
·
Script
·
Memo
rx.spinner公式ドキュメント
工房の注文書
「下書き保存」ボタンを押したら、保存している間はフロッピーアイコンの位置でスピナーが回るようにしてください。
rx.spinnerは、作業が進行中であることを知らせるくるくる回る表示です。あとどれくらいかわからないときに使います。残りの量がわかるならrx.progressのほうが適しています。
rx.spinner()子を入れると、loadingがオンの間はスピナーが、オフになると子が表示されます。
プロパティを変えてみる
size
loading
rx.spinner(rx.text("Content is ready"), size="2", loading=True)| プロパティ | 値 | 既定値 | 用途 |
|---|---|---|---|
size | "1" "2" "3" | "2" | 大きさ |
loading | True / False | True | オンならスピナー、オフなら子を表示する |
sizeは"1"〜"3"です。文字の横に置くときは文字の大きさに合わせます。
rx.hstack(
rx.spinner(size="1"),
rx.spinner(size="2"),
rx.spinner(size="3"),
align="center",
spacing="4",
)ボタンには独自のloadingプロパティがあり、オンにすると文字の代わりにスピナーが回って押せなくなります（1つ目）。アイコン付きのボタンなら、アイコンの位置だけをrx.spinnerに替えてボタンをdisabledで止めれば、文字は残したままアイコンだけを回せます（2つ目）。3つ目のようにloading=Falseなら、包んだアイコンがそのまま表示されます。
rx.flex(
rx.button("Bookmark", loading=True),
rx.button(rx.spinner(loading=True), "Bookmark", disabled=True),
rx.button(rx.spinner(rx.icon("bookmark"), loading=False), "Bookmark"),
spacing="3",
wrap="wrap",
)loadingにStateの値を渡すと、作業が動いている間だけスピナーが表示され、終わると結果がその場所に現れます。場所を別に空けたりrx.condを使ったりする必要はありません。
Loaded 0 times
import asyncio
class SpinnerLoadState(rx.State):
loading: bool = False
loads: int = 0
@rx.event(background=True)
async def load_result(self):
async with self:
if self.loading:
return
self.loading = True
await asyncio.sleep(1.5)
async with self:
self.loading = False
self.loads += 1
rx.hstack(
rx.button("Load", on_click=SpinnerLoadState.load_result, variant="soft"),
rx.spinner(rx.text("Loaded ", SpinnerLoadState.loads, " times"), loading=SpinnerLoadState.loading),
spacing="4",
align="center",
)保存している間はフロッピーアイコンがスピナーに変わり、ボタンはロックされます。終わるとアイコンが戻り、「Saved」バッジが付きます。
import asyncio
class SpinnerSaveState(rx.State):
saving: bool = False
saved: bool = False
@rx.event(background=True)
async def save_draft(self):
async with self:
if self.saving:
return
self.saving = True
self.saved = False
await asyncio.sleep(1.2)
async with self:
self.saving = False
self.saved = True
rx.hstack(
rx.button(
rx.spinner(rx.icon("save"), loading=SpinnerSaveState.saving),
"Save draft",
on_click=SpinnerSaveState.save_draft,
disabled=SpinnerSaveState.saving,
),
rx.cond(SpinnerSaveState.saved, rx.badge("Saved", color_scheme="green")),
spacing="3",
align="center",
)工房ノート
rx.spinner()は終わりのわからない待ち時間の表示。残りの量がわかるならrx.progress。
sizeは"1"〜"3"。
子を包むと、loading=Trueの間はスピナー、Falseなら子が表示される。
ボタン全体を切り替えるならbutton(loading=True)、アイコンだけ回すならrx.spinnerでアイコンを包む。
新しい授業・講座のお知らせを受け取る
この講座に授業が追加されたり、続きの講座が公開されたりしたらメールでお知らせします。
R
ReflexKR
触って学ぶPythonとReflex。すべての例はReflex 0.10.0で実際に動かして確認しています。
ReflexKRはバナー広告なし・無料で運営しています。役に立ったら、コーヒー一杯で応援してください。 ☕ コーヒーで応援する
アフィリエイトと支援について© 2026 ReflexKR · Since 2026 · CC BY-NC 4.0
質問と回答
この回について気になることを書き込んでください。すべての言語のページの質問がここに集まります。