ProgressIndicator

See also

Material Design spec, ProgressIndicator

Progress indicators show the status of a process in real time.

• Use the same progress indicator for all instances of a process (like loading)

• Two types: linear and circular

• Never use them as decoration

• They capture attention through motion

1. Linear progress indicator

2. Circular progress indicator

Usage

Declarative Python style with KVDeclarative Python style

from kivy.lang import Builder

from kivymd.app import MDApp

KV = '''
MDScreen:
    md_bg_color: self.theme_cls.backgroundColor

    MDLinearProgressIndicator:
        size_hint_x: .5
        value: 50
        pos_hint: {'center_x': .5, 'center_y': .5}
'''


class Example(MDApp):
    def build(self):
        self.theme_cls.theme_style = "Dark"
        return Builder.load_string(KV)

Example().run()

Declarative Python style with KVDeclarative Python style

from kivy.lang import Builder

from kivymd.app import MDApp

KV = '''
MDScreen:
    md_bg_color: self.theme_cls.backgroundColor

    MDCircularProgressIndicator:
        size_hint: None, None
        size: "48dp", "48dp"
        pos_hint: {'center_x': .5, 'center_y': .5}
'''


class Example(MDApp):
    def build(self):
        self.theme_cls.theme_style = "Dark"
        return Builder.load_string(KV)


Example().run()

Linear progress indicators can be determinate or indeterminate.

Determinate linear progress indicator

Determinate operations display the indicator increasing from 0 to 100% of the track, in sync with the process’s progress.

Declarative Python style with KVDeclarative Python style

from kivy.lang import Builder

from kivymd.app import MDApp

KV = '''
MDScreen:
    md_bg_color: self.theme_cls.backgroundColor

    MDLinearProgressIndicator:
        id: progress
        size_hint_x: .5
        type: "determinate"
        pos_hint: {'center_x': .5, 'center_y': .4}
'''


class Example(MDApp):
    def on_start(self):
        self.root.ids.progress.start()

    def build(self):
        self.theme_cls.theme_style = "Dark"
        return Builder.load_string(KV)


Example().run()

Circular progress indicators can be determinate or indeterminate.

Indeterminate circular progress indicator

Indeterminate operations display the indicator continually growing and shrinking along the track until the process is complete..

Declarative KV styleDeclarative Python style

MDCircularProgressIndicator:
    size_hint: None, None
    size: "48dp", "48dp"

Determinate circular progress indicator

Declarative KV styleDeclarative Python style

MDCircularProgressIndicator:
    size_hint: None, None
    size: "48dp", "48dp"
    determinate: True
    on_determinate_complete: print(args)

API break

1.1.1 version

MDProgressBar:
    value: 50
    color: app.theme_cls.accent_color

MDSpinner:
    size_hint: None, None
    size: dp(48), dp(48)

2.0.0 version

Declarative KV styleDeclarative Python style

MDLinearProgressIndicator:
    value: 50
    indicator_color: app.theme_cls.errorColor

Declarative KV styleDeclarative Python style

MDCircularProgressIndicator:
    size_hint: None, None
    size: dp(48), dp(48)

API - kivymd.uix.progressindicator.progressindicator

class kivymd.uix.progressindicator.progressindicator.MDLinearProgressIndicator(**kwargs)

Implementation of the linear progress indicator.

For more information, see in the DeclarativeBehavior and ThemableBehavior and ProgressBar classes documentation.

radius

Progress line radius.

Added in version 1.2.0.

radius is an VariableListProperty and defaults to [0, 0, 0, 0].

reversed

Reverse the direction the progressbar moves.

reversed is an BooleanProperty and defaults to False.

orientation

Orientation of progressbar. Available options are: ‘horizontal ‘, ‘vertical’.

orientation is an OptionProperty and defaults to ‘horizontal’.

indicator_color

Color of the active track.

Changed in version 2.0.0: Rename from color to indicator_color attribute.

indicator_color is an ColorProperty and defaults to None.

track_color

Progress bar back color in (r, g, b, a) or string format.

Added in version 1.0.0.

Changed in version 2.0.0: Rename from back_color to track_color attribute.

track_color is an ColorProperty and defaults to None.

running_determinate_transition

Running transition.

Changed in version 2.0.0: Rename from running_transition to running_determinate_transition attribute.

running_determinate_transition is an StringProperty and defaults to ‘out_quart’.

catching_determinate_transition

Catching transition.

Changed in version 2.0.0: Rename from catching_transition to catching_determinate_transition attribute.

catching_determinate_transition is an StringProperty and defaults to ‘out_quart’.

running_determinate_duration

Running duration.

Changed in version 2.0.0: Rename from running_duration to running_determinate_duration attribute.

running_determinate_duration is an NumericProperty and defaults to 2.5.

catching_determinate_duration

Catching duration.

running_duration is an NumericProperty and defaults to 0.8.

type

Type of progressbar. Available options are: ‘indeterminate ‘, ‘determinate’.

type is an OptionProperty and defaults to None.

running_indeterminate_transition

Running transition.

running_indeterminate_transition is an StringProperty and defaults to ‘in_cubic’.

catching_indeterminate_transition

Catching transition.

catching_indeterminate_transition is an StringProperty and defaults to ‘out_quart’.

running_indeterminate_duration

Running duration.

running_indeterminate_duration is an NumericProperty and defaults to 0.5.

catching_indeterminate_duration

Catching duration.

catching_indeterminate_duration is an NumericProperty and defaults to 0.8.

check_size(*args) → None

start() → None

Start animation.

stop() → None

Stop animation.

running_away(*args) → None

catching_up(*args) → None

on_value(instance, value)

class kivymd.uix.progressindicator.progressindicator.MDCircularProgressIndicator(**kwargs)

Implementation of the circular progress indicator.

Changed in version 2.0.0: Rename MDSpinner to MDCircularProgressIndicator class.

For more information, see in the ThemableBehavior and Widget classes documentation.

It can be used either as an indeterminate indicator that loops while the user waits for something to happen, or as a determinate indicator.

Set determinate to True to activate determinate mode, and determinate_time to set the duration of the animation.

Events:

on_determinate_complete

The event is called at the end of the indicator loop in the determinate = True mode.

determinate

Determinate value.

determinate is a BooleanProperty and defaults to False.

determinate_time

Determinate time value.

determinate_time is a NumericProperty and defaults to 2.

line_width

Progress line width of indicator.

line_width is a NumericProperty and defaults to dp(2.25).

active

Use active to start or stop the indicator.

active is a BooleanProperty and defaults to True.

color

Indicator color in (r, g, b, a) or string format.

color is a ColorProperty and defaults to None.

palette

A set of colors. Changes with each completed indicator cycle.

palette is a ListProperty and defaults to [].

on__rotation_angle(*args)

on_palette(instance, palette_list: list) → None

Fired when the palette value changes.

on_active(instance, value) → None

Fired when the active value changes.

on_determinate_complete(*args) → None

The event is fired at the end of the indicator loop in the determinate = True mode.

check_determinate(*args) → None

Fired when the class is initialized.