Animated Project Download Button UI

Animated Project Download Button UI
Code Snippet:Download file
Author: ValdemaruS
Published: January 3, 2024
Last Updated: January 22, 2024
Downloads: 160
License: MIT
Edit Code online: View on CodePen
Read More

This lightweight code snippet helps you to create an animated project download button UI. It showcases file details elegantly, offering a visually appealing interface. The download button, adorned with FontAwesome icons, animates upon loading. The progress bars below indicate file type distribution, enhancing user experience. Ideal for presenting project files attractively.

How to Create Animated Project Download Button UI

1. Ensure you include the FontAwesome library in your HTML file’s <head> section. This library is essential for the icon fonts used in the project. You can include it using the following code:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-6e5u21gqH3xYuF6YXS5xhwBcd91gVca2z6n9e4Z7RUAHoMvB4M3ycKa0bpgR2Y/g0rooK0CcIto31UqRO1sRFQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />

2. Copy the following HTML structure. Customize the file name, file type percentages, and other details as needed.

<div class="file">
  <div class="field">&#xf019;</div>
  <div class="text">index.html</div>
</div>
<div class="content">
  <div class="html">HTML</div>
  <div class="css">CSS</div>
  <div class="js">JS</div>
  <div class="bar"></div>
  <div class="bar_anim1"></div>
  <div class="bar_anim2"></div>
  <div class="bar_anim3"></div>
</div>

3. Copy the CSS styles into your project’s stylesheet. These styles define the layout, animations, and appearance of the Animated Download Button UI.

@font-face {
  font-family: FontAwesome;
  src: url(data:application/x-font-woff;charset=utf-8;base64,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) format('woff');
}

.content,.file {
  position: fixed;
  top: calc(50% - 55px);
  background: #f8f8f8;
  border-radius: 3px;
  overflow: hidden
}
.content {
  left: calc(50% - 300px);
  width: 600px;
  height: 50px;
  text-align: center;
  border: 1px solid #B0BEC5;
}
.file {
  left: calc(50% - 135px);
  width: 270px;
  height: 36px;
  border: 1px solid #4CAF50;
  opacity: 0;
  transition: .8s;
  transition-delay: 1.8s;
}
.text {
  margin-left: 45px;
  font: bold 11pt Verdana;
  line-height: 36px;
  color: #333
}
.text:before {
  content: '\f15c';
  position: absolute;
  font: 16pt FontAwesome;
  transform: translate(-28px, 7px);
}
.text:after {
  content: '(83.1 kB)';
  position: absolute;
  margin-left: 8px;
  font: 10pt Verdana;
  color: #626262;
  transform: translate(0, 10px);
}
.field {
  position: absolute;
  top: 0;
  right: 0;
  width: 50px;
  height: 36px;
  color: #fff;
  background: #4CAF50;
  font: 16pt FontAwesome;
  text-align: center;
  line-height: 36px;
  cursor: pointer;
  transition: .2s;
}
.field:hover {background: #43A047}
.html,.css,.js {
  display: inline-block;
  margin: 16px 3px 0 0;
  width: 130px;
  font: bold 11pt Verdana;
  color: #333;
  transition: .4s;
  transform: translate(-12px);
}
.html:before,.css:before,.js:before {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  transform: translate(-14px, 5px);
}
.html:before {background: #dc3912}
.css:before {background: #3366cc}
.js:before {background: #ff9900}
.html:after,.css:after,.js:after {
  position: absolute;
  font: 10pt Verdana;
  color: #626262;
  transform: translate(2px);
}
.html:after {content: '(5.7%)'}
.css:after {content: '(64.4%)'}
.js:after {content: '(29.9%)'}
.bar,.bar:before,.bar:after {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 8px;
  border-right: 1px solid #f8f8f8
}
.bar {
  background: #ff9900;
  width: 100%;
}
.bar:before {
  content: '';
  background: #3366cc;
  width: 70.1%;
}
.bar:after {
  content: '';
  background: #dc3912;
  width: 5.7%;
}
.bar_anim1,.bar_anim2,.bar_anim3 {
  position: absolute;
  bottom: 0;
  right: 0;
  height: 8px;
  background: #f8f8f8;
  transition: 1.3s;
  transition-delay: .45s;
}
.bar_anim1 {
  right: 0;
  width: 29.9%;
}
.bar_anim2 {
  right: 29.9%;
  width: 64.4%;
}
.bar_anim3 {
  right: 94.3%;
  width: 5.7%;
}

4. Now, load the jQuery library by adding the following CDN link before closing the body tag:

<script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>

5. Finally, copy the JavaScript code into your project. This code is responsible for triggering the animation and adjusting the file details after a delay.

setTimeout(function() {
  $('.html,.css,.js').css('margin','8px 3px 0 0');
  $('.bar_anim1').css('width',0);
  $('.bar_anim2').css('width',0);
  $('.bar_anim3').css('width',0)
  $('.file').css({'top':'calc(50% + 15px)','opacity':1});
},500)

That’s all! hopefully, you have successfully created the Animated Download Button on your website. If you have any questions or suggestions, feel free to comment below.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...