PlaceholderLoading

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 Config msg

Config type used to define loader configuration

Function to call to set a default configuration that you can then customize

FacebookLoader.view PlaceholderLoading.config

Customization

addAttributes : List (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 : Bool -> Config msg -> Config msg

Wether or not the loader should animate. Default to True

PlaceholderLoading.config |> PlaceholderLoading.animate True

attributes : List (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 : 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 : Float -> Config msg -> Config msg

Animation opacity. Default to 1

PlaceholderLoading.config |> PlaceholderLoading.foregroundOpacity 1

gradientRatio : 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 : 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 (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 (Attribute msg) -> Config msg -> Config msg

Set the HTML attributes of the main encapsulating div. Default to []

PlaceholderLoading.config |> PlaceholderLoading.mainAttributes []

repeat : Int -> Config msg -> Config msg

The number of times the loader should be displayed. Default to 1

PlaceholderLoading.config |> PlaceholderLoading.repeat 1

rtl : 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 : 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"

Custom loaders

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" ] []
    ]

calions-app/elm-placeholder-loading/1.0.2

PlaceholderLoading

Config

Customization

Custom loaders

Modules