https://github.com/cedricss/elm-progress-ring
Progress ring with elm/svg
https://github.com/cedricss/elm-progress-ring
Last synced: 10 months ago
JSON representation
Progress ring with elm/svg
- Host: GitHub
- URL: https://github.com/cedricss/elm-progress-ring
- Owner: cedricss
- License: mit
- Created: 2020-05-03T16:00:20.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2020-05-03T19:02:38.000Z (over 5 years ago)
- Last Synced: 2025-01-31T13:35:10.707Z (12 months ago)
- Language: Elm
- Size: 10.7 KB
- Stars: 1
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Progress ring with elm/svg
### Insert a static ring
Add a progress ring to an Html view:
```elm
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
```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
```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](https://cedricsoulas.com/elm))
## License
MIT