How to Add Animation Loading Process Download Button in Blogger in 2024

Introduction

The use of a custom download button with an animated loading process is a great idea if you blog in Blogger. In this guide, you will learn how to add a button with animations, timers and a choice of downloads in HTML, CSS and JavaScript.

This does not only look more professional but also keeps the user occupied especially when they are downloading big files.

Why Add a Download Button with Animation in your Blogger website?

1. Improved User Experience:Interaction is always welcome by the users and this will make them spend more time in your site.

2. Engagement:On the screen it assists in showing the progress and where download is involved in the artwork process it becomes easier with the use of an animation and a time counter.

3. Customization:This has made it also possible to set an option that downloads either automatically or through the user-interface depending on the target market.

Advantages of Using a Custom Download Button in Blogger Website

1. Increased Professionalism: Slim design with animations give you professional look of your site as you would wish it to be.

2. Control Over Download Process: Thus, you can manage the download time as well as applications’ animations in order to improve the download and, therefore, let people understand this process.

3. SEO Boost: Features as such help to combat bounce rates and retain users that in turn increases the SEO ranking of the site in question.

How to Add Download Button in Your Blogger Website

Here are the steps to Add your custom download button in Blogger:

Before continuing this tutorial, it's a good idea to make a backup of the blogger theme first. So that if something goes wrong during installation, we can easily restore it.

See Demo

1. Go to Blogger Dashboard:

2. Go to your theme Section And Click On arrow icon then click Edit html

3. Press Your keyboard ctrl+f And find plus ui users* --- Your Custom CSS goes here --- * and othar Themes Users Find </b:skin>

Than paste tha below code othar Themes Users before Closing</b:skin>And plus ui users Paste tah code after closing * --- Your Custom CSS goes here --- *Text then Save your theme

#download-button-cnt{
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: center;
}


.isRajDownBtn{
  
  background-image: linear-gradient(to right, rgb(201, 38, 241), rgb(251, 66, 255));
  color:white;
  font-weight: 500;
  font-size: 18px;
  font-family: Axiforma, -apple-system, system- ui, BlinkMacSystemFont, "Helvetica Neue", Helvetica;
  flex-grow:1;
  box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(207, 87, 248, 0.5) 0px 10px 40px 0px;
  padding: 12px 64px;
  border-radius: 8px;
  min-height: 50px;
  line-height: 30px;
  transition:0.3s;
  border: none;
  outline: none;
  cursor: pointer;
    -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
   user-select: none;
animation-duration: 1s;
  animation-fill-mode: forwards;
}

@keyframes isRajDownBtn{
  0%{
    opacity:100;
    rotate: 0deg;
    position: absolute;
    margin-bottom: 0;
  }
  
  99%{
    rotate: 360deg;
    opacity: 0;
    position: absolute;
    
  }
  
  100%{
    display: none;
  }
}

.isRajDownBtn:hover{
  box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(207, 87, 248, 0.5) 0px 10px 80px 10px;
}

.isRajProcessCnt{
  display: none;
}




.isRajAftarCnt {  
  background-color: white;
display: flex;
height: 10px;
border: 0px solid rgba(0, 0, 0, 0.3);
overflow: hidden;
position: relative;
border-radius: 30px;
box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(207, 87, 248, 0.5) 0px 10px 40px 0px;
  animation-name: isRajAftarCnt;
  animation-duration: 2s;
  animation-fill-mode: forwards;
}

@keyframes isRajAftarCnt{
  0%{
    display: none;
    width: 0px;
  }
  
  20%{
    width: 10px;
  }
  
  20%{
    width: 100px;
  }
  
  100%{
    width: 500px;
  }
}

:root{
  /*change to my level*/

  --isRajBeforeCnt: 100%
}

.isRajAftarCnt span {
 left: 0;
  top: 0;
  color: white;
  height: 10px;
  background: #FF0087;
  position: absolute;
  font-weight: 800;
  font-size: 18px;
  line-height: 1.7;
  text-align: center;
  border-radius: 30px;
  background-image: linear-gradient(to right, rgb(201, 38, 241), rgb(251, 66, 255));
  transition: width .5s linear;
}


.isRajBeforeCnt {
  width: var(--isRajBeforeCnt);
  animation: isRajBeforeCnt 6s linear;
}



@keyframes isRajBeforeCnt {
  0% {
    width: 0%;
  }

  100% {
    width: var(--isRajBeforeCnt);
  }
}

.animationIsRaj{
  background-image: linear-gradient(to right, rgb(201, 38, 241), rgb(251, 66, 255));
  color:white;
  font-weight: 500;
  font-family: Axiforma, -apple-system, system- ui, BlinkMacSystemFont, "Helvetica Neue", Helvetica;
  flex-grow:1;
  box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(207, 87, 248, 0.5) 0px 10px 40px 0px;
  transition:0.3s;
  border: none;
  outline: none;
  cursor: pointer;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  overflow: hidden;
  display: none;
    -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
   user-select: none;
}

