Loading Animation – 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 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.

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.

Circular Progress Bar using HTML CSS & JavaScript

CodingNepal — Fri, 17 Jul 2020 04:29:00 +0000

Hello readers, Today in this blog you’ll learn how to create an Animated Circular Progress Bar using HTML CSS & JavaScript. Earlier I have shared a blog on how to create an Animated Gradient Shiny Loader. And now I’m going to create a circular progress bar with a percentage.

The Circular Progress Bar component lets you show the progress of a specific operation, using, as a progress bar, a circular SVG pattern. Changing the stroke-dash offset and stroke-dash array values of the second shape creates the fill effect.

In this program (Circular Progress Bar), at first, on the webpage, this circular progress bar is in the initial stage where there is no circle animation and the percentage of this bar is also stops at 0%. And when you refresh the browser then the circular bar creates the color fill effect and the percentage of this bar is also starts increasing. When it completed 100%, the fill effect stops filling as well the percent number also stops increasing.

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

Video Tutorial of Circular Progress Bar with the Percentage

In the video, you have seen the animation and effect of this circular bar and I hope you have understood the basic codes behind creating this program. The color fill effect of this circular bar is totally based on CSS that means using the only CSS I created the fill animation of this program. But I used JavaScript for increasing the percent number to 100%.

If you have a little bit of knowledge of JavaScript, then you can easily understand the JavaScript codes of this program and as you know CSS is too easy to understand and the color fills effect of this program is based on CSS only. If you like this program (Circular Progress Bar) 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.

Circular Progress Bar with Percent [Source Codes]

To create this program (Circular Progress Bar). 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.




   
      
         
         Circular Progress Bar | CodingNepal
         
      
      
         
            
            
            
               0%

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%;
  text-align: center;
  place-items: center;
  background: #dde6f0;
}
.circular{
  height: 100px;
  width: 100px;
  position: relative;
}
.circular .inner, .circular .outer, .circular .circle{
  position: absolute;
  z-index: 6;
  height: 100%;
  width: 100%;
  border-radius: 100%;
  box-shadow: inset 0 1px 0 rgba(0,0,0,0.2);
}
.circular .inner{
  top: 50%;
  left: 50%;
  height: 80px;
  width: 80px;
  margin: -40px 0 0 -40px;
  background-color: #dde6f0;
  border-radius: 100%;
  box-shadow: 0 1px 0 rgba(0,0,0,0.2);
}
.circular .circle{
  z-index: 1;
  box-shadow: none;
}
.circular .numb{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  font-size: 18px;
  font-weight: 500;
  color: #4158d0;
}
.circular .bar{
  position: absolute;
  height: 100%;
  width: 100%;
  background: #fff;
  -webkit-border-radius: 100%;
  clip: rect(0px, 100px, 100px, 50px);
}
.circle .bar .progress{
  position: absolute;
  height: 100%;
  width: 100%;
  -webkit-border-radius: 100%;
  clip: rect(0px, 50px, 100px, 0px);
}
.circle .bar .progress, .dot span{
  background: #4158d0;
}
.circle .left .progress{
  z-index: 1;
  animation: left 4s linear both;
}
@keyframes left {
  100%{
    transform: rotate(180deg);
  }
}
.circle .right{
  z-index: 3;
  transform: rotate(180deg);
}
.circle .right .progress{
  animation: right 4s linear both;
  animation-delay: 4s;
}
@keyframes right {
  100%{
    transform: rotate(180deg);
  }
}
.circle .dot{
  z-index: 2;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 50%;
  height: 10px;
  margin-top: -5px;
  animation: dot 8s linear both;
  transform-origin: 0% 50%;
}
.circle .dot span {
  position: absolute;
  right: 0;
  width: 10px;
  height: 10px;
  border-radius: 100%;
}
@keyframes dot{
  0% {
    transform: rotate(-90deg);
  }
  50% {
    transform: rotate(90deg);
    z-index: 4;
  }
  100% {
    transform: rotate(270deg);
    z-index: 4;
  }
}

That’s all, now you’ve successfully created a Circular Progress Bar 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.

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.

Windows Preloader using HTML & CSS

CodingNepal — Thu, 11 Jun 2020 08:26:00 +0000

Hello readers, Today in this blog you’ll learn how to create Windows Preloader using only HTML & CSS. Earlier I have shared two blog posts on how to create Loading Animation or Loader but one of my viewers requested me to create Windows Loader. So now it’s time to create this program (Windows Preloader or Loader).

What is a preloader? Preloaders (also known as loaders) are what you see on the webpage screen while the rest of the page’s content is still loading. Loader helps to entertain the visitors or content’s viewers while the rest pages are still loading. And preloaders help to maintain the bounce rate of the website.

As you have seen in the Windows Screen while you switch on the PC/Laptop there is shown rotating dots or loader with “please wait” text and while the loader is rotating after a few seconds, those dots are disappeared for few seconds, and again appear.

In this program, this loader is the same as the windows starting loader which rotates clockwise infinitely. When this loader at 76% to 100%, these loader dots are disappeared and again these dots appear when the loader is at 40%.

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

Video Tutorial of Windows Preloader or Loader

If you’re a beginner and you know HTML & CSS then you can also create this type of Preloader or Loader program and use it on your websites and projects. As I’ve already told you why preloader is important to maintain the bounce rate of the website and entertain the content viewers.

