EdutainmentLIVE / elm-bootstrap / Bootstrap.Progress

You can use the custom progress elment for displaying simple or complex progress bars. It doesn't use the HTML5 <progress> element, ensuring you can stack progress bars, animate them, and place text labels over them.

Progress bar

progress : List (Option msg) -> Html msg

Create a progress bar with various customization options

Progress.progress
    [ Progress.primary
    , Progress.value 30
    ]

NOTE: If you have duplicate options, the last one "wins"

Options

value : Basics.Float -> Option msg

Option to specify the progress amount for a bar in percent. Should be a value between 0 and 100

height : Basics.Int -> Option msg

Option to specify the height (in pixels) for the progress bar

label : String -> Option msg

Option to specify a text label for a progress bar

The label will only display when you have set a value

customLabel : List (Html msg) -> Option msg

Option to specify a funky custom label for a progress bar

success : Option msg

Option to give a progress bar a success background color

info : Option msg

Option to give a progress bar an info background color

warning : Option msg

Option to give a progress bar a warning background color

danger : Option msg

Option to give a progress bar a danger background color

striped : Option msg

Option to make the progress bar background striped

animated : Option msg

Option to make the progress bar animated

NOTE: Giving this option will automatically also make the background striped

attrs : List (Html.Attribute msg) -> Option msg

Option to specify one ore more custom Html.Attribute for the progress bar

wrapperAttrs : List (Html.Attribute msg) -> Option msg

Option to specify one ore more custom Html.Attribute for the progress bar wrapper/container (say you need to add a on click handler or something like that)


type Option msg

Opaque type representing available display options for the progress bar

Stacking multiple

progressMulti : List (List (Option msg)) -> Html msg

Create a progress containing multiple progress bars next to each other

Progress.progressMulti
    [ [ Progress.info, Progress.value 25 ]
    , [ Progress.success, Progress.value 30 ]
    ]