BetterUi Components

Previews

No matching results.

x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<div class="p-8 space-y-8">
  <h3 class="text-lg font-semibold mb-6">FontAwesome Icon Animations</h3>
  <div class="space-y-6 text-2xl">
    <div class="flex items-center gap-4">
      <span class="w-32 text-sm font-medium text-gray-600">No animation</span>
      <i class="fa-solid fa-spinner" aria-hidden="true"></i>
      <i class="fa-solid fa-gear" aria-hidden="true"></i>
      <i class="fa-solid fa-circle-notch" aria-hidden="true"></i>
    </div>
    <div class="flex items-center gap-4">
      <span class="w-32 text-sm font-medium text-gray-600">Spin</span>
      <i class="fa-solid fa-spinner fa-spin" aria-hidden="true"></i>
      <i class="fa-solid fa-gear fa-spin" aria-hidden="true"></i>
      <i class="fa-solid fa-circle-notch fa-spin" aria-hidden="true"></i>
    </div>
    <div class="flex items-center gap-4">
      <span class="w-32 text-sm font-medium text-gray-600">Pulse</span>
      <i class="fa-solid fa-spinner fa-pulse" aria-hidden="true"></i>
      <i class="fa-solid fa-gear fa-pulse" aria-hidden="true"></i>
      <i class="fa-solid fa-circle-notch fa-pulse" aria-hidden="true"></i>
    </div>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<div class="p-8 space-y-8">
  <h3 class="text-lg font-semibold mb-6">FontAwesome Icon Animations</h3>
  <div class="space-y-6 text-2xl">
    <div class="flex items-center gap-4">
      <span class="w-32 text-sm font-medium text-gray-600">No animation</span>
      <%= render BetterUi::FaIconComponent.new(name: "spinner", style: :solid) %>
      <%= render BetterUi::FaIconComponent.new(name: "gear", style: :solid) %>
      <%= render BetterUi::FaIconComponent.new(name: "circle-notch", style: :solid) %>
    </div>
    <div class="flex items-center gap-4">
      <span class="w-32 text-sm font-medium text-gray-600">Spin</span>
      <%= render BetterUi::FaIconComponent.new(name: "spinner", style: :solid, spin: true) %>
      <%= render BetterUi::FaIconComponent.new(name: "gear", style: :solid, spin: true) %>
      <%= render BetterUi::FaIconComponent.new(name: "circle-notch", style: :solid, spin: true) %>
    </div>
    <div class="flex items-center gap-4">
      <span class="w-32 text-sm font-medium text-gray-600">Pulse</span>
      <%= render BetterUi::FaIconComponent.new(name: "spinner", style: :solid, pulse: true) %>
      <%= render BetterUi::FaIconComponent.new(name: "gear", style: :solid, pulse: true) %>
      <%= render BetterUi::FaIconComponent.new(name: "circle-notch", style: :solid, pulse: true) %>
    </div>
  </div>
</div>

No notes provided.

No params configured.