HTML 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. Fri, 04 Jun 2021 12:00:56 +0000 en-US hourly 1 https://wordpress.org/?v=6.4.2 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