CSS Preloader – CodingNepal

Create Animated Google Loader in HTML & CSS

CodingNepal — Sun, 25 Dec 2022 21:11:21 +0000

Did you know that you can create the most popular platform Google loading animation using just a few lines of HTML and CSS code?

Today in this blog you will learn how to create an engaging and interactive loading animation that is used by Google. Whether you are a beginner or an experienced developer, creating a loading animation using HTML and CSS is a skill that is definitely worth learning. Also, recently I have provided a blog on JavaScript OTP Verification Form I hope that will also help to enhance your skills.

Loading animation is a visual indicator that is used to inform the user that a process is occurring in the background, such as data being loaded or a task is completed. Loading animations are commonly used in web and mobile applications, and can be created using a variety of programming languages and tools.

Have a look at the given image of our loading animation. As you can see, it features four circles of different colors that start moving up and down in an irregular pattern upon page load.

I have included a video tutorial below that demonstrates how to create a Google loader. By following along with the tutorial, you will be able to see a demo of the loading animation and learn how to create it step by step. Either way, you will have a better understanding of how to create a loading animation using HTML and CSS after watching the tutorial.

Create Animated Google Loader in HTML & CSS

In the video tutorial, you may have noticed four colored balls moving upwards and downward in an irregular pattern with a smooth animation. This Google loading animation was created using only HTML and CSS. To create the animation, the CSS animation property was used, and to make the balls move irregularly, the CSS animation-delay property was utilized. Overall, this loading animation was created with just a few lines of code and can be easily customized to fit your needs.

I hope that, after following the tutorial, you now have the ability to create this Animated Google Loading Animation using HTML and CSS. If you are still having difficulty with the process, I have included all of the necessary HTML and CSS code below for your reference. Feel free to use this code as a starting point or as a reference while you work on creating your own loading animation.

Animated Google Loader in HTML & CSS [Source Code]

To create Animated Google Loader in HTML & CSS, follow the given steps line by line:

Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
Create an index.html file. The file name must be index and its extension .html
Create a style.css file. The file name must be style and its extension .css

Once you create these files, paste the given codes into the specified files. If you don’t want to do these then scroll down and download the Animated Google Loader in HTML & CSS by clicking on the given download button.

First, paste the following codes into your index.html file.




  
    
    
    
    Google Loader in HTML & CSS

Second, paste the following codes into your style.css file.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  display: flex;
  height: 100vh;
  align-items: center;
  justify-content: center;
  background: #eef5fe;
}
.wrapper {
  display: flex;
  column-gap: 10px;
}
.wrapper .dot {
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background: #008ae6;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  animation: animate 1s ease-in-out infinite alternate;
}
.dot:nth-child(1) {
  animation-delay: -0.25s;
}
.dot:nth-child(2) {
  background: #e60000;
  animation-delay: -0.5s;
}
.dot:nth-child(3) {
  background: #ffcc00;
  animation-delay: -0.75s;
}
.dot:nth-child(4) {
  background: #008800;
  animation-delay: -1s;
}

@keyframes animate {
  0% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(5px);
  }
}

That’s all, now you’ve successfully created a project on Animated Google Loader in HTML & CSS. If your code doesn’t work or you’ve faced any problems, please download the source code files from the given download button. It’s free and a zip file containing the project folder with source code files will be downloaded.

Create Loading Spinner in HTML & CSS

CodingNepal — Thu, 24 Nov 2022 21:11:21 +0000

https://www.codingnepalweb.com/wp-content/uploads/2022/11/Create20Loading20Spinner20in20HTML20amp20CSS.jpg

When you click on someone’s website or application, you may have seen the loader spinner. If you are looking for a quick and easy way to create a Loading Spinner then this blog is written for you.

This blog will teach you how to create a Loading Spinner using HTML and CSS only. Loader Spinners are used in many applications and websites. Usually, this kind of animation appears when a web page is loading. In my recent blog post, I have provided more than 16 Login & Registration From Templates which could be helpful for you.

Loading spinners are used when retrieving data or performing slow computations. They notify the user that their request is being processed. To keep your visitors and content watchers engaged while the page’s content loads, you may utilize loaders.

Have a look at the given image of the Loading Spinner. As you can see on the Loading Spinner, there is one plain color background and one spinner. This loader rotates 360 degrees indefinitely and smoothly.

I have explained all the HTML and CSS code that I have used to create this CSS Loading Spinner also if you want to make this CSS Loader with me step by step, then you can watch the video tutorial that I have given below.

Create a Loading Spinner in HTML & CSS | Video tutorial

All of the HTML and CSS code that I used to create this hover animation is provided. Instead of duplicating the code or downloading the source code file, I strongly advise you to watch the full video explanation of this Navigation Menu Hover Animation. By watching the video tutorial, you can create this Navigation Menu Hover Animation.

As you have seen in the video tutorial of this Loading Spinner. This type of loading is much more attractive and enhances user satisfaction.

