Packages
moon
2.88.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/design/loader.ex
defmodule Moon.Design.Loader do
@moduledoc false
use Moon.StatelessComponent
import Moon.Helpers.MergeClass
prop(size, :string, values: ["2xs", "xs", "md", "lg"], default: "md")
prop(color, :string, default: "hit", values: Moon.colors())
prop(class, :css_class)
prop(testid, :string)
prop(id, :string)
def render(assigns) do
~F"""
<div
{=@id}
class={
"relative",
get_size_class_by_size(@size)
}
data-testid={@testid}
>
<div class={
merge([
"box-border block absolute w-full h-full border-solid rounded-[50%]",
"border-t-#{@color} border-r-transparent border-b-transparent border-l-transparent",
"animate-loader",
get_border_class_by_size(@size),
@class
]),
"border-#{@color}"
} />
<div class={
merge([
"box-border block absolute w-full h-full border-solid 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),
@class
]),
"border-#{@color}"
} />
<div class={
merge([
"box-border block absolute w-full h-full border-solid 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),
@class
]),
"border-#{@color}"
} />
<div class={
merge([
"box-border block absolute w-full h-full border-solid 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),
@class
]),
"border-#{@color}"
} />
</div>
"""
end
defp get_size_class_by_size(size) do
case size do
"2xs" -> "w-4 h-4"
"xs" -> "w-6 h-6"
"sm" -> "w-8 h-8"
"md" -> "w-10 h-10"
"lg" -> "w-12 h-12"
end
end
defp get_border_class_by_size(size) do
case size do
"2xs" -> "border-2"
"xs" -> "border-2"
"sm" -> "border-4"
"md" -> "border-4"
"lg" -> "border-4"
end
end
end