Preloader or Loader – CodingNepal

Neumorphism Loading Spinner in HTML & CSS

CodingNepal — Wed, 01 Feb 2023 21:11:21 +0000

Building a Loading Spinner can improve HTML, CSS, and animation skills. Neumorphism UI enhances user experience by using light and shadow. Improving hierarchy and relationships between elements in the interface.

In this article, you will discover how to craft an attractive Loading Spinner utilizing Neumorphism UI with HTML and CSS. Even if you have no prior experience in HTML and CSS, you will be able to make this spinner with ease. Recently I have provided a blog on creating a Card Slider. I hope that will also be beneficial for you.

A loading spinner indicates page loading with animation. Neumorphism UI is a design style combining 3D elements and shadows for a subtle look with depth. “Neumorphism” is a term combining “new” and “skeuomorphism.”

Video Tutorial of Neumorphism Loading Spinner

If you would like to create this Neumorphism Loading Spinner step by step the full video tutorial is provided below. Otherwise, you may continue reading the blog.

Steps to create Loading Spinner in HTML & CSS

We will create this Neumorphims Loading Spinner in two steps using HTML and CSS.

1. File Structure

For starters, we will establish a new directory for our project. You can name it as you wish and within that directory, create two files named index.html and style.css. These files will hold the HTML and CSS code required for the Neumorphism Loading Spinner.

2. Creating the Neumorphism Loading Spinner

In the next step, we will design the layout and enhance the appearance of the spinner using HTML and CSS. To do this, add the following HTML code to your index.html file to establish the basic structure of the spinner.




  
    
    
    
    Neumorphism Loading Spinner

In your style.css file, add the following CSS code to style the loading spinner. If you want, you can change the font, size, color, and background of the loading spinner by slightly modifying this code.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f1f1f1;
}
.wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 300px;
  width: 300px;
  border-radius: 50%;
  box-shadow: inset -10px -10px 15px rgba(255, 255, 255, 1),
    inset 10px 10px 10px rgba(0, 0, 0, 0.1);
}
.wrapper::before {
  content: "";
  position: absolute;
  height: 200px;
  width: 200px;
  border-radius: 50%;
  box-shadow: -10px -10px 15px rgba(255, 255, 255, 1),
    10px 10px 10px rgba(0, 0, 0, 0.1);
}
span {
  height: 186px;
  width: 220px;
  position: absolute;
  animation: rotate 5s linear infinite;
}
@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}
span::before {
  content: "";
  position: absolute;
  height: 30px;
  border-radius: 50%;
  width: 30px;
  background: linear-gradient(45deg, #336dff, #5c89ff);
  box-shadow: 0 5px 10px rgb(0 0 0 / 30%);
}

By following the steps in this blog post, you’ve learned how to create a Neumorphism Loading Spinner in HTML and CSS.

If you encounter any problems or your code is not working as expected, you can download the source code files of this loading spinner by clicking on the given download button. It’s free, and a zip file will be downloaded that contains the project folder with source code files.

Create a Music Loading Animation in HTML & CSS

CodingNepal — Fri, 20 Jan 2023 21:11:21 +0000

As users, we’re all too familiar with the dreaded loading screen. Whether it’s waiting for a website to load or a mobile app to start up, it can be frustrating to stare at a static or spinning progress bar. However, there is a way to make this experience more enjoyable for your users – by incorporating a musical loading animation.

A musical loading animation is a creative way to add a fun and interactive element to your user interface. It can be as simple as a progress bar that changes color or shape in time with the music, or as complex as a full-fledged animation that tells a story while the user waits.

This blog will teach you how to create a Music Loading Animation in HTML & CSS. The blog will cover everything from the basics of creating a Music Loading Animation in HTML, to styling it with CSS. Recently I have provided a blog on Login & Registration Form in HTML & CSS. I hope you find this blog helpful as well.

If you’re curious about how the Music Loading Animation works, look at the preview I have provided below. I have explained the HTML and CSS code I used to make this Musical Loading Animation.

Video Tutorial Of Music Loading Animation

Steps To Create a Music Loading Animation

We will create this Login & Registration Form in two steps:

File Structure of the Project
Creating Login & Registration From

1. File Structure of the project

To build this Music Loading Animation, we’ll be using two separate files – index.html and style.css. These files will contain the HTML & CSS code respectively needed to bring the Music Loading Animation. Let’s get started by setting up these files and adding the basic code.

Once you have made these files, you can proceed to the next step of creating your Music Loading Animation.

2. Creating Music Loading Animation

In the second step, we will design the user interface for our Music Loading Animation and style it using HTML and CSS. Once the user interface is complete, we will use animation to animate this Music Loading Animation.

In the index.html file, add the following HTML code to create the basic structure of the animated Music Loader.





  
  
  
  Music Loading Animation
  
  


  
    
    
    
    
    
  


 
Copy Codes

In the style.css file, add the following CSS code to add styles and add the animation so that it looks like all the boxes are loading one after the other If you want, you can change the color, background and size of the button in this code.

/* Import Google font - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
body{
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #000;
}
.animation{
  height: 95px;
  display: flex;
  transform: rotate(180deg);
}
.animation span{
  width: 38px;
  margin: 0 2px;
  border-radius: 6px;
  /* background-color: #fff; */
  animation: loader 2s infinite;
}
@keyframes loader{
  0%, 100%{
    height: 15px;
    background: #0081C9;
  }
  25%{
    height: 95px;
    background: #FFB100;
  }
  50%{
    height: 50px;
    background: #54B435;
  }
  75%{
    height: 95px;
    background: #FF6464;
  }
}
.animation span:nth-child(1){
  animation-delay: .2s;
}
.animation span:nth-child(2){
  animation-delay: .4s;
}
.animation span:nth-child(3){
  animation-delay: .6s;
}
.animation span:nth-child(4){
  animation-delay: .8s;
}
.animation span:nth-child(5){
  animation-delay: 1s;
}