I hope now you can create this Loading Spinner in HTML and CSS. If you want to take all the HTML and CSS code I have used to create this CSS Loader then all the source codes are given below.

Loading Spinner in HTML CSS [Source Codes]

To create CSS Loader Spinner, follow the given steps line by line:

Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
Create an index.html file. The file name must be index and its extension .html
Create a style.css file. The file name must be style and its extension .css
Create a script.js file. The file name must be script and its extension .js

Once you create these files, paste the given codes into the specified files. If you don’t want to do these then scroll down and download the Loading Spinner by clicking on the given download button.

First, paste the following codes into your index.html file.





  
  
  
   Loading Spinner | CoderGirl

Second, paste the following codes into your style.css file.

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
.container{

  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #4285f4;
}
.spinner{
  width: 80px;
  height: 80px;
  border: 7px solid #fff;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spinner 0.7s linear infinite;
}
@keyframes spinner{
  from{}
    to{
      transform: rotate(360deg);
    }
}

That’s all, now you’ve successfully created a project on CSS Loading Spinner. If your code doesn’t work or you’ve faced any problems, please download the source code files from the given download button. It’s free and a zip file containing the project folder with source code files will be downloaded.

Loading Screen Animation using HTML CSS & JavaScript

CodingNepal — Sun, 21 Jun 2020 08:59:00 +0000

Hello readers, Today in this blog you’ll learn how to set Preloader or Loader in Website or create Loading Screen Animation using HTML CSS & JavaScript. Earlier I have shared many blogs on how to create Preloader or Loader using HTML CSS but today, I’ll teach you how to set that Loader in your website or your HTML Page.

The Preloader or Loader indicates the webpage is in the loading process. It helps to entertain your visitors or content viewers while the rest of the page’s content is still loading. Loaders may simple or complex animation that is used on websites.

Today in this blog, I’ll share with you this program (Loading Screen Animation). In the program, on the webpage, when you refresh your web page and the page’s content is starts loading, at that time, there is shown a small preloader, and after loading content the loader will be hidden automatically.

If you’re feeling difficult to understand what I am saying. You can watch a full video tutorial on this program (Loading Screen Animation).

Video Tutorial of Preloader or Loader in Website

As you have seen the actual output of our codes in the video, You can use this loader in your websites, projects, and HTML Page. If you know HTML & CSS then you can also create this type of Loader and use it on your projects. A loader helps to maintain the bounce rate of the website.

If you like this program (Loading Screen Animation) and want to get source codes. You can easily get the source codes of this program. To get the source codes you just need to scroll down.

Screen Loading Animation in HTML CSS [Source Codes]

To create this program (Preloader or Loader). First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste the following codes in your file. First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension.

Screen Loader | CodingNepal

