컴포넌트 공방: 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 속성이 있어서, 켜면 글자 대신 스피너가 돌고 누를 수 없게 됩니다(첫째). 아이콘이 있는 버튼이라면 아이콘 자리만 rx.spinner로 바꾸고 버튼은 disabled로 막으면, 글자는 남긴 채 아이콘만 돌게 할 수 있습니다(둘째). 셋째처럼 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
눌러 보며 배우는 파이썬과 Reflex. 모든 예제는 Reflex 0.10.0에서 직접 실행해 확인했습니다.
ReflexKR은 배너 광고 없이 무료로 운영돼요. 도움이 되셨다면 커피 한 잔으로 응원해 주세요.
© 2026 ReflexKR · Since 2026 · CC BY-NC 4.0
질문과 답변
이 교시에서 궁금한 점을 남겨 주세요. 모든 언어 페이지의 질문이 함께 모입니다.