CSS Loader – CodingNepal https://www.codingnepalweb.com CodingNepal is a blog dedicated to providing valuable and informative content about web development technologies such as HTML, CSS, JavaScript, and PHP. Tue, 02 May 2023 12:20:44 +0000 en-US hourly 1 https://wordpress.org/?v=6.4.2 Create Loading Spinner in HTML & CSS https://www.codingnepalweb.com/create-loading-spinner-html-css/ https://www.codingnepalweb.com/create-loading-spinner-html-css/#respond Thu, 24 Nov 2022 21:11:21 +0000 https://www.codingnepalweb.com/?p=4142 Create Loading Spinner in HTML & CSShttps://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.

You May Like This Video:

Loading Spinner in HTML CSS [Source Codes]

To create CSS Loader Spinner, follow the given steps line by line:
  1. Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
  2. Create an index.html file. The file name must be index and its extension .html
  3. Create a style.css file. The file name must be style and its extension .css
  4. 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.

<!DOCTYPE html>
<!-- Coding By CodingNepal - codingnepalweb.com -->
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title> Loading Spinner | CoderGirl </title>
  <!---Custom Css File!--->
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <div class="spinner"></div>
  </div>
</body>
</html>

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.

 

]]> https://www.codingnepalweb.com/create-loading-spinner-html-css/feed/ 0 Circle Loader with Check-mark Animation using only HTML & CSS https://www.codingnepalweb.com/circle-loader-with-check-mark-animation/ https://www.codingnepalweb.com/circle-loader-with-check-mark-animation/#respond Sat, 25 Jul 2020 06:32:00 +0000 https://codingnepalweb.com/2020/07/25/circle-loader-with-check-mark-animation-using-only-html-css/ Circle Loader with Check-mark Animation using only HTML & CSS

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.

You might like this:

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.

<!DOCTYPE html>
<!-- Created By CodingNepal -->
<html lang="en" dir="ltr">
   <head>
      <meta charset="utf-8">
      <title>Loader with Checkmark Animation | CodingNepal</title>
      <link rel="stylesheet" href="style.css">
   </head>
   <body>
      <input type="checkbox" id="check">
      <label for="check">
         <div class="check-icon"></div>
      </label>
   </body>
</html>

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.

]]> https://www.codingnepalweb.com/circle-loader-with-check-mark-animation/feed/ 0 Loading Screen Animation using HTML CSS & JavaScript https://www.codingnepalweb.com/loading-screen-animation-html-css-javascript/ https://www.codingnepalweb.com/loading-screen-animation-html-css-javascript/#comments Sun, 21 Jun 2020 08:59:00 +0000 https://codingnepalweb.com/2020/06/21/loading-screen-animation-using-html-css-javascript/ Loading Screen Animation using HTML CSS & JavaScript

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.

<!DOCTYPE html>
<!-- Created By CodingNepal -->
<html lang="en" dir="ltr">
   <head>
      <meta charset="utf-8">
      <title>Screen Loader | CodingNepal</title>
      <link rel="stylesheet" href="style.css">
   </head>
   <body>
      <div class="loader">
         <div class="ring"></div>
      </div>
      <div class="content">
         <div class="image"></div>
         <div class="text">
            <div class="title">
               Screen Loader in HTML CSS & JavaScript
            </div>
            <p>
               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!
            </p>
            <p>
               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.
            </p>
         </div>
      </div>
      <script>
         const loader = document.querySelector(".loader");
         window.onload = function(){
           setTimeout(function(){
             loader.style.opacity = "0";
             setTimeout(function(){
               loader.style.display = "none";
             }, 500);
           },1500);
         }
      </script>
   </body>
</html>

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.

]]> https://www.codingnepalweb.com/loading-screen-animation-html-css-javascript/feed/ 5 Windows Preloader using HTML & CSS https://www.codingnepalweb.com/windows-preloader-using-html-css/ https://www.codingnepalweb.com/windows-preloader-using-html-css/#comments Thu, 11 Jun 2020 08:26:00 +0000 https://codingnepalweb.com/2020/06/11/windows-preloader-using-html-css/ Windows Preloader using HTML & CSS

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.

