From the Material Design Lite documentation:
The Material Design Lite (MDL) spinner component is an enhanced replacement for the classic "wait cursor" (which varies significantly among hardware and software versions) and indicates that there is an ongoing process, the results of which are not yet available. A spinner consists of an open circle that changes colors as it animates in a clockwise direction, and clearly communicates that a process has been started but not completed.
A spinner performs no action itself, either by its display nor when the user clicks or touches it, and does not indicate a process's specific progress or degree of completion. The MDL spinner component provides various types of spinners, and allows you to add display effects.
Spinners are a fairly new feature of most user interfaces, and provide users with a consistent visual cue about ongoing activity, regardless of hardware device, operating system, or browser environment. Their design and use is an important factor in the overall user experience.
Refer to this site for a live demo.
A spinner is a loading indicator that by default changes color and is invisible. Example use:
spinner [ active True ] []
Make a spinner visible
Make a spinner a single color (the active color) of the stylesheet.
A spinner's property.
Spinner config
Spinner default config is not active
, not singleColor
.
module Material.Spinner
exposing
( spinner
, active
, singleColor
, Property
, Config
, defaultConfig
)
{-| From the [Material Design Lite documentation](http://www.getmdl.io/components/#loading-section/spinner):
> The Material Design Lite (MDL) spinner component is an enhanced replacement
> for the classic "wait cursor" (which varies significantly among hardware and
> software versions) and indicates that there is an ongoing process, the
> results of which are not yet available. A spinner consists of an open circle
> that changes colors as it animates in a clockwise direction, and clearly
> communicates that a process has been started but not completed.
> A spinner performs no action itself, either by its display nor when the user
> clicks or touches it, and does not indicate a process's specific progress or
> degree of completion. The MDL spinner component provides various types of
> spinners, and allows you to add display effects.
> Spinners are a fairly new feature of most user interfaces, and provide users
> with a consistent visual cue about ongoing activity, regardless of hardware
> device, operating system, or browser environment. Their design and use is an
> important factor in the overall user experience.
Refer to
[this site](https://debois.github.io/elm-mdl/#loading)
for a live demo.
@docs spinner, active, singleColor
@docs Property, Config, defaultConfig
-}
import Html exposing (Html, Attribute)
import Material.Options as Options exposing (cs, css, nop, when)
import Material.Options.Internal as Internal
{-| A spinner is a loading indicator that by default changes color and is
invisible. Example use:
spinner [ active True ] []
-}
spinner : List (Property m) -> Html m
spinner options =
let
({ config } as summary) =
Internal.collect defaultConfig options
in
Internal.apply summary
Html.div
[ cs "mdl-spinner mdl-js-spinner is-upgraded"
, cs "is-active" |> when config.active
, cs "mdl-spinner--single-color" |> when config.singleColor
]
[]
layers
{-| Make a spinner visible
-}
active : Bool -> Property m
active =
(\value config -> { config | active = value })
>> Internal.option
{-| Make a spinner a single color (the active color) of the stylesheet.
-}
singleColor : Bool -> Property m
singleColor =
(\value config -> { config | singleColor = value })
>> Internal.option
-- MODEL
{-| Spinner config
-}
type alias Config =
{ active : Bool
, singleColor : Bool
}
{-| Spinner default config is not `active`, not `singleColor`.
-}
defaultConfig : Config
defaultConfig =
{ active = False
, singleColor = False
}
{-| A spinner's property.
-}
type alias Property m =
Options.Property Config m
-- HELPER
layer : Int -> Html m
layer n =
Options.div
[ cs <| "mdl-spinner__layer mdl-spinner__layer-" ++ toString n
]
([ Options.div [ cs "mdl-spinner__circle-clipper mdl-spinner__left" ]
, Options.div [ cs "mdl-spinner__gap-patch" ]
, Options.div [ cs "mdl-spinner__circle-clipper mdl-spinner__right" ]
]
|> List.map ((|>) [ Options.div [ cs "mdl-spinner__circle" ] [] ])
)
layers : List (Html m)
layers =
List.map layer (List.range 1 4)