Screen Loader in HTML CSS & JavaScript

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora dicta corporis animi maxime provident quisquam soluta ducimus optio suscipit in aperiam a dolores vitae adipisci numquam, maiores quos. Nisi ducimus culpa, atque obcaecati quos, voluptatibus, in hic nobis omnis doloremque amet optio! Amet cumque temporibus error quia unde. Vero laborum suscipit ad fuga veniam, id, quo dolores officia, deserunt rerum eveniet perferendis reiciendis. Itaque nostrum incidunt quo! Aperiam sint quod inventore vitae, sapiente ducimus voluptas doloremque. Ducimus temporibus laboriosam illo quidem, laborum officiis esse maiores doloribus aperiam accusantium sed, ullam ad fugit quam at saepe animi optio repudiandae quaerat ipsam officia est corrupti magnam veniam. Enim voluptatum totam hic dignissimos nostrum magni at nobis quos dolorem, nihil? Ipsum sapiente tempora exercitationem obcaecati, odio ratione optio, voluptatem delectus accusamus dignissimos sunt minima beatae, eveniet. Sint, explicabo, quisquam! Est aspernatur officiis omnis laboriosam, at id aliquam ea quidem quae, architecto et nisi!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id itaque excepturi officiis obcaecati accusamus alias, vero molestiae distinctio dolores quasi voluptatibus doloribus eum illo est qui, cum, deserunt eligendi at impedit quibusdam culpa suscipit. Ipsum officiis beatae quasi voluptatem magnam ut itaque consequatur quos maiores. Unde nihil aliquid, modi sapiente illo, quasi aspernatur, a cum error aut sint, placeat alias! Maxime voluptatum id tempora sed quia cupiditate laudantium veritatis minima! Impedit perspiciatis adipisci nesciunt est quod molestiae, eum minima animi, facilis fugiat ea ipsum a fuga distinctio labore aperiam officiis maxime voluptates! Ea assumenda quaerat ipsum fuga molestias illo, similique.

Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
.loader{
  position: fixed;
  height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  transition: all 0.5s;
}
.loader .ring{
  height: 45px;
  width: 45px;
  border: 5px solid #ddd;
  border-radius: 50%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.loader .ring:after{
  position: absolute;
  content: "";
  height: 100%;
  width: 100%;
  border-radius: 50%;
  border: 5px solid #ff3d00;
  border-top-color: transparent;
  animation: rotate 1.5s linear infinite;
}
@keyframes rotate {
  100%{
    transform: rotate(360deg);
  }
}
.content .image{
  background: url("bg.png") no-repeat;
  height: 100vh;
  background-size: cover;
  background-position: center;
}
.content .text{
  padding: 20px 50px;
}
.content .text .title{
  padding: 10px 0 0 0;
  font-size: 35px;
  font-weight: 700;
}
.content .text p{
  padding: 10px 0;
  text-align: justify;
}

That’s all, now you’ve successfully created a Loading Screen Animation using HTML CSS & JavaScript. If your code doesn’t work or you’ve faced any error/problem then please comment down or contact us from the contact page.

Color Changing Shiny Loader using HTML & CSS

CodingNepal — Tue, 19 May 2020 09:06:00 +0000

Hello readers, Today in this blog you’ll learn how to create a Color Changing Shiny Loader using only HTML & CSS. Previously I have shared a Star Rating Widget using HTML & CSS only. Now, it’s time to create a CSS Loader.

Preloaders (also known as loaders) are what you see on the webpage screen while the rest of the page contents is still loading. Preloaders or loaders are often easy or complex animations that are used to keep visitors entertained while server operations finish processing.

This loader rotates 360deg clockwise. In that meantime of rotating it changes their color to blue, orange, yellow, and green. That means when it completed rotates 90deg its color change blue to orange and when it completed rotates 180deg its color change from orange to yellow and when it completed rotates 360deg its color change from yellow to green. The center “loading…” text smoothly fade out and fades in when the loader is rotating.

If you’re feeling difficult to understand what I am saying. You can watch a full video tutorial on this program (Color Changing Shiny Loader).

Video Tutorial of Color Changing Shiny Loader

If you like this program (Color Changing Shiny Loader) and want to get source codes. You can easily get the source codes of this program. To get the source codes you just need to scroll down.

If you want to create a beautifully designed website and keep visitors entertained while server operations finish processing., then use any loader. Peoples which are beginners in HTML CSS, this design will the best practice and example for him/her.

Preloader Design in HTML & CSS [Source Codes]

As always, before sharing the codes of this program (Color Changing Shiny Loader). Let’s a few talks about the main tags and codes of this program. In the HTML File, first I created a

with the class name “center” and placed all other tags inside it. Then I created another

with the class name “ring”. Inside

tag I created a tag.

In the CSS File, first I reset default margins and padding to 0; and put the background color black. Then I placed all elements at the center using CSS Flex property.

After placed elements at the center, I created a square box of height: 200px and width: 200px; Then I gave a border radius of 50%; to this square, to create a circle. And using :before pseudo-element, I created a duplicate layer of circle box of the same height-width. After that, I placed that loading… text at the center of the circle box. At last, I created an animation in the ring container and give the animation name. Then using @keyframe property I call this animation and rotates this ring 360deg clockwise. Inside @keyframe I gave that ring different colors at different degrees.

To create this program (Color Changing Shiny Loader). First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste the following codes in your file. First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension.




   
      
      Loading Animation
      
   
   
      
         
         loading...

Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.

body{
  margin: 0;
  padding: 0;
  font-family: montserrat;
  background: black;
}
.center{
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}
.ring{
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  animation: ring 2s linear infinite;
}
@keyframes ring {
  0%{
    transform: rotate(0deg);
    box-shadow: 1px 5px 2px #e65c00;
  }
  50%{
    transform: rotate(180deg);
    box-shadow: 1px 5px 2px #18b201;
  }
  100%{
    transform: rotate(360deg);
    box-shadow: 1px 5px 2px #0456c8;
  }
}
.ring:before{
  position: absolute;
  content: '';
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  border-radius: 50%;
  box-shadow: 0 0 5px rgba(255,255,255,.3);
}
span{
  color: #737373;
  font-size: 20px;
  text-transform: uppercase;
  letter-spacing: 1px;
  line-height: 200px;
  animation: text 3s ease-in-out infinite;
}
@keyframes text {
  50%{
    color: black;
  }
}

That’s all, now you’ve successfully created a Color Changing Shiny Loader using HTML & CSS. If your code not work or you’ve faced any errors/problems then please comment down or contact us from the contact page.

CSS Preloader – CodingNepal

Create Animated Google Loader in HTML & CSS

Create Animated Google Loader in HTML & CSS

You May Like This:

Animated Google Loader in HTML & CSS [Source Code]

Create Loading Spinner in HTML & CSS

Create a Loading Spinner in HTML & CSS | Video tutorial

You May Like This Video:

Loading Spinner in HTML CSS [Source Codes]

Loading Screen Animation using HTML CSS & JavaScript

Video Tutorial of Preloader or Loader in Website

Screen Loading Animation in HTML CSS [Source Codes]

Color Changing Shiny Loader using HTML & CSS

Video Tutorial of Color Changing Shiny Loader

Preloader Design in HTML & CSS [Source Codes]