@keyframes animationIsRaj{
  0%{
    font-size: 0;
 padding: 0 0;
  border-radius: 0;
  min-height: 0;
  line-height: 0;
  display: none;
  }
  50%{
    font-size: 18px;
    padding: 12px 64px;
  border-radius: 8px;
  min-height: 50px;
  line-height: 30px;
  }
  
  80%{
    font-size: 25px;
    padding: 15px 79px;
  border-radius: 8px;
  min-height: 50px;
  line-height: 30px;
  }
  
  100%{
    font-size: 18px;
    padding: 12px 64px;
  border-radius: 8px;
  min-height: 50px;
  line-height: 30px;
  }
}

 @media (max-width: 780px) {
   .isRajAftarCnt{
     width: 300px;
   }
   @keyframes isRajAftarCnt{
  0%{
    width: 0px;
  }
  
  10%{
    width: 10px;
  }
  
  20%{
    width: 100px;
  }
  
  100%{
    width: 300px;
  }
}

   @keyframes isRajAftarCntEnd{
  1000%{
    width: 0px;
  }
  
  10%{
    width: 10px;
  }
  
  20%{
    width: 100px;
  }
  
  0%{
    width: 300px;
  }
}
 }

4. Go to Blogger Dashboard: Select the blog post or page where you want to add the button.

5. Switch to HTML View: They guide the user on how to switch between the visual and HTML mode in the post editor’s option so that the user can be able to insert his/her own code.

6. Insert Your Code: Use these given codes below for copying and pasting the download button HTML, and JavaScript. Also, it should not be without styling and/or animations that should be added to it if necessary.

  
  <style>
  .isRajBeforeCnt {
    animation: isRajBeforeCnt 6s linear; /* 6 seconds countdown*/
  }
  </style>
  
<div id="download-button-cnt">
  <div id="DownBtnRaj">
    <button class="download-btn isRajDownBtn" >Download</button>
    <!-- rename completed here -->
     <button class="animationIsRaj">Complete</button>
     <div class="countdown"></div>
<div class="isRajProcessCnt">
       <span class="isRajAftarCnt"><span class="isRajBeforeCnt"></span></span>
      </div>
     <script>
       function animationIsRaj(){
         const animationIsRaj = document.querySelector('.animationIsRaj');
animationIsRaj.addEventListener('click', function() {
          // Uncomment to enable click-download
 // window.location.href = "Your Click download Link here";
});
       
       }animationIsRaj()
       function DownloadTimer() {
  var timeLeft = 6;// 6 seconds countdown
  
  const countdown = document.querySelector('.countdown');
  
const download = document.querySelector('.download-btn');


const isRajAftarCnt = document.querySelector('.isRajAftarCnt');


const isRajProcessCnt = document.querySelector('.isRajProcessCnt');


download.addEventListener('click', () => {


isRajProcessCnt.style.display = "flex";
download.style.animationName = 'isRajDownBtn';




var downloadTimer = setInterval(function timeCount() {
    timeLeft--;
    
    if (timeLeft <= 0) {
countdown.style.display = 'none';


isRajAftarCnt.style.animationName = 'isRajAftarCntEnd';
isRajAftarCnt.style.animationFillMode = 'none';
setTimeout(() => {
            
       document.querySelector('.animationIsRaj').style.display = 'flex';
        isRajProcessCnt.style.display = "none";
     
        
       document.querySelector('.animationIsRaj').style.animationName = 'animationIsRaj';
        // Uncomment to enable auto-download
//      let download_href = "your-file-url-here";
     //  window.location.href = download_href;
      
      
      }, 100);
    
    }
 }, 1000);
 
});


}DownloadTimer()
     </script>
     
  </div>
</div>

7. Save and Preview: There should be a check up done before posting so as to ascertain if the animation and timer set are appropriately depicted in the blog.

Disadvantages and Considerations

1. Slower Page Load Times: In regard to this argument it is worthwhile to mention that having high rate of animation and scripts could cause less loading time of a specific page.

2. Cross-Browser Compatibility:Ensure that the animations you are creating are smooth on different browsers and different devices.

Conclusion

A few users will not understand what is meant by manual download. Such factors, however, can be nullified through practices that involve offering proper instructions, which are easily understandable. Adding an animated download button in your Blogger site would aid you to retain the classy and professional look which would be more than adequate in the year 2024.

Important

Like most tools they do come with their minor inconveniences, for example, how long it takes a page to load and or compatibility problems but in so far as engagement not to mention the SEO benefit I believe it’s a must have on any blog.

Copyright Notice: The work done in this project is original and is duly protected. If you need to use or alter it anyhow, do not forget to ask for consent from the developer. It is prohibited to copy, make copies, and distribute this project without permission. For any purposes, third parties are free to write directly to the developer.

Blog with Raj