Material.CircularProgress

Circular progress indicators visualize the linear progress of either determinate or indeterminate activities.

Resources

import Material.CircularProgress as CircularProgress


main =
    CircularProgress.indeterminate CircularProgress.config

type Config msg

Circular progress configuration

Default circular progress configuration

Specify the size of a circular progress indicator

Large is the default size.

type Size

Circular progress indicators sizes

Circular progress indicator large size (default)

Circular progress indicator medium size

Circular progress indicator small size

Specify whether a circular progress indicator should alternative between four colors.

This only applies to indeterminate circular progress indicators. Note that you have to specify the colors yourself via SASS or CSS.

setClosed : Bool -> Config msg -> Config msg

Specify whether a circular progress indicator should be hidden

setLabel : Maybe String -> Config msg -> Config msg

Specify the HTML5 aria-label attribute

setAttributes : List (Attribute msg) -> Config msg -> Config msg

Specify additional attributes

CircularProgress.indeterminate CircularProgress.config

Indeterminate variant

CircularProgress.determinate CircularProgress.config
    { progress = 0.5 }

determinate : Config msg -> { progress : Float } -> Html msg

Determinate variant

The progress is specified as a Float between 0.0 and 1.0.