Creating Simple Css Spinner-Loader

How to do a Throbber without trouble

by Tibor Kopca Date: 30-01-2021 webdev css programming javascript


In today's article we will show you how to animate a basic loader that spins when some predefined action is defined, such as loading an image. That can be used on a website for example when there is a request running and the result is not yet retrieved.


What are they?


Loading animation, Loader, Spinner, Throbber, they go by many names, sometimes misleading because they do not always spin. Throbbers are actually the official name for them. Whatever they are called, they are supposed to do all the same - show an image in a program's interface which animates to show that the software is busy.

CSS_loader_Internet_explorer_gif

This means the system is performing an action in the background, launching an application, processing requests, downloading content, conducting intensive calculations or communicating with an external device. The user is thus able to see that he/she needs to wait until the process is finished.
Such a thing is many times needed also in text user interfaces, where there is no animation possible so its replaced by a fixed-width character which is cycled between “|”, “/”, “-” and “\” forms in order to create an animation effect.

Spinner is something different than progress bar, because it doesn't show how much of the action has been completed. Unless there is for example added percentage numerics.
There are many iconic throbbers like Windows wait cursor in the form of hourglass and surely you recognize this typical throbber animation, as seen on many websites.

CSS-loader-spinner-AJAX

Using a CSS animation has an advantage that we are avoiding image request (.gif for example), that means the loader would be shown even if the system or transfer is slow or halted. That is how developers came to use pure CSS over GIF animations which were used a long time ago in web development.

CSS-loader-hourglass-windows

Well enough of the theories, it's time to make our own simple throbber/spinner/loader.

Step by step


We would use codepen.io to show the building process, a great tool where you can quickly try some pieces of code. Our spinner is going to be a simple circle spinning around its own centre.

First thing to do is create a single div element where the spinner would be shown. To target it in CSS it would have the class name “loader”.

<div class="loader"></div> 

Next we add CSS code:

.loader {
  width: 30px;
  height: 30px;
  background-color:grey;
  border: 30px solid #f3f3f3;
  margin:10% auto;
} 

As we can see in this picture, it's just a simple square with borders set to it.
 
CSS-loader-codepen1

Now we make it circular by adding border-radius:50% and we give color to the left border.

CSS-loader-codepen2

Now spin it!


At last, we add an animation to the loader class that makes the circle spin forever with a 0.8 second animation speed. In the property animation we need to write the name of the animation which will be defined in keyframes - in this case it's “spinIT”, time to complete animation in seconds, blend mode will be linear and it will be running continuously by the last attribute called infinite.
Additionally we decorate it with a bit of shadow.

Here is the complete code:

 .loader {
  width: 30px;
  height: 30px;
  border: 30px solid #f3f3f3;
  margin:5% auto;
  border-left: 30px solid #FF5D00;
  border-right: 30px solid #FF5D00;
  border-radius: 50%;
  animation: spinIT 0.8s linear infinite;
  filter: drop-shadow(0px 0px 8px gray)
} 

@keyframes spinIT {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
} 

 
CSS-loader-codepen3

For those browsers that do not support animation and transformation properties we should add this part of code.

@-webkit-keyframes spinIT {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}


Keep it simple

Now all of this above would only serve for designing the spinner, but for actually implementing it we need a content that its loading time is actually greater than a few milliseconds. This can be done by loading big pictures or files.
We used larger sized images, taken from placeimg.com - so called lorem ipsum of images. With this approach we can prevent also caching of the data so we can simulate better the loading time.

<body>
  <div class="image">
    <img src="https://placeimg.com/800/600/any">
<!--     <div class="loader"></div>    -->
  </div>
</body>

Added CSS:

body{
  display:flex;
  justify-content:center;
  align-items:center;
}
.image{
  width:50vw;
  height:100vw;
  border:solid black;
  overflow:hidden;
}

This is how it looks without a spinner.


CSS-loader-codepen4

Now we want to do that spinner in the place of image until it loads. We place the spinner inside the container with the image and set it center with CSS.

<body>
  <div class="image">
<img src="https://placeimg.com/800/600/any">
<div class="loader"></div>   
  </div>
</body>

CSS:

.image{
  width:500vw;
  height:100vw;
  border:solid black;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-items:center;
}

Now we prepare the rest of the code, by adding id=”img” to the element img, because what we are going to do is to have an image container not displayed until it's loaded into memory.

<img src="https://placeimg.com/800/600/any" id="img" class="hidden animated">

In CSS file it would be as follows:
.hidden{
  display:none;
}
.animated{
  animation: animate 3s;
}
@keyframes animate{
  from{opacity:0 }
  to{opacity:1 }
}

Now  we are set to JavaScript in the next section.

JavaScript the s..t out of it!


For the JS, we add a simple event listener to hide the loader when the image is completely loaded.
The last part is to add code so we access the elements we're going to manipulate.
First we add an event listener to the window, which would start the autoexecutable function on load of the content.


