elm-loading
elm-loading
provides beautiful loaders animated in elm-css for your elm application. ✌
Install
elm install perzanko/elm-loading
How to use
Loading.render
takes 3 arguments: LoaderType
, Config
, LoadingState
.
The loaders will be rendered according on the LoadingState. If you pass Loading.On
loader will be displayed, if Loading.Off
loader will be hidden (will not be hidden by css, only node will be removed).
import Loading
exposing
( LoaderType(..)
, defaultConfig
, render
)
...
view : Model -> Html Msg
view model =
div [ ]
[ Loading.render
DoubleBounce -- LoaderType
{ defaultConfig | color = "#333" } -- Config
Loading.On -- LoadingState
]
Available loaders
You can choose one of these loaders below.
type LoaderType
= DoubleBounce
| Spinner
| BouncingBalls
| Bars
| Circle
| Sonar
Configure
Loaders could be easliy configured. Only you should do is to extend the Loading.defaultConfig
when calling Loading.render
{ defaultConfig | color = "#333" }
Config model
type alias Config =
{ size : Float
, color : String
, className : String
, speed : Float
}
The default config:
defaultConfig : Config
defaultConfig =
{ size = 30
, color = "#74b4c9"
, className = ""
, speed = 1
}
css spinner, css loading, css animation loading