SpinnerComponent
This Ruby class `SpinnerComponent` inherits from `ApplicationComponent`. It defines a `template` method that creates a `div` element with specific CSS classes to ensure it is flexibly centered, with a height and width of 16 units. Inside this `div`, it creates another `div` representing a spinner. The inner `div` has CSS classes for a size of 16 units by 16 units, rounded borders, and specific border styles for animation. The CSS comments indicate the styles and animation required for the spinner: a border color of transparent except for the top border, which will inherit the current color; and a continuous spinning animation using a keyframes rule to rotate the spinner from 0 to 360 degrees. The purpose of the class is to render a loading spinner animation in the UI.
# frozen_string_literal: true
class SpinnerComponent < ApplicationComponent
def template
div(class: "flex items-center justify-center w-16 h-16") do
div(class: "spinner w-16 h-16 rounded-full border-4 border-t-4 border-gray-200 animate-spin")
end
end
end
# Additionally, you will need the corresponding CSS for the spinner animation:
# .spinner {
# border-color: transparent;
# border-top-color: currentColor;
# border-radius: 50%;
# animation: spin 1s linear infinite;
# }
#
# @keyframes spin {
# 0% { transform: rotate(0deg); }
# 100% { transform: rotate(360deg); }
# }