Enhance user experience and website performance with these 9 simple and easy-to-use pure CSS loaders. Learn how to implement them in your web design with our step-by-step guide.
Table of Contents
In today's world, where attention spans are shorter than ever and website loading times are expected to be lightning-fast, website optimization has become more important than ever before. CSS loaders are a great tool for enhancing user experience and improving website performance by indicating to users that content is loading. Pure CSS loaders, in particular, are lightweight and easy-to-implement solutions that can add visual interest and functionality to a website. In this blog post, we'll explore 9 different types of simple and easy-to-use pure CSS loaders that can help you optimize your website and enhance user experience. We'll also provide a step-by-step guide on how to implement them in your web design, as well as best practices for using CSS loaders effectively.
There are many different CSS Loaders that you can use, but if you stick with a few of the most simple and easy-to-use ones, you'll find they're a great resource for website development. While these loaders might not be as efficient in terms of loading time as some more advanced options, they require very little technical knowledge and make the process of adding content to your website much simpler.
How to implement pure CSS loaders:
- Choose the type of loader you want to use from the 9 examples we've provided.
- Copy the CSS code for the loader.
- Paste the CSS code into your web design where you want the loader to appear.
- Add the HTML code to create the loader element on your web page.
Best practices for using CSS loaders:
- Use a lightweight CSS loader that doesn't slow down your website's loading time.
- Make sure the loader is clearly visible to the user so they know the content is loading.
- Use CSS loaders sparingly to avoid overwhelming the user with too many animations.
- Test the loader on different devices and browsers to ensure it works properly.
- Consider adding alternative content for users who have slow internet connections or have trouble viewing the loader.
By following these best practices and the step-by-step guide for implementation, you can effectively use pure CSS loaders to enhance the user experience on your website.
Let's start making these amazing loaders using HTML and Pure CSS step by step.
Join My Telegram Channel to Download the Project: Click Here
Prerequisites:
Before starting this tutorial, you should have a basic understanding of HTML, and CSS. Additionally, you will need a code editor such as Visual Studio Code or Sublime Text to write and save your code.
Source Code
Step 1 (HTML Code):
To get started, we will first need to create a basic HTML file. In this file, we will include the main structure for our different CSS loaders.
After creating the files just paste the following codes into your file. Remember that you must save a file with the .html extension.
Step 2 (CSS Code):
Next, we will create our CSS file. In this file, we will use some basic CSS rules to create our loaders. We will also add some padding and margin properties to ensure that everything looks correct.
This will give our loaders an upgraded presentation. Create a CSS file with the name of styles.css and paste the given codes into your CSS file. Remember that you must create a file with the .css extension.
.loader {
--color: white;
--size-mid: 6vmin;
--size-dot: 1.5vmin;
--size-bar: 0.4vmin;
--size-square: 3vmin;
position: relative;
width: 50%;
display: grid;
place-items: center;
}
.loader::before,
.loader::after {
content: '';
box-sizing: border-box;
position: absolute;
}
/**
loader --1
**/
.loader.--1::before {
width: var(--size-mid);
height: var(--size-mid);
border: 4px solid var(--color);
border-top-color: transparent;
border-radius: 50%;
animation: loader-1 1s linear infinite;
}
.loader.--1::after {
width: calc(var(--size-mid) - 2px);
height: calc(var(--size-mid) - 2px);
border: 2px solid transparent;
border-top-color: var(--color);
border-radius: 50%;
animation: loader-1 0.6s linear reverse infinite;
}
@keyframes loader-1 {
100% {
transform: rotate(1turn);
}
}
/**
loader --2
**/
.loader.--2::before,
.loader.--2::after {
width: var(--size-dot);
height: var(--size-dot);
background-color: var(--color);
border-radius: 50%;
opacity: 0;
animation: loader-2 0.8s cubic-bezier(0.2, 0.32, 0, 0.87) infinite;
}
.loader.--2::after {
animation-delay: 0.3s;
}
@keyframes loader-2 {
0%, 80%, 100% {
opacity: 0;
}
33% {
opacity: 1;
}
0%, 100% {
transform: translateX(-4vmin);
}
90% {
transform: translateX(4vmin);
}
}
/**
loader --3
**/
.loader.--3::before,
.loader.--3::after {
width: var(--size-dot);
height: var(--size-dot);
background-color: var(--color);
border-radius: 50%;
animation: loader-3 1.2s ease-in-out infinite;
}
.loader.--3::before {
left: calc(50% - 1.6vmin - var(--size-dot));
}
.loader.--3::after {
left: calc(50% + 1.6vmin);
animation-delay: -0.4s;
}
@keyframes loader-3 {
0%, 100% {
transform: translateY(-2.6vmin);
}
44% {
transform: translateY(2.6vmin);
}
}
/**
loader --4
**/
.loader.--4::before {
height: var(--size-bar);
width: 6vmin;
background-color: var(--color);
animation: loader-4 0.8s cubic-bezier(0, 0, 0.03, 0.9) infinite;
}
@keyframes loader-4 {
0%, 44%, 88.1%, 100% {
transform-origin: left;
}
0%, 100%, 88% {
transform: scaleX(0);
}
44.1%, 88% {
transform-origin: right;
}
33%, 44% {
transform: scaleX(1);
}
}
/**
loader --5
**/
.loader.--5::before,
.loader.--5::after {
height: 3vmin;
width: var(--size-bar);
background-color: var(--color);
animation: loader-5 0.6s cubic-bezier(0, 0, 0.03, 0.9) infinite;
}
.loader.--5::before {
left: calc(50% - 1vmin);
top: calc(50% - 3vmin);
}
.loader.--5::after {
left: calc(50% + 1vmin);
top: calc(50% - 1vmin);
animation-delay: 0.2s;
}
@keyframes loader-5 {
0%, 88%, 100% {
opacity: 0;
}
0% {
transform: translateY(-6vmin);
}
33% {
opacity: 1;
}
33%, 88% {
transform: translateY(3vmin);
}
}
/**
loader --6
**/
.loader.--6::before {
width: var(--size-square);
height: var(--size-square);
background-color: var(--color);
top: calc(50% - var(--size-square));
left: calc(50% - var(--size-square));
animation: loader-6 2.4s cubic-bezier(0, 0, 0.24, 1.21) infinite;
}
@keyframes loader-6 {
0%, 100% {
transform: none;
}
25% {
transform: translateX(100%);
}
50% {
transform: translateX(100%) translateY(100%);
}
75% {
transform: translateY(100%);
}
}
/**
loader --7
**/
.loader.--7::before,
.loader.--7::after {
width: var(--size-square);
height: var(--size-square);
background-color: var(--color);
}
.loader.--7::before {
top: calc(50% - var(--size-square));
left: calc(50% - var(--size-square));
animation: loader-6 2.4s cubic-bezier(0, 0, 0.24, 1.21) infinite;
}
.loader.--7::after {
top: 50%;
left: 50%;
animation: loader-7 2.4s cubic-bezier(0, 0, 0.24, 1.21) infinite;
}
@keyframes loader-7 {
0%, 100% {
transform: none;
}
25% {
transform: translateX(-100%);
}
50% {
transform: translateX(-100%) translateY(-100%);
}
75% {
transform: translateY(-100%);
}
}
/**
loader --8
**/
.loader.--8::before,
.loader.--8::after {
width: var(--size-dot);
height: var(--size-dot);
border-radius: 50%;
background-color: var(--color);
}
.loader.--8::before {
top: calc(50% + 4vmin);
animation: loader-8-1 0.8s cubic-bezier(0.06, 0.01, 0.49, 1.18) infinite;
}
.loader.--8::after {
opacity: 0;
top: calc(50% - 2vmin);
animation: loader-8-2 0.8s cubic-bezier(0.46,-0.1, 0.27, 1.07) 0.2s infinite;
}
@keyframes loader-8-1 {
0%, 55%, 100% {
opacity: 0;
}
0% {
transform: scale(0.2);
}
22% {
opacity: 1;
}
33%, 55% {
transform: scale(1) translateY(-6vmin);
}
}
@keyframes loader-8-2 {
0%, 100% {
opacity: 0;
}
33% {
opacity: 0.3;
}
0% {
transform: scale(0);
}
100% {
transform: scale(4);
}
}
/**
loader --9
**/
.loader.--9::before,
.loader.--9::after {
width: var(--size-dot);
height: var(--size-dot);
border-radius: 50%;
background-color: var(--color);
animation: loader-9 0.42s cubic-bezier(0.39, 0.31, 0, 1.11) infinite;
}
.loader.--9::before {
left: calc(50% - var(--size-dot) - 1.6vmin);
}
.loader.--9::after {
left: calc(50% + 1.6vmin);
animation-delay: 0.12s;
}
@keyframes loader-9 {
0%, 100% {
opacity: 0;
}
0% {
transform: translate(-4vmin, -4vmin);
}
66% {
opacity: 1;
}
66%, 100% {
transform: none;
}
}
/**
miscs
**/
.container {
display: grid;
grid-template-columns: repeat(3, 18vmin);
grid-template-rows: repeat(3, 18vmin);
grid-gap: 1vmin;
}
.item {
background: rgba(255, 255, 255, 0.1);
display: grid;
place-items: center;
border-radius: 4px;
transition: opacity 0.4s ease;
}
.container:hover .item {
opacity: 0.3;
}
.container:hover .item:hover {
opacity: 1;
}
.page {
margin: auto;
}
.header {
margin-bottom: 4vmin;
}
.header-title {
font-size: 3.75vmin;
}
.header-subtitle {
font-size: 2vmin;
text-transform: uppercase;
opacity: 0.6;
}
html, body {
display: flex;
width: 100%;
height: 100%;
background-image: linear-gradient(to right top, #051937, #004d7a, #008793, #00bf72, #a8eb12);
font-family: 'Noto Sans', sans-serif;
color: white;
text-align: center;
letter-spacing: 0.3px;
} Final Output:
Conclusion:
Incorporating pure CSS loaders into your web design is a great way to optimize your website and enhance user experience. With the 9 different types of simple and easy-to-use pure CSS loaders we've explored in this blog post, you can add visual interest and functionality to your website without sacrificing performance. By following our step-by-step guide and best practices for using CSS loaders effectively, you can ensure that your website is optimized for speed and user engagement. So, whether you're a web designer or simply looking to improve your website's performance, give these CSS loaders a try and see the difference they can make!
That’s a wrap!
I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.
Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee.
And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!
Thanks!
Faraz 😊