Make no mistake, an external js file or <script> should be placed behind all the HTML code so the text content would be loaded first - in this time is the spinner visible. Once JS code is loaded, it will run the code inside the eventlistener.

window.addEventListener("load", function(){
document.getElementById("loaderSpinner").style.display = "none";
document.getElementById("img").classList.remove('hidden');
document.getElementById("img").style.display = "block";
});

In the second row we can see how to stop the loader, once the image itself would load.
And we remove class “hidden” from the image, so it would be visible.

See the Pen Loader_spinner by Tibor (@TiborKopca) on CodePen.

Complete code to be seen here:https://codepen.io/TiborKopca/pen/NWbKeLG.


Loading images with the Fetch API


When it comes to JavaScript integration, we can showcase it on the Fetch API of one of our coworkers, Iveta Karailievova, check out her articles here> https://www.ma-no.org/en/search/?q=Iveta, she wrote recently how to use it.

This API basically obtains resources, in this case an image from the URL.

We altered the code a bit to implement timeout to the event listener, this allows us to postpone the time of the function execution so we can enjoy the spinner better.


The forked code can be seen here > https://codepen.io/TiborKopca/pen/zYoOjQW

Conclusion

There are many ways to go when you are about to make a custom spinner, for example using CSS pseudoelements. We showed you the basic one, but depends only on your imagination how you make it at the end. Here are some possibilities for inspiration to see what can be done.
https://freefrontend.com/css-loaders/

http://www.css-spinners.com/

https://tobiasahlin.com/spinkit/

https://loading.io/css/

https://dribbble.com/tags/throbber

Hope we showed you how it can be quite easily created some custom CSS throbble for your website to be even more attractive for everybody.

Image by Tibor Kopca.

CSS_spinner_gif_cat

 
by Tibor Kopca Date: 30-01-2021 webdev css programming javascript hits : 713  
 
Tibor Kopca

Tibor Kopca

From tinkering with computers as a teenager, through a career in datacenter he stepped into web development with full force and started coding. Absorbs all information like a sponge.
Fan of aerospace, engineering, information technologies and watches.

 
 
 

Related Posts

Validating HTML forms using BULMA and vanilla JavaScript

Today we are going to write about contact forms and how to validate them using JavaScript. The contact form seems to be one of the top features of every basic home…

How to use Parallax.js effect on your website

Today, we're going to write about the parallax effect, similar to parallax scrolling, and how to implement it to improve your landing page. In webdev, they say mobile first -…

Django vs. Laravel: Market Share Comparison

There are two leading frameworks in the web development segment: Django and Laravel. In this article, we prepared a Django and Laravel comparison focusing on their market share so that…

How to make the website's dark mode persistent with Local Storage, CSS and JS

Recently we wrote about how to do a switchable alternative color mode or theme, a very useful and popular feature to websites. Today’s article is going to be about how…

A Java approach: While loop

Hello everyone and welcome back! After having made a short, but full-bodied, introduction about cycles, today we are finally going to see the first implementations that use what we have called…

The easiest way to align items using flexbox

With the release of flexbox in CSS, it has become an essential tool when placing elements next to each other, since, by default, the children of a display: flexare stacked…

Dark Mode on website using CSS and JavaScript

In today’s article we are going to learn how to build pretty much standard these days on the web pages and that is the alternative color mode and switching between…

A Java approach: The Cycles - Introduction

Hello everyone and welcome back! Until now, we have been talking about variables and selection structures, going to consider some of the fundamental aspects of these two concepts. Theoretically, to…

JavaScript: Spread and Rest operators

In today’s article we are going to talk about one of the features of the ES6 version(ECMAScript 2015) of JavaScript which is Spread operator as well as Rest operator. These features…

A Java approach: boolean variables

The previous time, we talked extensively about Boolean variables, trying to outline the main operations that can be carried out at a practical level.  Of all the cases examined, we have…

How To Add Filter Effects to Images with CSS

To achieve interesting effects on your images, learn about the 'filter' and 'Backdrop-Filter' properties of CSS. CSS filters are a very attractive feature of CSS that allows you to apply certain…

Why You Should Hire Node.js Developer for Your Backend Development

When developers are building a new website, they mainly focus on both frontend and backend development. The frontend code helps create the interfaces through which the app interacts with the…

We use our own and third-party cookies to improve our services, compile statistical information and analyze your browsing habits. This allows us to personalize the content we offer and to show you advertisements related to your preferences. By clicking "Accept all" you agree to the storage of cookies on your device to improve website navigation, analyse traffic and assist our marketing activities. You can also select "System Cookies Only" to accept only the cookies required for the website to function, or you can select the cookies you wish to activate by clicking on "settings".

Accept All Only sistem cookies Configuration