Check the CSS loader online: https://ziizium.github.io/my-webdev-notes/css-loaders/ or https://4q0sb.csb.app/
A loader is an animation that indicates an application or process is busy performing an operation. You can find a loader in an application or a web page as a circle rotating infinitely until the application responds or completes the process it was working on.
In this experiment, I tried to create a simple loader using HTML and CSS. I will show you how I did it, some issues I ran into, and the fix. I hope you learn something from it.
I have discussed some of the ingredients necessary for the loader to work in the series FrontEnd Development: Zero to hero specifically:
Let's dive in.
The loader that we'll create will be a simple one. The loader will be a single div
element with some CSS applied to it.
The div
element will be inside a main
element alongside an h1
element, these are just cosmetics to make the loader stand out on the web page.
Here is the HTML:
<main>
<h1>CSS Loaders</h1>
<div class="loader"></div>
</main>
The CSS is the main stuff therefore, we'll dissect it together.
We'll like to set up the environment for our loader. We begin by giving the main
tag some background color, width, and internal spacing (padding). The h1
is also aligned to the center of the page.
When you take a look at the CSS code for the main
tag, you'll notice the following line:
margin: 0 auto;
When we talked about CSS margins, I mentioned that the margin
property is actually a shortcut for four other properties namely:
margin-top
margin-right
margin-bottom
margin-left
The margin
property when used with just 2 properties, the first property will represent the top and bottom and the second property will represent the right and left.
We used 0
for the top and bottom and auto
for the right and left. The auto
keyword here is an instruction to the browser to apply equal margins on both sides of main
hence, it will always appear at the center of the viewport (available browser window).
Another thing to note is the calculation for the width:
-
50 * 16 = 800px
; This assumes the default browser font size of16px
Here is the CSS for main
and the subsequent h1
tag:
main {
width: 50em; /* 50 * 16 = 800px.*/
margin: 0 auto; /* Take it to the center of the page */
background-color: #ccc; /* Silver */
padding: 1.5em; /* Internal spacing */
display: block; /* For Internet Explorer */
}
/* We make use of descendant selectors. Just for FUN */
main > h1 {
text-align: center; /* You get this right? */
}
It's time for the real deal. When you take a look at a loader, the surroundings of the loader and the ring that rotates infinitely are CSS borders.
The ring is a border-top
top property. And I am pretty sure you know most loaders are round in shape. The border-radius
property with a value of 50%
is responsible for this.
So here we go:
.loader {
border: 16px solid #f3f3f3; /* Light gray */
border-top: 16px solid #48d1cc; /* The border top will be the color of the spinner */
border-radius: 50%; /* Make it round */
}
Save and refresh your browser and take note of the changes.
That looks good since we are progressing but it is not appealing. The div
is an empty element, we will need to give it a height
and width
to see the full effect of the border-radius
and border-top
property.
.loader {
/* All properties remain the same */
width: 120px; /* The width of the loader */
height: 120px; /* The height is necessary since the div has no content */
}
Save and refresh your browser.
What's left? Some spinners! But wait how will a border spin? CSS Animations and CSS Transforms!.
With CSS animations you can move page element around (border-top
). CSS transform will allow the spinner to move around in a circle.
The transform
property applies a 2D or 3D transformation to an element. This property allows you to rotate, scale, move, skew, etc., elements. (source).
Specifying a value other than none
for the transform
property establishes a new local coordinate system at the element that it is applied to. (source).
Using the animation
property we can specify how the animation behaves. The animation
property is a shorthand for other animation properties and it has large browser support based on Can I use.
The property that will make the spinner spin endlessly is the animation-iteration-count
with the value of infinite
.
In the subsequent code, the animation-iteration-count
is part of the animation
shorthand property and it's the fourth property in the value.
Please read the comments.
.loader {
/* All properties remain the same */
/**
* 1. animation-name
* 2. animation-duration
* 3. animation-timing-function
* 4. animation-iteration-count
*
* If you would like to target webkit specific browsers
* change animation to -webkit-animation
*/
/*1*/ /*2*/ /*3*/ /*4*/
animation: spinner 2s linear infinite;
}
Save and refresh your browser you'll realize the animation is not active because we are missing one final ingredient, keyframes.
Keyframes specify the animation code. Where it begins and where it will stop.
We need the spinner to rotate in circles, therefore, we'll use the rotate
value for the transform
property starting at 0%
and ending at 360%
.
/**
* If you would like to target WebKit specific browsers
* change keyframes to -webkit-keyframes
*/
@keyframes spinner {
0% {
transform: rotate(0deg); /* Start from 0 degrees */
}
100% {
transform: rotate(360deg); /* End at 100 degrees */
}
}
And that's it. Save and refresh your browser to see the changes.
Check out the sandbox below:
And the Github repo:
ziizium / my-webdev-notes
Code snippets for series of articles on DEV about my experiments in web development
My WebDev Notes
This repositiory contains code snippets, and links for series of articles on DEV about my experiments in Web development.
List of articles
- My WebDev Notes: CSS Loaders published on the 25th February 2020
- My WebDev Notes: Filter table published on the 1st April 2020
- MyWebDev Notes: Center page elements with CSS Grid published on the 3rd of April 2020
- My WebDev Notes: Photo gallery with CSS Grid published on the 7th of April 2020
- My WebDev Notes: Fullscreen overlay navigation published on the 13th of April 2020
- My WebDev Notes: A simple and accessible accordion published on 28th of April 2020
- My WebDev Notes: How to create a tooltip with HTML and CSS published on 3rd February 2021
- How to create a modal published on 22nd June 2021
We can do better by creating multiple loaders, I might not write about it but you can check the Github repo anytime and if I do write about it, I will update this article.
Have fun!.
Top comments (1)
Also, It could be helpful for toronto app developers who are fully capable for developing hybrid apps from css.