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

Table of Contents

• Resources
• Basic Usage
• Indeterminate Linear Progress
• Determinate Linear Progress
• Buffered Linear Progress
• Closed Linear Progress
• Reversed Linear Progress

Resources

• Demo: Linear Progress
• Material Design Guidelines: Progress indicators
• MDC Web: Linear Progress
• Sass Mixins (MDC Web)

Basic Usage

import Material.LinearProgress
    exposing
        ( indeterminateLinearProgress
        , linearProgressConfig
        )


main =
    indeterminateLinearProgress linearProgressConfig

Indeterminate Linear Progress

Determinate Linear Progress

determinateLinearProgress linearProgressConfig
    { progress = 0.5 }

Buffered Linear Progress

bufferedLinearProgress linearProgressConfig
    { progress = 0.5, buffered = 0.75 }

Closed Linear Progress

If you want to hide the linear progress indicator, set its closed configuration field to True.

indeterminateLinearProgress
    { linearProgressConfig | closed = True }

Reverse Linear Progress

If you want to reverse the direction of the linear progress indicator, set its reverse configuration field to True.

indeterminateLinearProgress
    { linearProgressConfig | reverse = True }