Progress bar

Overview

Progress Bar is used to indicate something is in progress and is based on the Angular Material progress bar component.

Examples

import mesop as me


def load(e: me.LoadEvent):
  me.set_theme_mode("system")


@me.page(
  on_load=load,
  security_policy=me.SecurityPolicy(
    allowed_iframe_parents=["https://google.github.io"]
  ),
  path="/progress_bar",
)
def app():
  with me.box(style=me.Style(margin=me.Margin.all(15))):
    me.text("Default progress bar", type="headline-5")
    me.progress_bar()

API

progress_bar

Creates a Progress bar component.

PARAMETER	DESCRIPTION
key	The component key. TYPE: str | None DEFAULT: None
color	Theme palette color of the progress bar. TYPE: Literal['primary', 'accent', 'warn'] | None DEFAULT: None
value	Value of the progress bar. Defaults to zero. Mirrored to aria-valuenow. TYPE: float DEFAULT: 0
buffer_value	Buffer value of the progress bar. Defaults to zero. TYPE: float DEFAULT: 0
mode	Mode of the progress bar. Input must be one of these values: determinate, indeterminate, buffer, query, defaults to 'determinate'. Mirrored to mode attribute. TYPE: Literal['determinate', 'indeterminate', 'buffer', 'query'] DEFAULT: 'indeterminate'
on_animation_end	Event emitted when animation of the primary progress bar completes. This event will not be emitted when animations are disabled, nor will it be emitted for modes with continuous animations (indeterminate and query). TYPE: Callable[[ProgressBarAnimationEndEvent], Any] | None DEFAULT: None

ProgressBarAnimationEndEvent dataclass

Bases: MesopEvent

Event emitted when the animation of the progress bar ends.

ATTRIBUTE	DESCRIPTION
value	The value of the progress bar when the animation ends. TYPE: float
key	Key of the component that emitted this event. TYPE: str