Class: UI::Spinner

Inherits:
Phlex::HTML
  • Object
show all
Includes:
SpinnerBehavior
Defined in:
app/components/ui/spinner.rb

Overview

Spinner - Phlex implementation

A loading indicator component using an animated spinner icon. Uses SpinnerBehavior concern for shared styling logic.

Examples:

Basic usage

render UI::Spinner.new

With size

render UI::Spinner.new(size: "lg")

Instance Method Summary collapse

Methods included from SpinnerBehavior

#spinner_classes, #spinner_html_attributes

Constructor Details

#initialize(size: "default", classes: "", **attributes) ⇒ Spinner

Returns a new instance of Spinner.

Parameters:

  • size (String) (defaults to: "default") —

    Size variant (sm, default, lg, xl)

  • classes (String) (defaults to: "") —

    Additional CSS classes to merge

  • attributes (Hash) —

    Additional HTML attributes



19
20
21
22
23
 
# File 'app/components/ui/spinner.rb', line 19

def initialize(size: "default", classes: "", **attributes)
  @size = size
  @classes = classes
  @attributes = attributes
end

Instance Method Details

#view_template ⇒ Object 



25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
 
# File 'app/components/ui/spinner.rb', line 25

def view_template
  svg(
    **.merge(@attributes),
    xmlns: "http://www.w3.org/2000/svg",
    width: "24",
    height: "24",
    viewBox: "0 0 24 24",
    fill: "none",
    stroke: "currentColor",
    stroke_width: "2",
    stroke_linecap: "round",
    stroke_linejoin: "round"
  ) do |s|
    s.path(d: "M21 12a9 9 0 1 1-6.219-8.56")
  end
end