Spinner

A highly configurable, efficiently rendered spinner component.

The Elm Architecture

Contains the current state for the spinner.

type Msg

Msg messages need to be passed through your application.

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.

= Clockwise

| Counterclockwise

A spinner can spin Clockwise or Counterclockwise.

type alias Config =

{ lines : Float

, length : Float

, width : Float

, radius : Float

, scale : Float

, corners : Float

, opacity : Float

, rotate : Float

, direction : Direction

, speed : Float

, trail : Float

, translateX : Float

, translateY : Float

, shadow : Bool

, hwaccel : Bool

}

A type describing how your spinner looks like.

lines: Number of lines (a value from 5 to 17, default is 13)
length: line length (a value from 0 to 56, default is 28)
width: line width (a value from 2 to 52, default is 14)
radius: distance from origin to beginning of lines (a value from 0 to 84, default is 42)
scale: scale for the whole spinner (a value from 0 to 5, default is 1)
corners: roundness of corners (a value from 0 to 1, default is 1)
opacity: minimum opacity of inactive lines (a value from 0 to 1, default is 0.25)
rotate: rotate the spinner by some degrees (a value from 0 to 90, default is 0)
direction: spinner direction (default is Clockwise)
speed: (a value from 0.5 (slowest), 2.2 (fastest), default is 1)
trail: how long is the trail after the active line (a value from 10 to 100, default is 60)
translateX: moves the spinner horizontally (a value from 0 to 100, default is 50)
translateY: moves the spinner vertically (a value from 0 to 100, default is 50)
shadow: adds a box shadow (default is True)
hwaccel: enables hardware acceleration for lines (default is False)

A default spinner for use in your application.