Progress ring with elm/svg

Insert a static ring

Add a progress ring to an Html view:

import Progress.Ring

ringView : Html msg
ringView =
    Progress.Ring.view
        { color = "#6c45bc"
        , progress = 0.75
        , stroke = 8
        , radius = 30
        }

Here is the result:

Integrate with elm-css

If you are working with elm-css, convert it to styled html with Html.Styled.fromUnstyled.

Animate with plain css

Use Progress.Ring.circumference config to retrieve the circumference of the ring at 100% progress. Use it at an initial offset:

Main.elm

ringView : Html msg
ringView =
    let
        progressRingConfig =
            { color = "#6c45bc"
            , progress = 0
            , stroke = 8
            , radius = 30
            }

        ringCircumference =
            Progress.Ring.circumference progressRingConfig
    in
    div
        [ attribute
            "style"
            ("--ring-circumference: " ++ String.fromFloat ringCircumference)
        ]
        [ Progress.Ring.view progressRingConfig ]

style.css

@keyframes ringProgress {
  from {
    stroke-dashoffset: var(--ring-circumference);
  }
  to {
    stroke-dashoffset: 0;
  }
}

svg circle {
  animation: ringProgress linear 4s;
}

Animate with elm-css

TODO

Animate with Elm Animator

TODO

Author

Cédric Soulas (cedricsoulas.com/elm)

License

MIT

cedricss/elm-progress-ring