This is an alternative site for discovering Elm packages. You may be looking for the official Elm package site instead.

Material.Spinner

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.

spinner : List (Property m) -> Html m

A spinner is a loading indicator that by default changes color and is invisible. Example use:

spinner [ active True ] []
active : Bool -> Property m

Make a spinner visible

singleColor : Bool -> Property m

Make a spinner a single color (the active color) of the stylesheet.

type alias Property m = Options.Property Config m

A spinner's property.

type alias Config = { active : Bool , singleColor : Bool }

Spinner config

defaultConfig : 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)