Packages
phoenix_duskmoon
4.2.0
9.9.2
9.9.1
9.9.0
9.8.0
9.7.1
9.7.0
9.6.4
9.6.3
9.6.2
9.6.1
9.6.0
9.5.4
9.5.3
9.5.2
9.5.1
9.5.0
9.4.3
9.4.2
9.4.1
9.4.0
9.3.0
9.2.0
9.1.4
9.1.3
9.1.1
9.1.1-rc.1
retired
9.0.1
9.0.0-rc.3
9.0.0-rc.2
9.0.0-rc.1
8.0.0
7.2.1
7.2.0
7.1.3
7.1.2
7.1.1
6.3.2
6.3.1
6.3.0
6.2.0
6.1.3
6.1.2
6.1.1
6.1.0
6.0.10
6.0.9
6.0.8
6.0.7
6.0.6
6.0.5
6.0.4
6.0.3
6.0.2
6.0.1
6.0.0
5.2.0-beta.5
5.2.0-beta.4
5.2.0-beta.3
5.2.0-beta.2
5.2.0-beta.1
5.1.0
5.0.6
5.0.5
5.0.4
5.0.3
5.0.2
5.0.1
5.0.0
4.6.6
4.6.5
4.6.4
4.6.3
4.6.2
4.6.1
4.6.0
4.5.2
4.5.1
4.5.0
4.4.4
4.4.3
4.4.2
4.4.1
4.4.0
4.3.2
4.3.1
4.3.0
4.2.0
4.1.1
4.1.0
4.0.0
Duskmoon UI component library for Phoenix LiveView
Current section
Files
Jump to
Current section
Files
lib/phoenix_duskmoon/loading.ex
defmodule PhoenixDuskmoon.Loading do
@moduledoc """
Render table.
"""
use PhoenixDuskmoon, :html
@doc """
Generates Loading.
## Examples
```heex
<.dm_loading_ex size={44} item_count={99} speed={"2s"} />
```
"""
@doc type: :component
attr(:id, :any,
default: false,
doc: """
html attribute id
"""
)
attr(:class, :any,
default: "",
doc: """
html attribute class
"""
)
attr(:item_count, :integer,
default: 88,
doc: """
html attribute class
"""
)
attr(:speed, :string,
default: "4s",
doc: """
html attribute class
"""
)
attr(:size, :integer,
default: 21,
doc: """
html attribute class
"""
)
def dm_loading_ex(assigns) do
assigns = assigns |> assign(:random_inner, Enum.random(10_000..100_000))
~H"""
<style data-id={@random_inner}>
.loader-<%= @random_inner %> {
--duration: <%= @speed %>;
--size: <%= @size %>em;
position: relative;
width: var(--size, 21em);
height: var(--size, 21em);
animation: loaderSpin-<%= @random_inner %> calc(var(--duration) * 4) infinite linear;
}
@keyframes loaderSpin-<%= @random_inner %> {
to { transform: rotate(360deg); }
}
.loader-<%= @random_inner %> i {
position: absolute;
filter: blur(0.2em) contrast(2);
left: calc(var(--size, 21em) / 2.1);
top: calc(var(--size, 21em) / 2.1);
width: calc(var(--size, 21em) / 21);
height: calc(var(--size, 21em) / 21);
background-color: hsl(var(--hue, 0), 75%, 75%);
border-radius: 50%;
transform: rotateZ(var(--rz, 0)) translateY(calc(var(--size, 21em) / 2.1 / 2));
animation: item-move-<%= @random_inner %> var(--duration) var(--delay, 0s) infinite ease-in-out;
}
@keyframes item-move-<%= @random_inner %> {
0% { transform: rotateZ(var(--rz, 0)) translateY(calc(var(--size, 21em) / 21 * 4)) translate(0, 0) scale(0); }
2% { transform: rotateZ(var(--rz, 0)) translateY(calc(var(--size, 21em) / 21 * 4)) translate(0, 0) scale(1.25); }
20% { transform: rotateZ(var(--rz, 0)) translateY(calc(var(--size, 21em) / 21 * 4)) translate(0, 0) scale(1.25); }
90%, 100% { transform: rotateZ(var(--rz, 0)) translateY(calc(var(--size, 21em) / 21 * 4)) translate(var(--tx, 0), var(--ty, 0)) scale(0); }
}
<%= for i <- 0..(@item_count - 1) do %>
.loader-<%= @random_inner %> i:nth-child(<%= i + 1 %>) {
--rz: <%= i * (360 / @item_count) %>deg;
--delay: calc(var(--duration) / <%= @item_count %> * <%= i %> - var(--duration));
--tx: <%= Enum.random(1..ceil(1000 * @size / 21)) / 250 %>em;
--ty: <%= Enum.random(1..ceil(1000 * @size / 21)) / 125 - 2.5 %>em;
--hue: <%= i * (360 / @item_count) %>;
}
<% end %>
</style>
<div id={@id} class={["loader-#{@random_inner}", @class]}>
<i :for={_ <- 1..@item_count} />
</div>
"""
end
end