<!DOCTYPE html>
<!-- Created By CodingNepal -->
<html lang="en" dir="ltr">
   <head>
      <meta charset="utf-8">
      <title>Windows Loader | CodingNepal</title>
      <link rel="stylesheet" href="style.css">
   </head>
   <body>
      <div class="container">
         <div class="wrapper">
            <div class="loader">
               <div class="dot"></div>
            </div>
            <div class="loader">
               <div class="dot"></div>
            </div>
            <div class="loader">
               <div class="dot"></div>
            </div>
            <div class="loader">
               <div class="dot"></div>
            </div>
            <div class="loader">
               <div class="dot"></div>
            </div>
            <div class="loader">
               <div class="dot"></div>
            </div>
         </div>
         <div class="text">
            Please wait
         </div>
      </div>
   </body>
</html>

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.

]]> https://www.codingnepalweb.com/windows-preloader-using-html-css/feed/ 12 Heart Shape Preloader in HTML & CSS https://www.codingnepalweb.com/heart-shape-preloader-html-css/ https://www.codingnepalweb.com/heart-shape-preloader-html-css/#respond Wed, 03 Jun 2020 13:25:00 +0000 https://codingnepalweb.com/2020/06/03/heart-shape-preloader-in-html-css/ Heart Shape Preloader in HTML & CSS

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.

<!DOCTYPE html>
<!-- Created By CodingNepal -->
<html lang="en" dir="ltr">
   <head>
      <meta charset="utf-8">
      <title>Heart Shape Preloader | CodingNepal</title>
      <link rel="stylesheet" href="style.css">
   </head>
   <body>
      <div class="container">
         <div class="preloader">
            <span></span>
            <span></span>
            <span></span>
         </div>
         <div class="shadow"></div>
      </div>
   </body>
</html>

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.

]]> https://www.codingnepalweb.com/heart-shape-preloader-html-css/feed/ 0 Animated Gradient Shiny Loader with HTML CSS & JavaScript https://www.codingnepalweb.com/animated-gradient-shiny-loader-javascript/ https://www.codingnepalweb.com/animated-gradient-shiny-loader-javascript/#comments Fri, 22 May 2020 08:12:00 +0000 https://codingnepalweb.com/2020/05/22/animated-gradient-shiny-loader-with-html-css-javascript/ Animated Gradient Shiny Loader with HTML CSS & JavaScript

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.

<!DOCTYPE html>
<!-- Created By CodingNepal -->
<html lang="en" dir="ltr">
   <head>
      <meta charset="utf-8">
      <title>Gradient Ring or Loader</title>
      <link rel="stylesheet" href="style.css">
   </head>
   <body>
      <div class="outer"></div>
      <div class="inner">
         <span>0%</span>
      </div>
      <!-- This is Javascript Code -->
      <script>
         let outer = document.querySelector(".outer");
         let inner = document.querySelector(".inner");
         let percent = document.querySelector("span");
         let count = 0;
         inner.addEventListener('click', function(){
           let loading = setInterval(function(){
             if(count == 100){
               outer.classList.remove("active-loader");
               outer.classList.add("active-loader-2");
               clearInterval();
             }else{
               count = count + 1;
               percent.textContent = count + '%';
               outer.classList.add("active-loader");
             }
           },200);
         });
      </script>
   </body>
</html>

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.

]]> https://www.codingnepalweb.com/animated-gradient-shiny-loader-javascript/feed/ 7 Color Changing Shiny Loader using HTML & CSS https://www.codingnepalweb.com/color-changing-shiny-loader-html-css/ https://www.codingnepalweb.com/color-changing-shiny-loader-html-css/#comments Tue, 19 May 2020 09:06:00 +0000 https://codingnepalweb.com/2020/05/19/color-changing-shiny-loader-using-html-css/ Color Changing Shiny Loader using HTML & CSS

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

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

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

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

Video Tutorial of Color Changing Shiny Loader

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

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

Preloader Design in HTML & CSS [Source Codes]

As always, before sharing the codes of this program (Color Changing Shiny Loader). Let’s a few talks about the main tags and codes of this program. In the HTML File, first I created a <div> with the class name “center” and placed all other tags inside it. Then I created another <div> with the class name “ring”. Inside <div class=”center”> tag I created a <span> tag.

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

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

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

<!DOCTYPE html>
<!-- Created By CodingNepal -->
<html lang="en" dir="ltr">
   <head>
      <meta charset="utf-8">
      <title>Loading Animation</title>
      <link rel="stylesheet" href="style.css">
   </head>
   <body>
      <div class="center">
         <div class="ring"></div>
         <span>loading...</span>
      </div>
   </body>
</html>

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

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

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

]]> https://www.codingnepalweb.com/color-changing-shiny-loader-html-css/feed/ 5