aforemny / material-components-web-elm / Material.CircularProgress

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

Table of Contents

Resources

Basic Usage

import Material.CircularProgress as CircularProgress

main =
    CircularProgress.indeterminate CircularProgress.config

Configuration


type Config msg

Circular progress configuration

config : Config msg

Default circular progress configuration

Configuration Options

setSize : Size -> Config msg -> Config msg

Specify the size of a circular progress indicator

Large is the default size.


type 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

Indeterminate Circular Progress

CircularProgress.indeterminate CircularProgress.config

indeterminate : Config msg -> Html msg

Indeterminate variant

Determinate Circular Progress

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.