How we can create a simple loading screen animation using CSS? Solution: CSS Loading Screen Animation, GIF Type Preloader. Many peoples say it Loader GIF.
Maybe you have seen, too many types of loading screen animation before. There are many kinds of preloaders, there are cubic, circle, & progress bar, etc available. Nowadays many peoples using their logo as loader screen. The loading screen is for websites pages, not for the blog. But many peoples also use on the blog. I prefer to blog with the fast loading speed, that’s why I am saying that.
Today you will know how to create a simple loading screen using HTML & CSS. If you want to put it on your websites as a preloader, then you have to use JavaScript. This is just a UI, and in this loading screen, there are 4 circles moving in order infinite. That’s is the whole concept, I said before this is a simple and basic loading screen using CSS & HTML.
So, Today I am sharing CSS Loading Screen Animation with moving circles. One of my visitors ask me to create a Loading GIF, Now I understood which he was talking about. This is a beginner level thing, You can create it easily after seeing this post & understand the method.
If are you thinking now, how this basic loader animation is actually is, then see the preview given below.
Preview Of GIF Type Preloader
See this video preview to getting an idea of how this looks like.
Now you can see this visually. If you like this, then get the source code of its.
You May Also Like:
- CSS Text Fill With Hover Direction
- Custom Checkbox & Radio Buttons
- HTML CSS Form Validation
- Pure HTML & CSS Slider
CSS Loading Screen Animation Source Code
Before sharing source code, let’s talk about it. As you know this is a basic loading screen example with source code. First, I created a div with class= "loader" and put 4 divs inside it. You can also put the span inside according to your choice. And gave class name dots for all 4 divs.
Now is CSS, I put absolute position an 50% from top and left in loader divs property. Margin places it in the center of the screen. Then I gave style to 4 dots, selected by using :nth-child() property. After that, I put different animation delay (get info) for each dots or circles. For creating circle I put padding: 10px and border-radius: 50%; properties.
After that, created an animation using @keyframe. In keyframe section I changed they opacity values, opacity 0 in 0%, opacity 1 in 50%, & 0 again in 100%. And in dots section I put this animation with ease-in-out and infinite value, That’s why its repeat.
For creating this loader screen you have to create only 2 files. One for HTML, and one for CSS. Follow the steps to creating this without any error.
index.html
Create an HTML file named ‘index.html‘ and put these codes given here below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!doctype html> <!-- code by webdevtrick ( https://webdevtrick.com ) --> <html> <head> <meta charset="utf-8"> <title>CSS Loading Screen | Webdevtrick.com</title> <link href="style.css" rel="stylesheet"> </head> <body> <div class="loader"> <div class="dots"></div> <div class="dots"></div> <div class="dots"></div> <div class="dots"></div> <div class="dots"></div> </div> </body> </html> |
style.css
Now create a CSS file named ‘style.css‘ and put these codes.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
/** code by webdevtrick ( https://webdevtrick.com ) **/ body { background-color: whitesmoke; } .loader { position: absolute; top: 50%; left: 50%; } .loader .dots { position: absolute; padding: 10px; border-radius: 50%; background: #f05855; -webkit-animation: myani 1s ease-in-out 0s infinite; animation: myani 1s ease-in-out 0s infinite; } .loader .dots:nth-child(1) { -webkit-animation-delay: 0s; animation-delay: 0s; } .loader .dots:nth-child(2) { -webkit-animation-delay: 0.15s; animation-delay: 0.15s; } .loader .dots:nth-child(3) { -webkit-animation-delay: 0.30s; animation-delay: 0.30s; } .loader .dots:nth-child(4) { -webkit-animation-delay: 0.45s; animation-delay: 0.45s; } @keyframes myani { 0% { -webkit-transform: translateX(-100px); transform: translateX(-100px); opacity: 0; } 50% { opacity: 1; } 100% { -webkit-transform: translateX(100px); transform: translateX(100px); opacity: 0; } } |
That’s It. Now you have successfully created a CSS Loading Screen Animation. In other words, the Animated GIF Type Loader Using HTML & CSS. If you have any doubt or question comment down below.
Thanks For Visiting, Keep Visiting.
How to add this in wordpress site
Then you have to add JavaScript.
Try this..
// Add specific CSS class by filter
add_filter( 'body_class', 'my_class_names' );
function my_class_names( $classes ) {
// add 'class-name' to the $classes array
$classes[] = 'preloader-visible';
// return the $classes array
return $classes;
}
// Add preloader style
add_action('wp_head', function(){ ?>
If I can help you then massage me on facebook - https://www.facebook.com/webdevtrick/
How to get homepage after preloading effect
You can put javascript with a delay between head section to activate the preloader.
can you give a example for JavaScript needed for adding homepage after preloading effect.
Ok I will Post Soon