Bootstrap Spinner

Published: 22.10.2019 | Last update: 6.6.2022

Hey!

Do you want to create a cool loading spinner for your website?

In this HTML and CSS snippet tutorial, I will show you how to create a nice animated spinner and use it on your website.

You can just copy/paste my snippet content, or perform these steps to make everything work in a similar way :

  1. Visit Pure CSS Loaders and pick a nice spinner.

  2. Wrap your spinner in a full width/height window that covers all your page content.

  3. Using JavaScript, remove this loading window when the page is fully loaded.

What is a loading spinner?

A loading spinner is a circular animation that can be used as an alternative to the classic loading icon. The purpose of using these spinners is to make visitors aware that content is being loaded or that their request was successful (e.g., “Place Order”).

They are usually placed at the top of the page while waiting for content to load.

When to use a loading spinner?

Most commonly, they are used when there’s no visual feedback available, such as during AJAX requests or when showing pagination links.

Loading spinners are used in many different situations, but they are especially useful for:
  • Visually indicate that something is happening on your website. This can be a good idea if you want to give users an idea of how long they will have to wait before they can actually use your site and what is happening behind the scenes;
  • Keep people interested while they wait for content to load;
  • Create a sense of urgency when there is no actual reason for urgency;
  • Reduce abandonment rate by showing visitors that their request was received, processed, and is now being fulfilled

If you liked this snippet, you might also enjoy exploring Social Links or Bootstrap static header .

Please note that the interactive editor on this page should be viewed on your laptop or desktop for the best results.

See my free Bootstrap themes Edit this snippet

How to use the snippet

There are two ways to use the snippet:

  • a] Copy it into your project. This means:
    1. Copy content of the HTML, CSS, JavaScript tabs into your project
    2. Make sure that you have jQuery 3 and Bootstrap 4's CSS and JS included in your project too.
    3. That should be it, and you should be good to go.
  • b] Use the "Edit in JSFiddle" link in the top right and play with it in the JSFiddle. After adjusting what you need, you can use the same steps as in a] to develop it locally.
Share on Facebook Share on Twitter Share on LinkedIn