Config type used to define loader configuration

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

FacebookLoader.view PlaceholderLoading.config

Add attributes to the svg element, like a viewBox for custom loaders.

PlaceholderLoading.config |> PlaceholderLoading.addAttributes [ viewBox "0 0 100 60" ]

Wether or not the loader should animate. Default to True

PlaceholderLoading.config |> PlaceholderLoading.animate True

SVG attributes to pass to the main svg element. Default to []

PlaceholderLoading.config |> PlaceholderLoading.attributes []

Color used as background of animation. Default to #f5f6f7

PlaceholderLoading.config |> PlaceholderLoading.backgroundColor "#f5f6f7"

Background opacity. Default to 1

PlaceholderLoading.config |> PlaceholderLoading.backgroundOpacity 1

Required if you use <base url="/" /> document <head />. Used in clipPath and fill style. Default to ""

PlaceholderLoading.config |> PlaceholderLoading.baseUrl ""

Color used as foreground of animation. Default to #eee

PlaceholderLoading.config |> PlaceholderLoading.foregroundColor "#eee"

Animation opacity. Default to 1

PlaceholderLoading.config |> PlaceholderLoading.foregroundOpacity 1

Width of the animated gradient as a raction of the view box width. Default to 2

PlaceholderLoading.config |> PlaceholderLoading.gradientRatio 2

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

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

PlaceholderLoading.config |> PlaceholderLoading.loaderAttributes []

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

PlaceholderLoading.config |> PlaceholderLoading.mainAttributes []

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

PlaceholderLoading.config |> PlaceholderLoading.repeat 1

Wether or not the loader should be displayed for right-to-left. Default to False

PlaceholderLoading.config |> PlaceholderLoading.rtl False

Animation speed in seconds. Default to 1.2

PlaceholderLoading.config |> PlaceholderLoading.speed 1.2

Ued to describe what element it is. Default to Nothing

PlaceholderLoading.config |> PlaceholderLoading.title "My title"

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"

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