Packages
moon
2.80.1
2.90.5
retired
2.90.4
2.90.3
2.90.2
2.90.1
2.90.0
2.89.4
2.89.1
2.89.0
2.88.0
2.87.11
2.87.10
2.87.9
2.87.8
2.87.7
2.87.6
2.87.5
2.87.4
2.87.3
2.87.2
2.87.1
2.87.0
2.86.1
2.86.0
2.85.1
2.85.0
2.84.0
2.83.0
2.82.0
2.81.4
2.81.3
2.81.2
2.81.1
2.81.0
2.80.2
2.80.1
2.80.0
2.79.13
2.79.12
2.79.11
2.79.10
2.79.9
2.79.8
2.79.7
2.79.6
2.79.5
2.79.4
2.79.3
2.79.2
2.79.1
2.79.0
2.78.4
2.78.3
2.78.2
2.78.1
2.78.0
2.77.0
2.76.5
2.76.4
2.76.3
2.76.2
2.76.1
2.76.0
2.75.0
2.74.1
2.74.0
2.73.8
2.73.7
2.73.6
2.73.5
2.73.4
2.73.3
2.73.2
2.73.1
2.73.0
2.72.5
2.72.4
2.72.3
2.72.2
2.72.1
2.72.0
2.71.1
2.71.0
2.70.0
2.69.2
2.69.1
2.69.0
2.68.11
2.68.10
Components-based design system written in elixir
Current section
Files
Jump to
Current section
Files
lib/moon/design/circular_progress.ex
defmodule Moon.Design.CircularProgress do
@moduledoc false
use Moon.StatelessComponent
prop(bg_color, :css_class, default: "stroke-trunks/[.24]")
prop(progress_color, :css_class, default: "stroke-piccolo")
prop(size, :string, values: ["2xs", "xs", "sm", "md", "lg"], default: "md")
prop(value, :decimal, default: 0)
prop(class, :css_class)
prop(testid, :string)
prop(id, :string)
def render(assigns) do
~F"""
<svg
{=@id}
style={get_style(width: "1em", height: "1em", vertical_align: "middle")}
viewBox={"0 0 #{viewbox_width()} #{viewbox_height()}"}
font-size={get_circular_size(@size)}
aria-valuemin={0}
aria-valuemax={100}
aria-valuenow={@value}
data-testid={@testid}
{=@class}
role="progressbar"
>
<path style={get_style(fill_opacity: 0)} class={"stroke-[0.5rem] #{@bg_color}"} d={get_d()} />
<path
style={get_style(
fill_opacity: 0,
stroke_linecap: "round",
"stroke-dashoffset": "#{gaplength(@value)}px",
"stroke-dasharray": "#{circumference()}px #{circumference()}px"
)}
class={"stroke-[0.5rem] rtl:-scale-x-100 rtl:translate-x-full #{@progress_color} "}
d={get_d()}
/>
</svg>
"""
end
def get_circular_size(size) do
case size do
"2xs" -> "1rem"
"xs" -> "1.5rem"
"sm" -> "2rem"
"md" -> "2.5rem"
"lg" -> "3rem"
end
end
defp get_d() do
"""
M #{viewbox_center_x()},#{viewbox_center_y()}
m 0,-#{path_radius()}
a #{path_radius()},#{path_radius()} 0 1 1 0,#{2 * path_radius()}
a #{path_radius()},#{path_radius()} 0 1 1 0,-#{2 * path_radius()}
"""
end
defp viewbox_width(), do: 100
defp viewbox_height(), do: 100
defp viewbox_center_x(), do: 50
defp viewbox_center_y(), do: 50
defp path_radius(), do: (viewbox_height() - 8) / 2
defp circumference(), do: pi() * 2 * path_radius()
defp gaplength(value), do: (100 - value) * circumference() / 100
defp pi(), do: 3.14159
end