Loading spinners are small animations used to indicate that something is loading and that the user needs to wait. When there is a spinner animation, it indicates that the application has understood the instruction and is in the process of completing the desired action.
In the web application context, there are many operations that require spinners feedback for users. This is because the internet applications go back and forth between the web server and the browser for the desired features. All these background internet connections should be made visible to users. The user can then know that their request is being processed and that they just need to wait a bit for the program to be launched and operational.
On the Internet, loading spinners have always been used in sites and applications for the same purpose as their desktop counterparts. Years ago, spinners were primarily in .gif image format. But since images tend to consume a lot of bandwidth and often slow down the loading speed of websites, web developers have moved on to a more efficient solution: pure CSS loading spinners.
The Simplest Loading Spinner
There is no shortage of ready-to-use CSS-based loading spinners. Yet, it is still fun to derive a spinner from scratch, particular if the constraint is to use only one class and no real DOM elements.
@keyframes rotating {
100% {
transform: translate(-50%, -50%) rotate(360deg);
}
}
.show-spinner:after {
content: ' ';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
width: 32px;
height: 32px;
border: 6px solid rgba(0, 0, 0, 0.1);
border-top: 6px solid rgba(0, 0, 0, 0.5);
animation: rotating 1.2s infinite linear;
}Just add this one single css class to show a centered loading spinner animation.
<body class="show-spinner"></body>
Happy spinning!