Skip to main content

ProgressRing

A material design circular progress indicator, which spins to indicate that the application is busy.

A control that shows progress along a circle.

ft.ProgressRing(value=0.4, padding=ft.Padding.all(10))
ProgressRing
Fixed progress ring

Inherits: LayoutControl

Properties

  • bgcolor - Color of the circular track being filled by the circular indicator.
  • color - The progress indicator's color.
  • padding - The padding around the indicator track.
  • semantics_label - Used to identify the purpose of this progress bar for screen reading software.
  • semantics_value - Used for determinate progress indicators to indicate how much progress has been made.
  • size_constraints - Defines the minimum and maximum size of the progress indicator.
  • stroke_align - The relative position of the stroke.
  • stroke_cap - The progress indicator's line ending.
  • stroke_width - The width of the line used to draw the circle.
  • track_gap - The gap between the active indicator and the background track.
  • value - The value of this progress indicator.
  • year_2023 - If this is set to False, the ProgressRing will use the latest Material Design 3 appearance, which was introduced in December 2023.

Examples​

Live example

Determinate and indeterminate progress rings​

import asyncio

import flet as ft


async def main(page: ft.Page):
    page.add(
        ft.SafeArea(
            content=ft.Column(
                controls=[
                    ft.Text(
                        value="Circular progress indicator",
                        theme_style=ft.TextThemeStyle.HEADLINE_SMALL,
                    ),
                    ft.Row(
                        controls=[
                            determinate_ring := ft.ProgressRing(
                                width=16, height=16, stroke_width=2
                            ),
                            determinate_message := ft.Text(
                                "Wait for the completion..."
                            ),
                        ]
                    ),
                    ft.Text(
                        value="Indeterminate circular progress",
                        theme_style=ft.TextThemeStyle.HEADLINE_SMALL,
                    ),
                    ft.Column(
                        horizontal_alignment=ft.CrossAxisAlignment.CENTER,
                        controls=[
                            ft.ProgressRing(),
                            ft.Text("I'm going to run for ages..."),
                        ],
                    ),
                ]
            )
        )
    )

    for i in range(0, 101):
        determinate_ring.value = i * 0.01
        await asyncio.sleep(0.1)
        if i == 100:
            determinate_message.value = "Finished!"
        page.update()


if __name__ == "__main__":
    ft.run(main)
determinate-and-indeterminate

Gauge with progress​

import flet as ft


def main(page: ft.Page):
    page.add(
        ft.SafeArea(
            content=ft.Stack(
                width=100,
                height=100,
                controls=[
                    ft.Container(content=ft.Text("60%"), alignment=ft.Alignment.CENTER),
                    ft.ProgressRing(value=0.6, width=100, height=100),
                ],
            )
        )
    )


if __name__ == "__main__":
    ft.run(main)
determinate-and-indeterminate

Properties​

bgcolorclass-attributeinstance-attribute​

bgcolor: Optional[ColorValue] = None

Color of the circular track being filled by the circular indicator.

colorclass-attributeinstance-attribute​

color: Optional[ColorValue] = None

The progress indicator's color.

paddingclass-attributeinstance-attribute​

padding: Optional[PaddingValue] = None

The padding around the indicator track.

If None, flet.ProgressIndicatorTheme.circular_track_padding is used.

If that's is also None and year_2023 is False, defaults to Padding.all(4.0).

Otherwise, defaults to Padding.all(0.0).

semantics_labelclass-attributeinstance-attribute​

semantics_label: Optional[str] = None

Used to identify the purpose of this progress bar for screen reading software.

semantics_valueclass-attributeinstance-attribute​

semantics_value: Optional[Number] = None

Used for determinate progress indicators to indicate how much progress has been made.

size_constraintsclass-attributeinstance-attribute​

size_constraints: Optional[BoxConstraints] = None

Defines the minimum and maximum size of the progress indicator.

If None, flet.ProgressIndicatorTheme.size_constraints is used.

If that's is also None, defaults to a minimum width and height of 36.

stroke_alignclass-attributeinstance-attribute​

stroke_align: Optional[Number] = None

The relative position of the stroke.

Value typically ranges be -1.0 (inside stroke) and 1.0 (outside stroke).

A value of 0 (center stroke) will center the border on the edge of the control.

If flet.ProgressRing.year_2023 is True, then the default value is 0. Otherwise, the default value is -1.

stroke_capclass-attributeinstance-attribute​

stroke_cap: Optional[StrokeCap] = None

The progress indicator's line ending.

stroke_widthclass-attributeinstance-attribute​

stroke_width: Optional[Number] = None

The width of the line used to draw the circle.

track_gapclass-attributeinstance-attribute​

track_gap: Optional[Number] = None

The gap between the active indicator and the background track.

If year_2023 is True or Theme.use_material3 is False, then no track gap will be drawn.

Set track_gap to 0 to hide this track gap.

If None, flet.ProgressIndicatorTheme.track_gap is used.

If that's is also None, defaults to 4.0.

valueclass-attributeinstance-attribute​

value: Optional[Number] = None

The value of this progress indicator.

A value of 0.0 means no progress and 1.0 means that progress is complete. The value will be clamped to be in the range 0.0 - 1.0. If None, this progress indicator is indeterminate, which means the indicator displays a predetermined animation that does not indicate how much actual progress is being made.

year_2023class-attributeinstance-attribute​

year_2023: Optional[bool] = None

If this is set to False, the ProgressRing will use the latest Material Design 3 appearance, which was introduced in December 2023.

When True, the ProgressRing will use the 2023 Material Design 3 appearance.

If not set, then the flet.ProgressIndicatorTheme.year_2023 will be used, which is False by default.

If flet.Theme.use_material3 is False, then this property is ignored.