Skip to content

FabienHenon/elm-placeholder-loading

Repository files navigation

elm-placeholder-loading

Easily create placeholder loadings like Facebook's cards loading.

Facebook loader

elm install calions-app/elm-placeholder-loading

This package has been highly inspired from danilowoz react-content-loader package and is mainly a translation of the react package to Elm.

In this package you will be able to display placeholder loaders like Facebook's one. We have several presets:

All you need is to call the view function, no state to save in your model!

Getting started

You need to import the main module (PlaceholderLoading) and the preset you want:

import PlaceholderLoading as Loading
import PlaceholderLoading.Facebook as FacebookLoader

Then, simply call the view function of your preset and you're done!

FacebookLoader.view Loading.config

If you need to display several loaders in the same page you'll have to provide a unique key to your loaders, like this:

FacebookLoader.view (Loading.config |> Loading.uniqueKey "facebook-loader")

Customization

You can customize you loaders by changing the configuration of the loader when you cann the view function:

FacebookLoader.view 
    (Loading.config 
        |> Loading.uniqueKey "facebook-custom"
        |> Loading.backgroundColor "#00f"
        |> Loading.backgroundOpacity 0.5
        |> Loading.foregroundColor "#f00"
        |> Loading.foregroundOpacity 0.5
        |> Loading.gradientRatio 0.5
        |> Loading.interval 0.1
        |> Loading.rtl True
        |> Loading.speed 3
    )

This will display the Facebook's loader with different colors and animation speed and in Right To Left display

Repeated loaders

You can also repeat the loaders the number of times you want by simply add the configuration repeat:

ListLoader.view
    (Loading.config
        |> Loading.uniqueKey "list-repeated"
        |> Loading.repeat 3
        |> Loading.loaderAttributes [ HtmlAttr.style "margin-bottom" "1rem" ]
    )

Repeated list loader

This will display the list loader 3 times. This way you can simulate a longer content to come

Custom loader

You can also create your own loaders. All you need is to provide the SVG code of your loader:

loader : Svg.Svg msg
loader =
    let
        cellWidth =
            90

        cellHeight =
            12

        xSpacing =
            10

        ySpacing =
            5

        rowsCount =
            5

        colsCount =
            3
    in
    Loading.customView
        (Loading.config
            |> Loading.uniqueKey "custom"
            |> Loading.addAttributes [ SvgAttr.viewBox ("0 0 " ++ String.fromInt (colsCount * cellWidth + (colsCount - 1) * xSpacing) ++ " " ++ String.fromInt (rowsCount * cellHeight + (rowsCount - 1) * ySpacing)) ]
        )
        (List.range 0 (rowsCount - 1)
            |> List.concatMap
                (\row ->
                    List.range 0 (colsCount - 1)
                        |> List.map
                            (\col ->
                                Svg.rect
                                    [ SvgAttr.x (String.fromInt (col * (cellWidth + xSpacing)))
                                    , SvgAttr.y (String.fromInt (row * (cellHeight + ySpacing)))
                                    , SvgAttr.width (String.fromInt cellWidth)
                                    , SvgAttr.height (String.fromInt cellHeight)
                                    , SvgAttr.rx "1"
                                    ]
                                    []
                            )
                )
        )

This will show the following loader:

Custom loader

Presets

Facebook

Facebook loader

Instagram

Instagram loader

Bullet list

Bullet list loader

List

List loader

Code

Code loader

Examples

Go to the examples folder and run:

elm reactor

to run examples