The Spinner component in Svelte

Key takeaways:

• Spinner components provide crucial loading indicators, improving user experience by reducing frustration during wait times.

• Svelte simplifies the process of integrating Spinner components into applications.

• The Spinner supports various customizations, including color, size, and alignment adjustments.

• It can be used within buttons to enhance feedback during user actions, such as form submissions.

• The Spinner component helps keep users informed and engaged during loading states.

Providing visual cues during loading or processing states is crucial for enhancing user experience in web applications. The Spinner component in Svelte serves as a dynamic loading indicator, signaling users that a task is in progress. This component not only improves interactivity but also reduces user frustration during tasks that require waiting. With Svelte’s simplicity and flexibility, integrating a Spinner component into our application is straightforward.

Setting up the Spinner component

To use the Spinner component in our Svelte application, we’ll need to install the necessary dependencies. If we’re using flowbite-svelte, we can install it via npm:

Once installed, we can import the Spinner component into our project. Here’s how to do it step by step:

A step-by-step guide to import the Spinner component

1. Open the Svelte project and navigate to the src/App.svelte file.

2. Import the Spinner component at the top of the file:

3. Add the Spinner component to the HTML markup. For a default Spinner, we can simply include it without any props:

Customizing the Spinner component

The Spinner component supports various customizations to fit our design needs. Below are some customization options:

Default Spinner

For the default Spinner, we can include the Spinner component without any props:

Colors

To change the color of the Spinner, we can use the color prop. For example:

Sizes

To adjust the size of the Spinner, utilize the size prop:

Alignment

To change the alignment of the Spinner, we can apply the text-{left|center|right} utility classes, as the Spinner is an inline HTML element. For example:

Using Spinner inside buttons

The Spinner component can also be embedded inside elements such as buttons, enhancing user feedback during actions like form submissions:

Try it yourself!

Now that we know how to set up and customize the Spinner component, apply what we have learned. Edit the Spinner component in the src/App.svelte file and click on the login button to see your changes in action. Remember to include id="spinner" with your Spinner component to track it easily.

Explanation

• Lines 2–3: Import two components from the flowbite-svelte library:

  • Button: A button component

  • Spinner: A loading indicator component

• Lines 5–7: This function is defined to handle the button click event. When invoked, it:

  • Uses document.getElementById("spinner") to get the Spinner element from the DOM.

  • Changes the Spinner’s display style to "inline", making it visible when the button is clicked.

• Lines 10–22: The main container contains the main content of the login interface:

  • Title: An <h1> element that displays “Login.”

  • Login inputs: A <div> element with a class of login-inputs that contains:

    • Two labeled input fields for email and password.

      • <label> elements associate with their respective input fields.

      • <input> elements are of types email and password, allowing users to enter their credentials.

  • Button: The Button component is rendered with an on:click event that triggers the spin function when clicked. The button displays the text “Login.”

  • Spinner: The Spinner component is included with the id attribute set to “spinner,” which will be shown when the login button is clicked.

• Lines 24–45: The main element is styled to:

  • Line 26: Center-align the text.

  • Line 27: Add padding around the element.

  • Lines 28–29: Set a maximum width of 240 pixels, and center it horizontally with margin: 0 auto.

  • Lines 32–33: The <h1> element is styled to use a bright orange color (#ff3e00).

  • Line 34: Convert the text to uppercase.

  • Lines 35–36: Set the font size to 4em and the font weight to 100 (lightweight).

  • Lines 39–43: The media query allows the main container to expand to full width when the viewport width exceeds 640 pixels, removing the max-width constraint.

Overall, this code sets up a simple login interface with input fields for the user’s email and password. When the user clicks the “Login” button, the spin function is called, which makes the Spinner visible, indicating that the application is processing the login action. The layout is styled to be centered and visually appealing, with responsive behavior for larger screens.

Conclusion

The Spinner component in Svelte is a powerful and easy-to-use loading indicator that can enhance the user experience in web applications. By providing visual feedback during loading states, we can keep users informed and engaged. With customizable features, integrating and styling the Spinner component is simple, allowing us to create an interactive interface that meets our design requirements.