damienklinnert / elm-spinner / Spinner

A highly configurable, efficiently rendered spinner component.

Check the README for a general introduction into this module.

The Elm Architecture


type Model

Contains the current state for the spinner.


type Msg

Msg messages need to be passed through your application.

subscription : Platform.Sub.Sub Msg

Add this to your programs subscriptions to animate the spinner.

init : Model

Defines an initial value for the Model type.

update : Msg -> Model -> Model

Accepts Msg and Model and computes a new Model.

view : Config -> Model -> Html msg

The actual spinner component.

Custom Spinners


type Direction
    = Clockwise
    | Counterclockwise

A spinner can spin Clockwise or Counterclockwise.


type alias Config =
{ lines : Basics.Float
, length : Basics.Float
, width : Basics.Float
, radius : Basics.Float
, scale : Basics.Float
, corners : Basics.Float
, opacity : Basics.Float
, rotate : Basics.Float
, direction : Direction
, speed : Basics.Float
, trail : Basics.Float
, translateX : Basics.Float
, translateY : Basics.Float
, shadow : Basics.Bool
, hwaccel : Basics.Bool
, color : Basics.Float -> Color 
}

A type describing how your spinner looks like.

defaultConfig : Config

A default spinner for use in your application.