Preloader or Loader – CodingNepal

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.

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.

Animated Gradient Shiny Loader with HTML CSS & JavaScript

CodingNepal — Fri, 22 May 2020 08:12:00 +0000

Hello readers, Today in this blog you’ll learn how to create an Animated Gradient Shiny Loader or Preloader in HTML CSS & JavaScript. Earlier I have shared a Color Changing Shiny Loader using HTML & CSS only Now it’s time to create an Animated Gradient Loader with Percentage in JavaScript.

Preloaders are what you inspect on the screen while the rest of the page’s content is still loading. Preloaders or loaders are often easy or complex animations that are used to keep visitors entertained while server operations finish processing.

At first, this loader is in the initial stage, where there is a loader and 0% text or number at the center on the webpage. But when you click on that center text or number, the loader will be activated and it starts to rotates as well as the center percentage also starts to increase from 0% to 100%. When it completed 100%, the loader stops rotating.

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

Video Tutorial of Gradient Preloader in JavaScript

If you’re a beginner you can create this type of loader or preloader for learning purposes. But if you know JavaScript you can use this loader in your websites, projects, anywhere you want.

If you like this program (Animated Gradient 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.

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




   
      
      Gradient Ring or Loader
      
   
   
      
      
         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.

html,body{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  font-family: sans-serif;
  background: #240f52;
  overflow: hidden;
}
.outer{
  height: 300px;
  width: 300px;
  background: linear-gradient(135deg,#FEED07 0%,#FE6A50 5%,#ED00AA 15%,#2FE3FE 50%,#8900FF 100%);
  border-radius: 50%;
}
.inner{
  position: absolute;
  width: 275px;
  height: 275px;
  text-align: center;
  line-height: 275px;
  background: #240f52;
  border-radius: 50%;
  cursor: default;
  /* opacity: 0; */
}
.inner span{
  font-size: 60px;
  font-weight: 800;
  background: linear-gradient(135deg,#FEED07 0%,#FE6A50 5%,#ED00AA 15%,#2FE3FE 50%,#8900FF 100%);
  color: transparent;
  -webkit-background-clip: text;
  background-size: 300%;
}
.outer.active-loader{
  animation: rotate 2s ease infinite;
}
@keyframes rotate {
  to{
    transform: rotate(360deg);
  }
}
.outer.active-loader-2{
  animation: rotate2 3s ease;
}
@keyframes rotate2 {
  to{
    transform: rotate(360deg);
  }
}

That’s all, now you’ve successfully created Animated Gradient Shiny Loader with HTML CSS & JavaScript. If your code does not work or you’ve faced any error/problem then please comment down or contact us from the contact page.

Preloader or Loader – CodingNepal

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]

Loading Screen Animation using HTML CSS & JavaScript

Video Tutorial of Preloader or Loader in Website

Screen Loading Animation in HTML CSS [Source Codes]

Animated Gradient Shiny Loader with HTML CSS & JavaScript

Video Tutorial of Gradient Preloader in JavaScript