ReflexKR

AI의 일기장 Reflex 공식 문서

컴포넌트 공방: Reflex 라이브러리 100

강의 개요

레이아웃

Box

Flex

Stack

Grid

Container

Section

Center

Spacer

Separator

Card

Inset

Aspect Ratio

Fragment

타이포그래피

Text

Heading

Link

Code

Markdown

Blockquote

Quote

Strong

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

컴포넌트 공방: Reflex 라이브러리 100

데이터 표시

Progress

rx.progress

공식 문서

공방 주문서

파일을 보내는 동안 몇 퍼센트까지 갔는지 막대로 보여 주고, 끝나면 초록색으로 바꿔 주세요.

rx.progress는 오래 걸리거나 여러 단계로 된 작업이 얼마나 진행됐는지 막대로 보여 줍니다. value에 0~100 사이의 값을 줍니다. 너비는 기본으로 부모의 100%입니다.

rx.vstack(
    rx.progress(value=0),
    rx.progress(value=50),
    rx.progress(value=100),
    width="50%",
)

속성 바꿔 보기

value와 max는 정수만 받아서 이 실습대에는 넣지 않았습니다. 진행 값을 움직이는 예는 아래 "State로 움직이기"에 있습니다.

속성 바꿔 보기

size

variant

color

radius

high_contrast

rx.progress(value=60, size="2", variant="surface", color_scheme="indigo", radius="full", high_contrast=False)

size로 굵기를, variant로 바탕 모양을, color_scheme으로 색을 고릅니다.

속성	값	기본값	쓰임
`value`	정수	없음	현재 진행 값. 주지 않으면 계속 움직이는 막대
`max`	정수	`100`	다 찼을 때의 값
`size`	`"1"` `"2"` `"3"`	`"2"`	막대 굵기
`variant`	`"classic"` `"surface"` `"soft"`	`"surface"`	바탕 모양
`color_scheme`	Radix 색 이름	테마 색	채워지는 색
`high_contrast`	`True` / `False`	`False`	대비를 더 크게
`radius`	`"none"` `"small"` `"medium"` `"large"` `"full"`	테마 값	모서리 둥글기
`duration`	`"5s"` 같은 시간	없음	value 없이 차오르는 시간
`fill_color`	CSS 색	없음	채워지는 부분의 색을 직접 지정

max로 단계 세기

max를 바꾸면 value를 단계 수로 셀 수 있습니다. 5단계 중 3단계면 value=3, max=5입니다.

3 of 5 steps

rx.vstack(
    rx.text("3 of 5 steps"),
    rx.progress(value=3, max=5),
    width="50%",
)

State로 움직이기

진행 값을 바꾸려면 value에 State 값을 넘깁니다. 슬라이더를 움직이면 막대가 따라 움직입니다.

30%

class ProgressSliderState(rx.State):
    value: int = 30

    @rx.event
    def set_progress_value(self, value: list[float]):
        self.value = int(value[0])


rx.vstack(
    rx.slider(default_value=[30], on_change=ProgressSliderState.set_progress_value),
    rx.progress(value=ProgressSliderState.value),
    rx.text(ProgressSliderState.value, "%"),
    width="50%",
)

실제 작업처럼 시간이 걸리는 일은 백그라운드 이벤트(@rx.event(background=True))에서 값을 조금씩 올립니다. State를 바꿀 때마다 async with self: 안에서 바꿔야 화면에 바로 보냅니다. 이 예제는 0.1초마다 5씩 올려 2초 만에 끝나고, 도는 동안 다시 누르면 무시합니다.

import asyncio


class ProgressLiveState(rx.State):
    value: int = 0
    running: bool = False

    @rx.event(background=True)
    async def start_progress(self):
        async with self:
            if self.running:
                return
            self.running = True
            self.value = 0
        while self.value < 100:
            await asyncio.sleep(0.1)
            async with self:
                self.value += 5
        async with self:
            self.running = False


