Svelte Spinner

In web development, user experience remains at the forefront of innovation. One key element contributing to a seamless and engaging user interface is the loading spinner. We'll explore Svelte Spinner, a lightweight and powerful tool that not only enhances user experience but also simplifies the developer's journey.

Why do we need a spinner?

Loading times can be a source of frustration for users, often leading to a negative perception of a website or application. The introduction of a spinner serves as a visual cue, letting users know that something is happening in the background and their request is being processed. Svelte Spinner takes this concept further, providing a smooth and efficient way to keep users engaged during loading periods. Some of the Svelte spinners can be seen here:

Svelte spinners
Svelte spinners

Power of Svelte

Svelte, known for its simplicity and efficiency in building web applications, unlike traditional frameworks, moves the burden of processing from the client to the build phase, resulting in smaller and faster applications. The same philosophy is applied to the Svelte Spinner, offering a lightweight solution that seamlessly integrates with your project.

Some key features that set Svelte Spinner Apart:

  1. Customization: Svelte Spinner allows developers to tailor the spinner's appearance to match the overall design of their application. With a range of customization options, from color schemes to animation styles, it ensures a cohesive and branded loading experience.

  2. Ease of Integration: Integration of the Svelte Spinner into your project is a breeze. With a minimalistic API, developers can quickly add a spinner to any component or page, enhancing the user experience without compromising development speed.

  3. Performance Benefits: Thanks to Svelte's approach to building applications, the spinner's impact on performance is minimal. Users can enjoy a smooth loading experience without sacrificing speed or responsiveness.

Step-by-step method

Here is a step-by-step guide for creating a svelte spinner:

  1. Import dependencies: Import the necessary spinner components from the svelte-loading-spinners package and setting up required variables:

<script>
  import { Jumper, Circle3 } from 'svelte-loading-spinners';
  
  let isLoading1 = false;
  let isLoading2 = false;
</script>

  1. Data processing: In this example, we will be create a simulation of some data processing which requires the svelte spinner to be placed here. We Implement an asynchronous function fetchData that simulates fetching data when a button is clicked:

<script>
async function fetchData(buttonNumber) {
    try {
      if (buttonNumber === 1) {
        isLoading1 = true;
      } else if (buttonNumber === 2) {
        isLoading2 = true;
      }
      // Simulate an asynchronous action (e.g., API call)
      await new Promise((resolve) => setTimeout(resolve, 2000));
      // Once the action is complete, reset loading state
      if (buttonNumber === 1) {
        isLoading1 = false;
      } else if (buttonNumber === 2) {
        isLoading2 = false;
      }
    } catch (error) {
      console.error('Error fetching data:', error);
      if (buttonNumber === 1) {
        isLoading1 = false;
      } else if (buttonNumber === 2) {
        isLoading2 = false;
      }
    }
  }
</script>

  1. Adding HTML structure: Creating a basic HTML structure:

<h1 style="position:relative; text-align:center;">Hello World!</h1>
<div class="loading-container">
  <p>Let's Test a simple spinner.</p>
  <button on:click={() => fetchData(1)} disabled={isLoading1}>
    {#if isLoading1}
      <span>
        <Jumper size="60" color="#FF3E00" unit="px" duration="1s" />
      </span>
    {:else}
      Fetch Data
    {/if}
  </button> 
</div>
<div class="loading-container2">
  <p>Let's Test another spinner.</p>
  <button on:click={() => fetchData(2)} disabled={isLoading2}>
    {#if isLoading2}
      <span>
        <Circle3 size="60" color="#FF3E00" unit="px" duration="1s" />
      </span>
    {:else}
      Fetch again
    {/if}
  </button> 
</div>

  1. Styling the components: Add some basic styles to position the elements:

<style>
  .loading-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-around;
  }
  .loading-container2 {
    position: relative;
    padding-top: 50px;
    display: flex;
    align-items: center;
    justify-content: space-around;
  }
</style>

Following these steps, we get a basic svelte spinner for our application. We can tweak and twist the implementation according to our requirements, but the underlying process of adding svelte spinners remains the same.

Example

Let's see an example of using the Svelte's spinner:

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
/wJv+riuzREqgwAAAABJRU5ErkJggg==
Simple spinner

Explanation

Line 2: We are importing default spinners from svelte-loading-spinners library. In this example, we have only used Jumper and Circle3 only, but we have various options within this library to select.

Line 7: Here, we define a async function to simulate an API call of fetching data where we will have our spinner come in to create a seamless user experience.

Lines 39–47: We have placed a button which, on click, would call fetchData function and simulate the data retrieving task. A spinner is placed within this button, which will be shown to the user until the data has been fetched (2 seconds timeout in our simulation). For this button, we have used Jumper spinner from the svelte-loading-spinners library.

Lines 51–59: Another button with a different spinner is set up here. We can have various other options from the given library. This button also displays a spinner when clicked. We have used Circle3 spinner from the svelte-loading-spinners library.

Lines 62–78: This part of the code is for the CSS styling of the content of this simple webpage.

Conclusion

In the pursuit of creating exceptional user experiences, the Svelte Spinner emerges as a valuable tool for web developers. Its seamless integration, customization options, and performance benefits make it a go-to choice for those aiming to strike the delicate balance between aesthetics and functionality. As we continue to push the boundaries of web development, tools like Svelte Spinner play a crucial role in ensuring that users stay engaged and delighted throughout their digital journey.

Free Resources

Copyright ©2025 Educative, Inc. All rights reserved