elm-placeholder-loading
Easily create placeholder loadings like Facebook's cards loading.
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 FacebookLoaderThen, simply call the view function of your preset and you're done!
FacebookLoader.view Loading.configIf 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" ]
)
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:
Presets
Bullet list
List
Code
Examples
Go to the examples folder and run:
elm reactor
to run examples
