Packages
moon
2.86.0
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/components/loader.ex
defmodule Moon.Components.Loader do
@moduledoc false
use Moon.StatelessComponent
prop(size, :string, values: ["twoxsmall", "xsmall", "medium", "large"], default: "medium")
prop(color, :string, default: "hit", values: Moon.colors())
def render(assigns) do
~F"""
<div class={
"relative",
get_size_class_by_size(@size)
}>
<div class={
"box-border block absolute w-full h-full border-solid border-#{@color} rounded-[50%]",
"border-t-#{@color} border-r-transparent border-b-transparent border-l-transparent",
"animate-loader",
get_border_class_by_size(@size)
} />
<div class={
"box-border block absolute w-full h-full border-solid border-#{@color} rounded-[50%]",
"border-t-#{@color} border-r-transparent border-b-transparent border-l-transparent",
"animate-loader animation-delay-minus-45",
get_border_class_by_size(@size)
} />
<div class={
"box-border block absolute w-full h-full border-solid border-#{@color} rounded-[50%]",
"border-t-#{@color} border-r-transparent border-b-transparent border-l-transparent",
"animate-loader animation-delay-minus-30",
get_border_class_by_size(@size)
} />
<div class={
"box-border block absolute w-full h-full border-solid border-#{@color} rounded-[50%]",
"border-t-#{@color} border-r-transparent border-b-transparent border-l-transparent",
"animate-loader animation-delay-minus-15",
get_border_class_by_size(@size)
} />
</div>
"""
end
# TODO
# Replace the old size strings
# credo:disable-for-lines:14
defp get_size_class_by_size(size) do
case size do
"twoxsmall" -> "w-4 h-4"
"xsmall" -> "w-6 h-6"
"small" -> "w-8 h-8"
"medium" -> "w-10 h-10"
"large" -> "w-12 h-12"
"xs" -> "w-4 h-4"
"sm" -> "w-6 h-6"
"md" -> "w-8 h-8"
"lg" -> "w-10 h-10"
"xl" -> "w-12 h-12"
end
end
# TODO
# Replace the old size strings
# credo:disable-for-lines:14
defp get_border_class_by_size(size) do
case size do
"twoxsmall" -> "border-2"
"xsmall" -> "border-2"
"small" -> "border-2"
"medium" -> "border-4"
"large" -> "border-4"
"xs" -> "border-2"
"sm" -> "border-2"
"md" -> "border-4"
"lg" -> "border-4"
"xl" -> "border-4"
end
end
end