import Css
import Html.Styled as Html exposing (Html)
import Html.Styled.Attributes as Html
progressBar : Int -> Html msg
progressBar percentage =
Html.div
[ Html.css
[ Css.position Css.relative ]
]
[ Html.div
[ Html.css
[ Css.displayFlex
, Css.alignItems Css.center
, Css.justifyContent Css.center
, Css.border3 (Css.px 12) Css.solid (Css.hex "efefef")
, Css.borderRadius <| Css.px 9999
, Css.height <| Css.px 128
, Css.width <| Css.px 128
]
]
[ Html.text <| String.fromInt percentage ++ "%" ]
, Html.div
[ Html.classList [ ( "progress-bar__inner--ge-50", percentage >= 50 ) ]
, Html.css
[ Css.position Css.absolute
, Css.top Css.zero
, Css.left Css.zero
, Css.height <| Css.pct 100
, Css.width <| Css.pct 100
, Css.property "clip" "rect(0px, 128px, 128px, 64px)"
, Css.Global.withClass "progress-bar__inner--ge-50"
[ Css.property "clip" "rect(auto, auto, auto, auto)" ]
]
]
[ Html.div
[ Html.css
[ Css.position Css.absolute
, Css.height <| Css.pct 100
, Css.width <| Css.pct 100
, Css.border3 (Css.px 12) Css.solid (Css.hex "8fbcbb")
, Css.borderRadius <| Css.px 9999
, Css.property "clip" "rect(0px, 64px, 128px, 0px)"
]
, Html.style "transform" <| "rotate(" ++ String.fromInt (percentage * 360 // 100) ++ "deg)"
]
[]
, Html.div
[ Html.classList [ ( "progress-bar__inner__2--ge-50", percentage >= 50 ) ]
, Html.css
[ Css.position Css.absolute
, Css.height <| Css.pct 100
, Css.width <| Css.pct 100
, Css.border3 (Css.px 12) Css.solid ( Css.hex "8fbcbb" )
, Css.borderRadius <| Css.px 9999
, Css.property "clip" "rect(0px, 64px, 128px, 0px)"
, Css.transform <| Css.rotate <| Css.deg 0
, Css.Global.withClass "progress-bar__inner__2--ge-50"
[ Css.transform <| Css.rotate <| Css.deg 180 ]
]
]
[]
]
]