AllsWeb Blog
No Result
View All Result
  • Home
  • Main Home
  • PHP and MySQL
  • JavaScript
    • jQuery & AJAX
  • WordPress
  • SEO
  • Web Hosting
  • Comparison
Support
Knowledgebase
  • Home
  • Main Home
  • PHP and MySQL
  • JavaScript
    • jQuery & AJAX
  • WordPress
  • SEO
  • Web Hosting
  • Comparison
No Result
View All Result
AllsWeb White Logo
No Result
View All Result
Home HTML & CSS

How to Create Loader Animation with CSS

Create Loader Animation

Lakshika Mathur by Lakshika Mathur
January 1, 2020
Reading Time: 2 mins read
0
How to Create Loader Animation with CSS

A loader is a beneficial element for all the projects related to the web. Therefore, we have to use the loader during page or content loading. So, when we use Ajax to update parts of a web page, related content will have to be received for some time. Thus, the preloader is a precise option to notify the user to wait. You can use an image as a preloader, or you can make a CSS loader. If you want to make loader animation with CSS. Therefore, this tutorial will help you to create lightweight and straightforward loader animation. Here we’ll give you a short CSS code snippet to Create Loader Animation with CSS and HTML.

RELATED POSTS

Build an HTML5 Video Player with Custom Controls

Display Loading Image While Page Loads using jQuery and CSS

Accessing Webcam and Capture Image using HTML5 and JavaScript

Loader Style 1

The following CSS will make a spinner loader. So, you can change the loader color and size as per your website layout.

CSS Code:

.loader {
    border-top: 16px solid #4285F4;
    border-right: 16px solid #EA4335;
    border-bottom: 16px solid #FBBC05;
    border-left: 16px solid #34A853;
    border-radius: 50%;
    width: 120px;
    height: 120px;
    -webkit-animation: rotate 2s linear infinite;
    animation: rotate 2s linear infinite;
}
@keyframes rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
@-webkit-keyframes rotate {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
}

HTML Code:

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

SEE ALSO: File Type (extension) Validation with JavaScript

Loader Style 2

The following CSS generates an animated loader. So, you can change the loader colour and size as per your website layout.

CSS Code:

.loader, .loader:before, .loader:after {
    background: #000000;
    -webkit-animation: animate 1s infinite ease-in-out;
    animation: animate 1s infinite ease-in-out;
    width: 1em;
    height: 4em;
}
.loader {
    color: #000000;
    text-indent: -9999em;
    margin: 88px auto;
    position: relative;
    font-size: 11px;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-animation-delay: -0.16s;
    animation-delay: -0.16s;
}
.loader:before, .loader:after {
    position: absolute;
    top: 0;
    content: '';
}
.loader:before {
    left: -1.5em;
    -webkit-animation-delay: -0.32s;
    animation-delay: -0.32s;
}
.loader:after {
    left: 1.5em;
}
@-webkit-keyframes animate {
    0%, 80%, 100% {
        box-shadow: 0 0;
        height: 4em;
    }
    40% {
        box-shadow: 0 -2em;
        height: 5em;
    }
}
@keyframes animate {
    0%, 80%, 100% {
          box-shadow: 0 0;
          height: 4em;
    }
    40% {
        box-shadow: 0 -2em;
        height: 5em;
    }
}

HTML Code:

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

Also, read our previous blog- How to Generate QR Code with PHP using Google Chart API

Tags: CSSLoader Animation
ShareTweetSendShareSharePinScan
Lakshika Mathur

Lakshika Mathur

Related Posts

Build an HTML5 Video Player with Custom Controls
HTML & CSS

Build an HTML5 Video Player with Custom Controls

January 2, 2020
87
Display Loading Image While Page Loads using jQuery and CSS
HTML & CSS

Display Loading Image While Page Loads using jQuery and CSS

January 1, 2020
42
Accessing Webcam and Capture Image using HTML5 and JavaScript
HTML & CSS

Accessing Webcam and Capture Image using HTML5 and JavaScript

December 30, 2019
41
jQuery UI Autocomplete with Images and Custom HTML in PHP
HTML & CSS

jQuery UI Autocomplete with Images and Custom HTML in PHP

December 29, 2019
112
Add WYSIWYG HTML Editor to Textarea with CKEditor
HTML & CSS

Add WYSIWYG HTML Editor to Textarea with CKEditor

December 27, 2019
13
Convert HTML to PDF using JavaScript
HTML & CSS

Convert HTML to PDF using JavaScript

December 25, 2019
59
Next Post
Display Loading Image While Page Loads using jQuery and CSS

Display Loading Image While Page Loads using jQuery and CSS

How to Install LAMP (Linux, Apache, MySQL, PHP) on Ubuntu

How to Install LAMP (Linux, Apache, MySQL, PHP) on Ubuntu

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Categories

  • Comparison (3)
  • HTML & CSS (9)
  • Interesting Facts (1)
  • JavaScript (27)
    • jQuery & AJAX (18)
  • PHP and MySQL (48)
  • Security (10)
  • SEO (2)
  • Trademark (2)
  • Tutorials (5)
  • Uncategorized (1)
  • Web Hosting (19)
    • VPS Server (5)
  • WordPress (8)

Recent Posts

  • Is the Trademark valuable to your Brand or domain?
  • Ideas For Ten Fantastic Online Business From Home
  • Some best free WordPress Themes for Affiliate Marketing Websites
  • Home
  • Posts
  • Privacy Policy
  • Terms and Conditions

Built and Maintained With ♥ by AllsWeb Team

No Result
View All Result
  • Home
  • Main Home
  • PHP and MySQL
  • JavaScript
    • jQuery & AJAX
  • WordPress
  • SEO
  • Web Hosting
  • Comparison

Built and Maintained With ♥ by AllsWeb Team

Go to mobile version