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 : List (Option msg) -> Html msg
Create a progress bar with various customization options
Progress.progress
[ Progress.primary
, Progress.value 30
]
options
List of optionsNOTE: If you have duplicate options, the last one "wins"
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)
Opaque type representing available display options for the progress bar
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 ]
]