Conclusions and Final Words

By following the steps you have successfully created a Music Loading Animation. There are lots of CSS animations you can find on this website to enhance your skills in HTML & CSS.

If you found this blog helpful, please consider sharing it with others. Your support helps us continue creating valuable content and resources for the development community. Thank you for your support!

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.

Border Loading Animation in HTML CSS & JavaScript

CodingNepal — Sat, 08 Oct 2022 21:11:20 +0000

Hello there, as usual, today you will learn to create exciting projects, Card’s Border Loading Animation, and the animated percentage inside it from 0 to 100 in HTML CSS and JavaScript. As you know there are lots of Card Designs that I have already created and they are available on this blog, but today’s project will be different and exciting.

Border Animation means the animation that happens with the border of any stuff like a card and others. Percentage animation means the increase of the number from 0 to 100%. You can see this type of loading animation in different websites and applications while we are exporting something from it.

Take a quick look at the given image of our project [Border Loading Animation with Percentage], at the right side you can see there is a card with a black border about it. At the top right side, there is a white border and inside the card, there is a percentage.

Basically, when the webpage is reloaded, the white border starts to rotate around that card, and along with the border, the percentage starts animating as well from 0 to 100%. When the percentage becomes 100 the border stops animating and the card’s border color changed from black to white.

To watch the real demo of this project [Border Loading Animation with Percentage] how it animates and all the HTML CSS and JavaScript code that I have used to create this animation, I have provided a full video tutorial of this project [Border Loading Animation with Percentage].

Border Loading Animation in HTML CSS JavaScript

I have provided all the HTML CSS & JavaScript code that I used to create this project [Border Loading Animation with Percentage], before getting into the source code file, I would like to explain the given video tutorial briefly.

As you have seen in the video tutorial when the webpage is reloaded the border and percentage number started animating and after that when the percentage number became 100 it stopped to animate and the card border color changed from dark to white. To make that card and border animation and the percentage I used HTML and CSS to animate the percentage number and to make border white after I used some JavaScript code.

I believe now you can make this project [Border Loading Animation with Percentage], easily by using HTML CSS, and JavaScript. If you are feeling difficulty creating this card and its border animation with percentages, I have provided all the source codes below. From there you copy or download all the source code files.

You Could Like This:

Border Loading Animation [Source Codes]

To create a Border Loading Animation using HTML CSS & JavaScript, 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 source codes of this Border Loading Animation by clicking on the given download button.

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




  
    
    
    
    Border Loading Animaton
    
  
  
    
      0%

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

