Circular progress indicators visualize the linear progress of either determinate or indeterminate activities.
import Material.CircularProgress as CircularProgress
main =
CircularProgress.indeterminate CircularProgress.config
Circular progress configuration
config : Config msg
Default circular progress configuration
setSize : Size -> Config msg -> Config msg
Specify the size of a circular progress indicator
Large is the default size.
Circular progress indicators sizes
large : Size
Circular progress indicator large size (default)
medium : Size
Circular progress indicator medium size
small : Size
Circular progress indicator small size
setFourColored : Basics.Bool -> Config msg -> Config msg
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 : Basics.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 (Html.Attribute msg) -> Config msg -> Config msg
Specify additional attributes
CircularProgress.indeterminate CircularProgress.config
indeterminate : Config msg -> Html msg
Indeterminate variant
CircularProgress.determinate CircularProgress.config
{ progress = 0.5 }
determinate : Config msg -> { progress : Basics.Float } -> Html msg
Determinate variant
The progress is specified as a Float
between 0.0
and 1.0
.