Creating A Pure CSS Preloader

Creating A Pure CSS Preloader - Source Code

It’s pretty common to see a loading state on sites these days. For this reason, I will provide you the source code for custom CSS preloader progress indicator that I made using only CSS.

You may ask your self, " Why should I need a preloader?" Well, if you have content that will take a long time to load, you should give the user feedback.

The feedback I am talking about is the preloader animations or text telling the user to wait as the server returns back the data they want.

HTML code

copy

	
<div class="container">

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

 </div>

CSS code

copy


body{
padding: 0;
margin:0;
}
.container{
display:flex;
align-items: center;
justify-content: center;
height:100vh;
background-color: #00796b;
}

#loader{
display: flex;
}

.circle{
background-color: #fff;
width:10px;
height:10px;
border-radius:50%;
margin:4px;
animation: wave 0.6s ease-in infinite;
}

.circle:nth-of-type(2) {
animation-delay: 0.1s;
}

.circle:nth-of-type(3) {
animation-delay: 0.3s;
}

.circle:nth-of-type(5) {
animation-delay: 0.4s;
}

@keyframes wave {
0%,
100% {
transform: translateY(0);
}

50% {
transform: translateY(-10px);
}
}

Well done! You now know how to build a pretty nice loading effect using nothing but a pinch of CSS. Enjoy!

Related Post(s)

» Create A Cool Layout Using CSS

» Learn how to use CSS box shadow property - Source Code

» Animated Social Media Icons Using Font Awesome and Materialize CSS

» Learn how to create responsive images with CSS

» Learn how to create Gradient Backgrounds using CSS

Category :: Css
Published :: 1 year ago At: 01:11 AM
Detailed Date :: Apr 18^th, 2020
Writer :: Code

RECENT POSTS

4 months ago

A JavaScript library for formatting and manipulating numbers - Numeral.js

Check out this lightweight JavaScript library used for formatting and manipulating numbers.

5 months ago

All Countries Drop Down List | HTML Select Country Name

This simple country dropdown list is freely available for you to copy and use in your project forms.

5 months ago

HTML Entities Code Alphabet Discovery Using JavaScript

In this post I will show how writing just a few lines in JavaScript will allow you to render, browse and discover the alphabetical letters using a set of HTML entity codes.

5 months ago

YTS YIFY MOVIES API - PROJECT PREVIEW

Download YTS YIFY movies using this simple project I created using their API.

6 months ago

Display Random Advice On Your Website or Web App Using Advice Slip JSON API

Here is a short project to display the use of APIs. I decided to work with an advice API because it seemed like a fun one that I haven't worked on before.

7 months ago

How do I get a YouTube video thumbnail from YouTube using PHP

Have you ever been on youtube and admired a thumbnail of a video?

9 months ago

How to recreate Facebook's console warning

When I was inspecting some code on Facebook. I came across this interesting feature. A simple styled console warning message from Facebook to its dear users(products).

1 year ago

How To Create A Stacked Gallery Using HTML And CSS Source Code

In this post I provide you with the source code for the youtube tutorial I made on how to create a Stacked image gallery Using HTML and CSS.

Subscribe