Placeholder loading allows you to display placeholder loaders like Facebook's cards loading.
In this module you will be able to set the configuration of your loader and to create custom loaders
Config type used to define loader configuration
config : Config msg
Function to call to set a default configuration that you can then customize
FacebookLoader.view PlaceholderLoading.config
addAttributes : List (Svg.Attribute msg) -> Config msg -> Config msg
Add attributes to the svg
element, like a viewBox
for custom loaders.
PlaceholderLoading.config |> PlaceholderLoading.addAttributes [ viewBox "0 0 100 60" ]
animate : Basics.Bool -> Config msg -> Config msg
Wether or not the loader should animate. Default to True
PlaceholderLoading.config |> PlaceholderLoading.animate True
attributes : List (Svg.Attribute msg) -> Config msg -> Config msg
SVG attributes to pass to the main svg
element. Default to []
PlaceholderLoading.config |> PlaceholderLoading.attributes []
backgroundColor : String -> Config msg -> Config msg
Color used as background of animation. Default to #f5f6f7
PlaceholderLoading.config |> PlaceholderLoading.backgroundColor "#f5f6f7"
backgroundOpacity : Basics.Float -> Config msg -> Config msg
Background opacity. Default to 1
PlaceholderLoading.config |> PlaceholderLoading.backgroundOpacity 1
baseUrl : String -> Config msg -> Config msg
Required if you use <base url="/" />
document <head />
. Used in clipPath
and fill
style. Default to ""
PlaceholderLoading.config |> PlaceholderLoading.baseUrl ""
foregroundColor : String -> Config msg -> Config msg
Color used as foreground of animation. Default to #eee
PlaceholderLoading.config |> PlaceholderLoading.foregroundColor "#eee"
foregroundOpacity : Basics.Float -> Config msg -> Config msg
Animation opacity. Default to 1
PlaceholderLoading.config |> PlaceholderLoading.foregroundOpacity 1
gradientRatio : Basics.Float -> Config msg -> Config msg
Width of the animated gradient as a raction of the view box width. Default to 2
PlaceholderLoading.config |> PlaceholderLoading.gradientRatio 2
interval : Basics.Float -> Config msg -> Config msg
Interval of time between runs of the animation, as a fraction of the animation speed. Default to 0.25
PlaceholderLoading.config |> PlaceholderLoading.interval 0.25
loaderAttributes : List (Html.Attribute msg) -> Config msg -> Config msg
Set the HTML attributes of the div
encapsulating the svg
element. Default to []
PlaceholderLoading.config |> PlaceholderLoading.loaderAttributes []
mainAttributes : List (Html.Attribute msg) -> Config msg -> Config msg
Set the HTML attributes of the main encapsulating div
. Default to []
PlaceholderLoading.config |> PlaceholderLoading.mainAttributes []
repeat : Basics.Int -> Config msg -> Config msg
The number of times the loader should be displayed. Default to 1
PlaceholderLoading.config |> PlaceholderLoading.repeat 1
rtl : Basics.Bool -> Config msg -> Config msg
Wether or not the loader should be displayed for right-to-left. Default to False
PlaceholderLoading.config |> PlaceholderLoading.rtl False
speed : Basics.Float -> Config msg -> Config msg
Animation speed in seconds. Default to 1.2
PlaceholderLoading.config |> PlaceholderLoading.speed 1.2
title : String -> Config msg -> Config msg
Ued to describe what element it is. Default to Nothing
PlaceholderLoading.config |> PlaceholderLoading.title "My title"
uniqueKey : String -> Config msg -> Config msg
Used to uniquely identify the loader. You must specify it if you display several loaders on the same page. Default to placeholder-loading-unique-key
PlaceholderLoading.config |> PlaceholderLoading.uniqueKey "placeholder-loading-unique-key"
customView : Config msg -> List (Svg msg) -> Html msg
Display a custom loader.
PlaceholderLoading.customView
(PlaceholderLoading.config
|> PlaceholderLoading.uniqueKey "custom"
|> PlaceholderLoading.addAttributes [ SvgAttr.viewBox "0 0 476 124" ]
)
[ Svg.rect [ SvgAttr.x "48", SvgAttr.y "8", SvgAttr.width "88", SvgAttr.height "6", SvgAttr.rx "3" ] []
, Svg.rect [ SvgAttr.x "48", SvgAttr.y "26", SvgAttr.width "52", SvgAttr.height "6", SvgAttr.rx "3" ] []
, Svg.rect [ SvgAttr.x "0", SvgAttr.y "56", SvgAttr.width "410", SvgAttr.height "6", SvgAttr.rx "3" ] []
, Svg.rect [ SvgAttr.x "0", SvgAttr.y "72", SvgAttr.width "380", SvgAttr.height "6", SvgAttr.rx "3" ] []
, Svg.rect [ SvgAttr.x "0", SvgAttr.y "88", SvgAttr.width "178", SvgAttr.height "6", SvgAttr.rx "3" ] []
, Svg.circle [ SvgAttr.cx "20", SvgAttr.cy "20", SvgAttr.r "20" ] []
]