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

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

Table of Contents

Resources

Basic Usage

import Material.LinearProgress as LinearProgress

main =
    LinearProgress.indeterminate LinearProgress.config

Configuration


type Config msg

Linear progress configuration

config : Config msg

Default linear progress configuration

Configuration Options

setClosed : Basics.Bool -> Config msg -> Config msg

Specify whether a linear progress indicator should be hidden

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

Specify additional attributes

Indeterminate Linear Progress

indeterminate : Config msg -> Html msg

Indeterminate linear progress variant

Determinate Linear Progress

LinearProgress.determinate LinearProgress.config
    { progress = 0.5 }

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

Determinate linear progress variant

Buffered Linear Progress

LinearProgress.buffered LinearProgress.config
    { progress = 0.5, buffered = 0.75 }

buffered : Config msg -> { progress : Basics.Float, buffered : Basics.Float } -> Html msg

Buffered linear progress variant

Closed Linear Progress

If you want to hide the linear progress indicator, set its setClosed configuration option to True.

LinearProgress.indeterminate
    (LinearProgress.config |> LinearProgress.setClosed True)

RTL Localization

The linear progress indicator follows the direction that text flows, as indicated by (the nearest anchestor's) rtl attribute.

To override that value, you may specify Html.Attributes.dir "rtl" (or "ltr") insetAttributes`.