Express progress as Float between 0 and 1 instead of Int between 0 and 100

example/src/Data/Style/ElmUiFramework.elm

@@ -287,13 +287,13 @@ sortTable =
 progressIndicatorStyle : ProgressIndicatorStyle msg
 progressIndicatorStyle =
     { icon =
-        \maybeProgressPercent ->
-            case maybeProgressPercent of
+        \maybeProgress ->
+            case maybeProgress of
                 Nothing ->
                     Element.text "Indeterminate progress indicator"
 
-                Just progressPercent ->
-                    Element.text ("Determinate progress indicator, " ++ String.fromInt progressPercent ++ "% complete")
+                Just progress ->
+                    Element.text ("Determinate progress indicator, " ++ String.fromFloat progress ++ "completeness")
     }
 
 

example/src/Example/ProgressIndicator.elm

@@ -20,16 +20,16 @@ materialStyle =
 
 
 type Model
-    = MaybeProgressPercent (Maybe Int)
+    = MaybeProgress (Maybe Float)
 
 
 type Msg
-    = ChangedProgressPercent (Maybe Int)
+    = ChangedProgress (Maybe Float)
 
 
 init : ( Model, Cmd Msg )
 init =
-    ( MaybeProgressPercent Nothing
+    ( MaybeProgress Nothing
     , Cmd.none
     )
 
@@ -37,8 +37,8 @@ init =
 update : Msg -> Model -> ( Model, Cmd Msg )
 update msg _ =
     case msg of
-        ChangedProgressPercent maybeInt ->
-            ( MaybeProgressPercent maybeInt
+        ChangedProgress maybeFloat ->
+            ( MaybeProgress maybeFloat
             , Cmd.none
             )
 
@@ -51,9 +51,9 @@ subscriptions _ =
 {-| You can remove the msgMapper. But by doing so, make sure to also change `msg` to `Msg` in the line below.
 -}
 view : (Msg -> msg) -> Style style msg -> Model -> Element msg
-view msgMapper style (MaybeProgressPercent maybeProgressPercent) =
+view msgMapper style (MaybeProgress maybeProgress) =
     Widget.circularProgressIndicator style.progressIndicator
-        { maybeProgressPercent = maybeProgressPercent
+        { maybeProgress = maybeProgress
         }
 
 

example/src/View/Test.elm

@@ -517,16 +517,16 @@ progressIndicator : msg -> Style msg -> List ( String, Element msg )
 progressIndicator _ style =
     let
         determinateIndicators =
-            [ 0, 25, 50, 75, 100 ]
+            [ 0, 0.25, 0.50, 0.75, 1 ]
                 |> List.map
-                    (\percent ->
-                        ( "Determinate Progress Indicator, " ++ String.fromInt percent ++ "% complete"
-                        , Widget.circularProgressIndicator style.progressIndicator { maybeProgressPercent = Just percent }
+                    (\completeness ->
+                        ( "Determinate Progress Indicator, completeness " ++ String.fromFloat completeness
+                        , Widget.circularProgressIndicator style.progressIndicator { maybeProgress = Just completeness }
                         )
                     )
     in
     [ ( "Indeterminate Progress Indicator"
-      , Widget.circularProgressIndicator style.progressIndicator { maybeProgressPercent = Nothing }
+      , Widget.circularProgressIndicator style.progressIndicator { maybeProgress = Nothing }
       )
     ]
         ++ determinateIndicators

src/Internal/ProgressIndicator.elm

@@ -6,7 +6,7 @@ import Widget.Style exposing (ProgressIndicatorStyle)
 
 circularProgressIndicator :
     ProgressIndicatorStyle msg
-    -> { maybeProgressPercent : Maybe Int }
+    -> { maybeProgress : Maybe Float }
     -> Element msg
-circularProgressIndicator style { maybeProgressPercent } =
-    style.icon maybeProgressPercent
+circularProgressIndicator style { maybeProgress } =
+    style.icon maybeProgress

src/Widget.elm

@@ -636,19 +636,19 @@ tab =
 
 {-| Progress Indicator widget type
 
-If `maybeProgressPercent` is set to `Nothing`, an indeterminate progress indicator (e.g. spinner) will display.
-If `maybeProgressPercent` is set to `Just Int` (where the `Int` is completion percentage between 0 and 100 inclusive), a determinate progress indicator will visualize the completion percentage.
+If `maybeProgress` is set to `Nothing`, an indeterminate progress indicator (e.g. spinner) will display.
+If `maybeProgress` is set to `Just Float` (where the `Float` is proportion of completeness between 0 and 1 inclusive), a determinate progress indicator will visualize the progress.
 
 -}
 type alias ProgressIndicator =
-    { maybeProgressPercent : Maybe Int }
+    { maybeProgress : Maybe Float }
 
 
 {-| Displays a circular progress indicator
 -}
 circularProgressIndicator :
     ProgressIndicatorStyle msg
-    -> { maybeProgressPercent : Maybe Int }
+    -> { maybeProgress : Maybe Float }
     -> Element msg
 circularProgressIndicator =
     ProgressIndicator.circularProgressIndicator

src/Widget/Style.elm

@@ -136,5 +136,5 @@ type alias LayoutStyle msg =
 
 {-| -}
 type alias ProgressIndicatorStyle msg =
-    { icon : Maybe Int -> Element msg
+    { icon : Maybe Float -> Element msg
     }

src/Widget/Style/Material.elm

@@ -1272,17 +1272,18 @@ indeterminateCircularIcon color attribs =
         |> Element.el attribs
 
 
-determinateCircularIcon : Color.Color -> List (Attribute msg) -> Int -> Element msg
-determinateCircularIcon color attribs progressPercent =
+determinateCircularIcon : Color.Color -> List (Attribute msg) -> Float -> Element msg
+determinateCircularIcon color attribs progress =
     -- With help from https://css-tricks.com/building-progress-ring-quickly/
     let
         strokeDashoffset =
             let
-                clampedProgPrecent =
-                    clamp 0 100 progressPercent
+                clampedProgress =
+                    clamp 0 1 progress
             in
             -- 188 is circumference of circle in pixels
-            188 - (188 * clampedProgPrecent // 100)
+            188 - (188 * clampedProgress)
+                |> round
     in
     Svg.svg
         [ Svg.Attributes.height "48px"
@@ -1313,13 +1314,13 @@ determinateCircularIcon color attribs progressPercent =
 progressIndicator : Palette -> ProgressIndicatorStyle msg
 progressIndicator palette =
     { icon =
-        \maybeProgressPercent ->
-            case maybeProgressPercent of
+        \maybeProgress ->
+            case maybeProgress of
                 Nothing ->
                     indeterminateCircularIcon palette.primary []
 
-                Just progressPercent ->
-                    determinateCircularIcon palette.primary [] progressPercent
+                Just progress ->
+                    determinateCircularIcon palette.primary [] progress
     }