If you like this program (Windows Preloader or 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.

Windows Loader or Preloader [Source Codes]

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




   
      
      Windows Loader | CodingNepal
      
   
   
      
         
            
               
            
            
               
            
            
               
            
            
               
            
            
               
            
            
               
            
         
         
            Please wait

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;
}
body{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  text-align: center;
  background: #0079d7;
}
.container{
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
}
.wrapper{
  position: absolute;
  top: -35px;
  transform: scale(1.5);
}
.loader{
  height: 25px;
 width: 1px;
 position: absolute;
 animation: rotate 3.5s linear infinite;
}
.loader .dot{
  top: 30px;
 height: 7px;
 width: 7px;
 background: #fff;
 border-radius: 50%;
 position: relative;
}
.text{
  position: absolute;
  bottom: -85px;
  font-size: 25px;
  font-weight: 400;
  font-family: 'Poppins',sans-serif;
  color: #fff;
}
@keyframes rotate {
  30%{
    transform: rotate(220deg);
  }
  40%{
  transform: rotate(450deg);
    opacity: 1;
 }
 75%{
  transform: rotate(720deg);
  opacity: 1;
 }
 76%{
  opacity: 0;
 }
 100%{
  opacity: 0;
  transform: rotate(0deg);
 }
}
.loader:nth-child(1){
  animation-delay: 0.15s;
}
.loader:nth-child(2){
  animation-delay: 0.3s;
}
.loader:nth-child(3){
  animation-delay: 0.45s;
}
.loader:nth-child(4){
  animation-delay: 0.6s;
}
.loader:nth-child(5){
  animation-delay: 0.75s;
}
.loader:nth-child(6){
  animation-delay: 0.9s;
}

That’s all, now you’ve successfully created a Windows Preloader using 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.

Heart Shape Preloader in HTML & CSS

CodingNepal — Wed, 03 Jun 2020 13:25:00 +0000

Hello readers, Today in this blog you’ll learn how to create a Heart Shape Preloader (Loader) using only HTML & CSS. Earlier I have shared a Color Changing Shiny Loader using HTML & CSS. Now it’s time to create a Heart Shape Preloader.

A preloader (also known as the loader) is an animation indicating the progress of a page-load in the background. Preloaders convince users that the website is running on loading the page. This can help enhance the user experience and reduce the overall bounce rate.

Today in this blog, I’ll share with you an Animated Heart Shape Preloader. This loader rotates 720deg infinitely. While this loader is active you can see there are two shapes of the loader, one shape is a round shape and another one is a heart shape. This loader changes or animates a round shape to heart shape smoothly while it’s rotating.

If you’re feeling difficult to understand what I am saying. You can watch a full video tutorial on this program (Heart Shape Preloader or Loader).

Video Tutorial of Heart Shape Preloader or Loader

If you like this program (Heart Shape Preloader) 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’re a beginner and you have some knowledge of HTML & CSS then you can also create this type of loader or loading animation. You can use this preloader on your websites and projects easily. This loader helps your visitors and viewers entertained while the rest of the page’s content is still loading.

Heart Shape Loader Animation [Source Codes]

To create this program (Heart Shape Preloader). 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.




   
      
      Heart Shape Preloader | 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.

.container{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.container .preloader{
  animation: rotate 2.3s cubic-bezier(0.75, 0, 0.5, 1) infinite;
}
@keyframes rotate {
  50%{
    transform: rotate(360deg);
  }
  100%{
    transform: rotate(720deg);
  }
}
.preloader span{
  position: absolute;
  display: block;
  height: 64px;
  width: 64px;
  background: #3fc1f2;
  border: 1px solid #3fc1f2;
  border-radius: 100%;
}
.preloader span:nth-child(1){
  transform: translate(-28px, -28px);
  animation: shape_1 2.3s cubic-bezier(0.75, 0, 0.5, 1) infinite;
}
@keyframes shape_1 {
  60%{
    transform: scale(0.4);
  }
}
.preloader span:nth-child(2){
  transform: translate(28px, -28px);
  animation: shape_2 2.3s cubic-bezier(0.75, 0, 0.5, 1) infinite;
}
@keyframes shape_2 {
  40%{
    transform: scale(0.4);
  }
}
.preloader span:nth-child(3){
  position: relative;
  border-radius: 0px;
  transform: scale(0.98) rotate(-45deg);
  animation: shape_3 2.3s cubic-bezier(0.75, 0, 0.5, 1) infinite;
}
@keyframes shape_3 {
  50%{
    border-radius: 100%;
    transform: scale(0.5) rotate(-45deg);
  }
  100%{
    transform: scale(0.98) rotate(-45deg);
  }
}
.shadow{
  position: relative;
  top: 30px;
  left: 50%;
  transform: translateX(-50%);
  display: block;
  height: 16px;
  width: 64px;
  border-radius: 50%;
  background-color: #d9d9d9;
  border: 1px solid #d9d9d9;
  animation: shadow 2.3s cubic-bezier(0.75, 0, 0.5, 1) infinite;
}
@keyframes shadow {
  50%{
    transform: translateX(-50%) scale(0.5);
    border-color: #f2f2f2;
  }
}

That’s all, now you’ve successfully created a Heart Shape Preloader in HTML & CSS. If your code does not work or you’ve faced any error/problem then please comment down or contact us from the contact page.

Loading Animation – 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 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]

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]

Circular Progress Bar using HTML CSS & JavaScript

Video Tutorial of Circular Progress Bar with the Percentage

You might like this:

Circular Progress Bar with Percent [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]

Windows Preloader using HTML & CSS

Video Tutorial of Windows Preloader or Loader

Windows Loader or Preloader [Source Codes]

Heart Shape Preloader in HTML & CSS

Video Tutorial of Heart Shape Preloader or Loader

Heart Shape Loader Animation [Source Codes]