/* Google Fonts - Poppins */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
body {
  height: 100vh;
  background-color: #131221;
}
body,
.container,
.overlay {
  display: flex;
  align-items: center;
  justify-content: center;
}
.container {
  position: relative;
  height: 450px;
  width: 350px;
  border-radius: 16px;
  background-color: #fff;
  overflow: hidden;
}
.container.active {
  background-color: #000;
}
.container::before {
  content: "";
  position: absolute;
  height: 650px;
  width: 650px;
  background-image: conic-gradient(transparent, transparent, transparent, #fff);
}
.container.active:before {
  animation: rotate 4s linear infinite;
}
@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.container .overlay {
  position: absolute;
  height: 440px;
  width: 340px;
  font-size: 40px;
  font-weight: 500;
  color: #fff;
  border-radius: 12px;
  background-color: #131221;
}

That’s all, now you’ve successfully created a Dynamic Calendar App in HTML CSS & JavaScript. If your code doesn’t work or you’ve faced any problems, please download the source code files from the given download button. It is free and a zip file will be downloaded that contains the project folder with source code files.

Create Circular Progress Bar in HTML CSS & JavaScript

CodingNepal — Wed, 15 Jun 2022 21:11:20 +0000

Hello friend, I hope you are doing and creating well. Today you are going to learn to create a Circular Progress Bar in HTML CSS & JavaScript only, I will not any SVG code. There are lots of Progress Bar I have created that are horizontally progressed. Today’s progress will be circular and it will also show the percentage that it has progressed.

Circular Progress Bar is the animation of a progressing bar in a circular motion and it is used to display information like skills in some field, knowledge, and as like this. You may have seen the circular progress bar on someone’s portfolio website, where they display the ability of something that they have in the percentage value.

Have a quick look at the given image of our project [Animated Circular Progress], on the webpage. As you have seen the bluish-purple color circle is not fully closed and inside it, the value of the circle or that shape has displayed. Actually when you refreshed the webpage that will start to progress from 0 and stops at 90%. Bottom of the circular progress bar there is the text “HTML & CSS”, For example, we can understand it, the knowledge of HTML & CSS is 90%

You can watch the real demo of this project [Animated Circular Progress], by watching the video tutorial that I have given below, and of course, you will also get the idea, of how HTM and CSS code work behind this circular progressing bar.

Create Circular Progress Bar | Skills Bar | Video Tutorial

I have provided all the HTML CSS and JavaScript code that I have used to create this Circular Progress Bar, before getting into the source code file, I would like to briefly explain the video tutorial.

As you have seen in the video tutorial of our project [Animated Circular Progress Bar] when I refreshed the webpage the circle and the percentage value, started to progress from zero. As you have seen in the video, to create all the circular progressing bars I used only HTML and CSS, I did not use any SVG code, and to animate it I used some JavaScript code.

I believe, that now you can build this project [Circular Progress Bar], by using HTML CSS, and JavaScript. If you are feeling difficulty building it. I have provided all the source code files below.

Circular Progress [Source Code]

To get the following HTML CSS and JavaScript code for the Circular Progress, you need to create three files one is an HTML file and another is a CSS file and a JavaScript file. After creating these three files then you can copy-paste the given codes on your document. You can also download all source code files from the given download button.



    
    
        
        
        
         Circular Progress Bar 

        
        
                                        
    
    
        
            
                0%
            

            HTML & CSS

/* Google Fonts - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}
body{
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #7d2ae8;
}
.container{
    display: flex;
    width: 420px;
    padding: 50px 0;
    border-radius: 8px;
    background: #fff;
    row-gap: 30px;
    flex-direction: column;
    align-items: center;
}
.circular-progress{
    position: relative;
    height: 250px;
    width: 250px;
    border-radius: 50%;
    background: conic-gradient(#7d2ae8 3.6deg, #ededed 0deg);
    display: flex;
    align-items: center;
    justify-content: center;
}
.circular-progress::before{
    content: "";
    position: absolute;
    height: 210px;
    width: 210px;
    border-radius: 50%;
    background-color: #fff;
}
.progress-value{
    position: relative;
    font-size: 40px;
    font-weight: 600;
    color: #7d2ae8;
}
.text{
    font-size: 30px;
    font-weight: 500;
    color: #606060;
}

 let circularProgress = document.querySelector(".circular-progress"),
    progressValue = document.querySelector(".progress-value");

let progressStartValue = 0,    
    progressEndValue = 90,    
    speed = 100;
    
let progress = setInterval(() => {
    progressStartValue++;

    progressValue.textContent = `${progressStartValue}%`
    circularProgress.style.background = `conic-gradient(#7d2ae8 ${progressStartValue * 3.6}deg, #ededed 0deg)`

    if(progressStartValue == progressEndValue){
        clearInterval(progress);
    }    
}, speed);

Animated Loader in HTML & CSS

CodingNepal — Sun, 14 Nov 2021 21:11:19 +0000

Hello friends, as you know I have been creating a lot of JavaScript Projects, that’s why today I will create a Loader using HTML and CSS. I am sure you will love this loading animation.

Let’s have look at the given image of our program [Create a Loader in HTML & CSS], there are a total of 15 dots and they rotate at 360 deg with brighter and dimmer colors.

I have added smooth and beautiful animation. I highly recommend you to watch the real demo of this website loading animation or preloader. You will also get the idea, how all HTML and CSS codes work perfectly in this loading animation.

Animated Loader in HTML & CSS | Video Tutorial

You will get all the HTML and CSS code that I have used to create this loader or Preloader, before jumping into the source code, you need some important points to build this loading animation.

As you have seen on the video tutorial of creating loader or preloader for the website. All dots are blinking with different time intervals, which looks like they all are rotating at 360 deg. Also, you have seen, how I have created this beautiful loading animation using HTML and CSS.

I hope now you can create this type of loading animation easily, if you are feeling difficulty, don’t worry I have provided all the HTML & CSS source code below.

Loader or Pre-loader [Source Code]

To get the following HTML and CSS code for an Animated loader or preloader. You need to create two files one is an HTML file and another is a CSS file. After creating these two files then you can copy-paste the given codes on your document. You can also download all source code files from the given download button.




  
    
      Website Loading Animation | CodingLab

*{
  margin:0;
  padding: 0;
  box-sizing: border-box;
}
section{
  display: flex;
  height: 100vh;
  width: 100%;
  align-items: center;
  justify-content: center;
  background: #4070f4;
}
section .dots span{
  position: absolute;
  height: 10px;
  width: 10px;
  background: #fff;
  border-radius: 50%;
  transform: rotate(calc(var(--i) * (360deg / 15))) translateY(35px);
  animation: animate 1.5s linear infinite;
  animation-delay: calc(var(--i) * 0.1s);
  opacity: 0;
}
@keyframes animate {
 0%{
   opacity: 1;
 }
 100%{
   opacity: 0;
 }
}

Loading Animation For Website using HTML & CSS

CodingNepal — Wed, 24 Mar 2021 21:10:01 +0000

Hello friends, today in this blog, I will create Loading Animation For Website using HTML & CSS, which is also known as pre-loader. As you guys know, earlier I have built a Complete Portfolio Website using HTML CSS & JavaScript. Now I’m going to create a preloader.

Pre-loader means the sign of loading animation appears while the window or webpage takes time to open. Preloader is the important and useable programming effect for all websites or browsers which helps users to wait to open a specific browser.

The pre-loader or loading animation that we are going to create today, its image is given on the webpage. In the image, we can see four color balls with different beautiful colors. Basically in this program, all balls are moves right-left and up-down with smooth animation.

To see the real demo of this loading animation you have to watch the video tutorial of this program that I have given below. I recommend you must watch this video tutorial of this program to get an idea of how all code works.

Tutorial of Loading Animation For Website using HTML & CSS

As you see on the given tutorial of preloader animation, There is a total of four balls, I have given the main div of balls CSS property position relative and to all balls CSS property absolute to positioned them up-down and right-left. The upper ball moves down, the lower ball moves up, same as right ball moves left side, and the left ball moves on the right side at the same time which looks beautiful isn’t it?

This is the easiest tutorial for those who have basic knowledge of HTML & CSS and they can easily make this loader, for those guys who are feeling difficulty to built this loading animation, I have provided all source code below.

Loading Animation [Source Code]

To copy-paste the given code, first of all, you need to create two files on is an HTML file and another is a CSS file. After creating these two files you can copy-paste all codes in your document. You can also download all source code files from the given download button.




  
    
     Loading Animation | CodingLab

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
section{
  display: flex;
  height: 100vh;
  width: 100%;
  background: #000;
  align-items: center;
  justify-content: center;
}
.loader{
  height: 25px;
  width: 25px;
  position: relative;
  animation: rotate 5s  infinite;
}
.ball{
  position: absolute;
  height: 25px;
  width: 25px;
  border-radius: 50%;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}
.upper{
  left: 0;
  top: -22px;
  background: #2da2ff;
  animation: upper 1s linear infinite;
}
@keyframes upper {
  50%{
    top: 22px;
  }
  100%{
    top: 22px;
  }
}
.right{
  right: -22px;
  top: 0;
  background: #ff337a;
  animation: right 1s linear infinite;
}
@keyframes right {
  50%{
    right: 22px;
  }
  100%{
    right: 22px;
  }
}
.lower{
  bottom: -22px;
  left: 0;
  background: #ffff00;
  animation: lower 1s linear infinite;
}
@keyframes lower {
  50%{
    bottom: 22px;
  }
  100%{
    bottom: 22px;
  }
}
.left{
  left: -22px;
  top: 0;
  background: #00ff00;
  animation: left 1s linear infinite;
}
@keyframes left {
  50%{
    left: 22px;
  }
  100%{
    left: 22px;
  }
}

Skeleton Loading Screen Animation using only HTML & CSS

CodingNepal — Fri, 20 Nov 2020 09:38:00 +0000

Hello readers, Today in this blog you’ll learn how to create Skeleton Loading Screen Animation using only HTML & CSS. Earlier I have shared a blog on how to create a drag and drop list or draggable list in javascript and now it’s time to create skeleton loading screen animation.

A skeleton loading screen is the user interface (UI) that doesn’t hold actual content; instead, it animates the page’s layout by showing its elements in shape similar to the actual content as it is loading and becoming ready.

In this program [Skeleton Loading Screen Animation], on the webpage, there is showing skeleton loader by its element shape. This is a pure CSS program, so this skeleton screen doesn’t load actual content but you can easily show your content by removing this skeleton layer when the content loaded completely. If you’re feeling difficult to understand what I am saying. You can watch a full video tutorial on this program [Skeleton Loading Screen Animation].

Video Tutorial of Skeleton Loading Screen Animation

In the video, you have seen the skeleton ui loading screen which is created using only HTML & CSS. I hope you’ve understood the codes and concepts behind creating this program. If you’re a beginner then you can also create this type of loading screen because it’s easy to create using CSS.

If you want to load your actual content after the skeleton screen, then you can just remove this skeleton layer when your content loaded completely and you have to use other languages like JavaScript, PHP.

Skeleton Loading Screen Animation [Source Codes]

To create this program (Skeleton 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 into 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.





    
    
    Skeleton Loading Animation | CodingNepal

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.

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}
.card{
  max-width: 350px;
  width: 100%;
  background: #fff;
  padding: 30px;
  border-radius: 10px;
  border: 1px solid #d9d9d9;
}
.card .header{
  display: flex;
  align-items: center;
}
.header .img{
  height: 75px;
  width: 75px;
  background: #d9d9d9;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
}
.header .details{
  margin-left: 20px;
}
.details span{
  display: block;
  background: #d9d9d9;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}
.details .name{
  height: 15px;
  width: 100px;
}
.details .about{
  height: 13px;
  width: 150px;
  margin-top: 10px;
}
.card .description{
  margin: 25px 0;
}
.description .line{
  background: #d9d9d9;
  border-radius: 10px;
  height: 13px;
  margin: 10px 0;
  overflow: hidden;
  position: relative;
}
.description .line-1{
  width: calc(100% - 15%);
}
.description .line-3{
  width: calc(100% - 40%);
}
.card .btns{
  display: flex;
}
.card .btns .btn{
  height: 45px;
  width: 100%;
  background: #d9d9d9;
  border-radius: 25px;
  position: relative;
  overflow: hidden;
}
.btns .btn-1{
  margin-right: 8px;
}
.btns .btn-2{
  margin-left: 8px;
}
.header .img::before,
.details span::before,
.description .line::before,
.btns .btn::before{
  position: absolute;
  content: "";
  height: 100%;
  width: 100%;
  background-image: linear-gradient(to right, #d9d9d9 0%, rgba(0,0,0,0.05) 20%, #d9d9d9 40%, #d9d9d9 100%);
  background-repeat: no-repeat;
  background-size: 450px 400px;
  animation: shimmer 1s linear infinite;
}
.header .img::before{
  background-size: 650px 600px;
}
.details span::before{
  animation-delay: 0.2s;
}
.btns .btn-2::before{
  animation-delay: 0.22s;
}
@keyframes shimmer {
  0%{
    background-position: -450px 0;
  }
  100%{
    background-position: 450px 0;
  }
}

That’s all, now you’ve successfully created a Skeleton Loading Screen Animation using only HTML & CSS. If your does code not work or you’ve faced any error/problem then please download the source code files from the given download button. It’s free and a .zip file will be downloaded then you’ve to extract it.

Circle Loader with Check-mark Animation using only HTML & CSS

CodingNepal — Sat, 25 Jul 2020 06:32:00 +0000

Hello readers, Today in this blog you’ll learn how to create a Circle Loader with Check-mark Animation using only HTML & CSS. Earlier I have shared a blog on how to create a Color Changing Shiny Loader using HTML & CSS. That loader is the same as this loader but there is no check-mark animation on that loader. But in this program, there is a check-mark animation.

Preloaders (also known as loaders) are what you see on the screen while the rest of the page’s content is still loading. Loaders are simple or complex animations that used to keep your visitors and content viewers entertained while the page’s content is still loading.

In this program (Circle Loader with Check-mark Animation), this loader rotates 360deg infinitely with changing its border-color at a certain time but when you click on this loader, this loader stops rotating and there is shown a check-mark icon with smooth animation which indicates that the loading process has been completed.

If you’re feeling difficult to understand what I am saying. You can watch a full video tutorial on this program (Circle Loader with Check-mark Animation).

Video Tutorial of Circle Loader with Check-mark Animation

In the video, you have seen the color-changing loader with checkmark animation. Generally, whenever we want the click animation we used the JavaScript click event function but in this program, I’ve used an HTML input type checkbox tag to create click animation and control this checkbox with the label tag as you’ve seen in the video.

If you like this program (Circle Loader with Check-mark 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. You can use this program on your projects, websites, and HTML pages.

Circle Loader with Check-mark Animation [Source Codes]

To create this program (Circle Loader with Check-mark Animation). 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.




   
      
      Loader with Checkmark Animation | CodingNepal

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;
}
html,body{
  display: grid;
  height: 100%;
  place-items: center;
  background: #000;
}
label{
  position: relative;
  height: 125px;
  width: 125px;
  display: inline-block;
  border: 2px solid rgba(255,255,255,0.2);
  border-radius: 50%;
  border-left-color: #5cb85c;
  animation: rotate 1.2s linear infinite;
}
@keyframes rotate {
  50%{
    border-left-color: #9b59b6;
  }
  75%{
    border-left-color: #e67e22;
  }
  100%{
    transform: rotate(360deg);
  }
}
label .check-icon{
  display: none;
}
label .check-icon:after{
  position: absolute;
  content: "";
  top: 50%;
  left: 28px;
  transform: scaleX(-1) rotate(135deg);
  height: 56px;
  width: 28px;
  border-top: 4px solid #5cb85c;
  border-right: 4px solid #5cb85c;
  transform-origin: left top;
  animation: check-icon 0.8s ease;
}
@keyframes check-icon {
  0%{
    height: 0;
    width: 0;
    opacity: 1;
  }
  20%{
    height: 0;
    width: 28px;
    opacity: 1;
  }
  40%{
    height: 56px;
    width: 28px;
    opacity: 1;
  }
  100%{
    height: 56px;
    width: 28px;
    opacity: 1;
  }
}
input{
  display: none; 
}
input:checked ~ label .check-icon{
  display: block;
}
input:checked ~ label{
  animation: none;
  border-color: #5cb85c;
  transition: border 0.5s ease-out;
}

That’s all, now you’ve successfully created a Circle Loader with Check-mark Animation using only HTML & CSS. If your code doesn’t work or you’ve faced any error/problem then please comment down or contact us from the contact page.

Preloader or Loader – CodingNepal

Neumorphism Loading Spinner in HTML & CSS

Video Tutorial of Neumorphism Loading Spinner

Steps to create Loading Spinner in HTML & CSS

1. File Structure

2. Creating the Neumorphism Loading Spinner

Create a Music Loading Animation in HTML & CSS

Video Tutorial Of Music Loading Animation

Steps To Create a Music Loading Animation

2. Creating Music Loading Animation

Conclusions and Final Words

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]

Border Loading Animation in HTML CSS & JavaScript

Border Loading Animation in HTML CSS JavaScript

You Could Like This:

Border Loading Animation [Source Codes]

Create Circular Progress Bar in HTML CSS & JavaScript

Create Circular Progress Bar | Skills Bar | Video Tutorial

You Might Like This:

Circular Progress [Source Code]

Animated Loader in HTML & CSS

Animated Loader in HTML & CSS | Video Tutorial

You Might Like This:

Loader or Pre-loader [Source Code]

Loading Animation For Website using HTML & CSS

Tutorial of Loading Animation For Website using HTML & CSS

You May Like This:

Loading Animation [Source Code]

Skeleton Loading Screen Animation using only HTML & CSS

Video Tutorial of Skeleton Loading Screen Animation

You might like this:

Skeleton Loading Screen Animation [Source Codes]

Circle Loader with Check-mark Animation using only HTML & CSS

Video Tutorial of Circle Loader with Check-mark Animation

You might like this:

Circle Loader with Check-mark Animation [Source Codes]