Creating A Pure CSS Preloader - Source Code
Make money for being or staying online/internet.

You will get a $5 starting gift when you join using this link:: GET THE OFFER NOW!!

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


CSS code

padding: 0;
align-items: center;
justify-content: center;
background-color: #00796b;

display: flex;

background-color: #fff;
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 {
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!

Save up to 80% with this Domain & Shared Hosting package deal! 80% OFF - GET OFFER NOW

Related Post(s)

» Learn how to create a custom scrollbar with CSS.

» Create A Cool Layout Using CSS

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

» How to center anything on a wepage using CSS

» Creating A Pure CSS Preloader - Source Code

collections_bookmark Category :: Css
date_range Published :: 2 years ago At: 01:11 AM
event_note Detailed Date :: Apr 18th, 2020
person Writer :: Code
1 year ago

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

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

1 year 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.

1 year 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.

1 year ago


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

1 year 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.

1 year 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?

1 year 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).

2 years 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.