EdutainmentLIVE/elm-bootstrap/2.0.1

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
    ]
  • options List of options

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

Options

value : Float -> Option msg

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

height : 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

Option to give a progress bar a success background color

info : Option msg

Option to give a progress bar an info background color

Option to give a progress bar a warning background color

Option to give a progress bar a danger background color

Option to make the progress bar background striped

Option to make the progress bar animated

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

attrs : List (Attribute msg) -> Option msg

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

wrapperAttrs : List (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 ]
    ]