damienklinnert/elm-spinner/3.0.2

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.

Add this to your programs subscriptions to animate the spinner.

Defines an initial value for the Model type.

Accepts Msg and Model and computes a new Model.

view : Config -> Model -> Html msg

The actual spinner component.

Custom Spinners

= 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
, color : Float -> Color
}

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)
  • color: determines the color for each line based on an index parameter (default is always Color.white)
defaultConfig : Config

A default spinner for use in your application.