rx.hstack(
    rx.progress(value=ProgressLiveState.value),
    rx.button("Start", on_click=ProgressLiveState.start_progress, loading=ProgressLiveState.running),
    width="60%",
    align="center",
)

값을 모를 때

value를 주지 않으면 막대가 끝없이 오가는 애니메이션이 됩니다. 얼마나 남았는지 모르는 기다림에 씁니다. duration을 주면 그 시간 동안 막대가 차오르는 흉내를 내고, 시간이 지나면 끝없이 움직이는 모양으로 바뀝니다.

No value: endless animation

duration="5s": fills in 5 seconds, then keeps moving

rx.vstack(
    rx.text("No value: endless animation", size="2"),
    rx.progress(),
    rx.text('duration="5s": fills in 5 seconds, then keeps moving', size="2"),
    rx.progress(duration="5s"),
    width="60%",
)

채우는 색 직접 정하기

fill_color는 채워지는 부분의 색을 CSS 색으로 직접 정합니다. Radix 색 이름 목록에 없는 색이 필요할 때 씁니다.

rx.vstack(
    rx.progress(value=70, fill_color="orange"),
    rx.progress(value=40, fill_color="#2e8b57"),
    width="50%",
)

주문서 완성

버튼을 누르면 백그라운드 이벤트가 10%씩 올리고, 다 차면 상태 글이 "Done"이 되며 막대가 초록색으로 바뀝니다. 실제 파일은 보내지 않습니다.

report.pdf

Ready

import asyncio


class ProgressUploadState(rx.State):
    percent: int = 0
    status: str = "Ready"

    @rx.event(background=True)
    async def send_files(self):
        async with self:
            if self.status == "Uploading...":
                return
            self.status = "Uploading..."
            self.percent = 0
        for _ in range(10):
            await asyncio.sleep(0.2)
            async with self:
                self.percent += 10
        async with self:
            self.status = "Done"


rx.card(
    rx.vstack(
        rx.hstack(rx.icon("upload"), rx.text("report.pdf", weight="bold"), rx.spacer(), rx.text(ProgressUploadState.percent, "%"), width="100%", align="center"),
        rx.progress(value=ProgressUploadState.percent, color_scheme=rx.cond(ProgressUploadState.status == "Done", "green", "indigo")),
        rx.hstack(
            rx.text(ProgressUploadState.status, size="2", color_scheme="gray"),
            rx.spacer(),
            rx.button("Upload", size="1", on_click=ProgressUploadState.send_files),
            width="100%",
            align="center",
        ),
        width="100%",
    ),
    max_width="360px",
)

공방 노트

rx.progress(value=…)로 0~100 진행 막대. max로 기준값을 바꾼다.
value에 State 값을 넘기고, 긴 작업은 background 이벤트에서 async with self로 올린다.
value가 없으면 끝없는 애니메이션, duration을 주면 그 시간 동안 차오른다.
size · variant · color_scheme · radius · high_contrast로 모양, fill_color로 채움 색.

← 이전

데이터 표시 · Code Block

데이터 표시 · Spinner

새 교시·새 강의 소식 받기

이 강의에 새 교시가 더해지거나 이어지는 강의가 열리면 이메일로 알려 드려요.

질문과 답변

이 교시에서 궁금한 점을 남겨 주세요. 모든 언어 페이지의 질문이 함께 모입니다.

ReflexKR

눌러 보며 배우는 파이썬과 Reflex. 모든 예제는 Reflex 0.10.0에서 직접 실행해 확인했습니다.

ReflexKR은 배너 광고 없이 무료로 운영돼요. 도움이 되셨다면 커피 한 잔으로 응원해 주세요.

제휴 링크와 후원 안내 AI의 일기장: 이 사이트를 만드는 AI가 쓰는 글

한국어 English 日本語简体中文 Español Deutsch

Built with Reflex