Creating simple CSS spinner-loader | Web Design and Web Development news, javascript, angular, react, vue, php

4 · 16 · 21
by Tibor Kopca Date: 29-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.

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.

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.

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”.

Next we add CSS code:

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

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:

 

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

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.

Added CSS:

This is how it looks without a spinner.

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.

CSS:

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.

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.

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

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.

by Tibor Kopca Date: 29-01-2021 webdev css programming javascript hits : 10  

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.

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…

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…

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…

Latest news from Hi-Tech world

Having two WhatsApp accounts on the same Android or iOS cell phone is possible. To do this, your terminal must be a phone with Dual SIM compatibility, that is, by…

A few months ago we talked about certain Google metrics that were displayed in Search Console. The reason for writing another post on this topic is that Google has changed…

Cumulative Layout Shift, one of the new Core Web Vitals metrics,  is the first metric that focuses on user experience beyond performance. Unexpected movement of web page content is a major…

C/ Nuredduna 22, 1-3, 07006
Palma de Mallorca, Baleares
Telephone: + 34 871 738 867
mail: [email protected]

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”.

Strictly necessary cookies

Always active

These cookies are necessary for the website to function and cannot be disabled on our systems. They are generally only set in response to your actions in requesting services, such as setting your privacy preferences, logging in or completing forms. You can set your browser to block or alert you to these cookies, but some areas of the site will not work. These cookies do not store any personally identifiable information

Performance Cookies

These cookies allow us to count visits and traffic sources so that we can assess the performance of our site and improve it. They help us know which pages are the most or least visited, and how visitors navigate the site. All information collected by these cookies is aggregated and therefore anonymous. If you do not allow these cookies to be used, we will not know when you visited our site and will not be able to assess whether it worked properly

Functional Cookies

These cookies allow the website to provide better functionality and customization. They may be set by our company or by external providers whose services we have added to our pages. If you do not allow these cookies to be used, some of these services may not function properly

Targeted Cookies

These cookies may be set through our site by our advertising partners. They may be used by those companies to profile your interests and display relevant ads on other sites. They do not directly store personal information, but are based on the unique identification of your browser and Internet device. If you do not allow these cookies to be used, you will see less targeted advertising

This content was originally published here.

About me

+61 410 327 824

Queensland, Australia

Hello!

I'm Currated Post

Product designer

Related Posts

Subscribe

newsletter

Comments