Material download

In this example below you will see how to do a Material download with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by Maxiconnect, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright Maxiconnect ©
  • HTML
  • CSS
  • JavaScript
    #box Download

/*Downloaded from https://www.codeseek.co/Maxiconnect/material-download-ZOWzwO */
    @import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);

$myColor: #0040FF;
$penColor: #1d1f20;
$boxHeight: 70px;
$boxWidth: 200px;
$divideLoad: 1.25;

body{
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  
  &.fontBigger #box{
    font-size: 1.75em;
    transition: font-size .2s .2s ease-in-out;
  }
  
  &.arrow #box::before, &.reset #box::before{
    content: ' ';
    display: block;
    width: 100%;
    height: 100%;
    background-image: url('http://img11.hostingpics.net/pics/319928arrow.png');
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: 40%;
    animation: arrow .5s ease-in-out;
  }
  
  &.reset #box::before{
    animation: offArrow .3s ease-in-out forwards;
  }
  
  &::before{
      content: ' ';
      display: block;
      width: 100%;
      height: 50%;
      background-color: $penColor;
    }
  
  #box{
    width: $boxWidth;
    height: $boxHeight;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    text-align: center;
    text-transform: uppercase;
    line-height: $boxHeight;
    font-family: 'Open Sans', 'Helvetica', sans-serif;
    font-size: 1em;
    font-weight: bold;
    letter-spacing: 0.1em;
    color: white;
    background-color: $myColor;
    overflow: hidden;
    cursor: pointer;
    transition: all .2s ease-in-out, font-size .2s .2s ease-in-out, top .1s ease-in-out;
    
    &.load{
      animation-name: load;
      animation-duration: .8s;
      animation-timing-function: ease-in-out;
      animation-iteration-count: 1;
      animation-fill-mode: forwards;
    }
    
    &.offload{
      //transition: all .1s ease-in-out !important;
      animation-name: offload;
      animation-duration: .4s;
      animation-timing-function: ease-in-out;
      animation-iteration-count: 1;
      //animation-fill-mode: forwards;
    }
    
    .pseudoElement{
      content: ' ';
      display: block;
      width: $boxWidth;
      height: $boxWidth;
      position: absolute;
      top: 0;
      left: 0;
      background-color: lighten($myColor, 5%);
      border-radius: 50%;
      transform: translateX(-50%) translateY(-50%);
      opacity: 0;
      animation-name: circle;
      animation-duration: .6s;
      animation-timing-function: ease-in-out;
      z-index: -1;
    }
    
    &:hover{
      top: 49%;
      background-color: darken($myColor, 10%);
      box-shadow: 0px 6px 50px -16px rgba(0,0,0,1);
      transition: all .2s ease-in-out;
    }
  }
  
  .play{
      width: $boxWidth+30px;
      height: $boxWidth+30px;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -125px;
      margin-left: -120px;
      transform-origin: 50% 50%;
      border: 6px solid transparent;
      border-top: 6px solid $myColor;
      border-radius: 50%;
      opacity: 0;
      animation: turn 1s .5s linear infinite, fadein .5s .5s linear forwards;
    
    &::before{
      content: ' ';
      display:block;
      position: absolute;
      top: 15px;
      left: 15px;
      right: 15px;
      bottom: 15px;
      border: 6px solid transparent;
      border-top: 6px solid $myColor;
      border-radius: 50%;
      opacity: 0;
      transition: all .5s ease-in-out;
      animation: turn 4s .5s linear infinite, fadein .5s .5s linear forwards;
    }
  }
  
  .fadeOut{
    animation: fadeout .5s linear forwards;
  }
}

@keyframes fadein{
  from {
    opacity: 0;
  } to {
    opacity: 1;
  }
}

@keyframes fadeout{
  from {
    opacity: 1;
  } to {
    opacity: 0;
  }
}

@keyframes turn{
  0%{
    transform: rotate(0);
  } 100% {
    transform: rotate(360deg);
  }
}

@keyframes circle{
  from{
    transform: scale(0);
    opacity: 1;
  } to {
    transform: scale(1);
    opacity: 0;
  }
}

@keyframes arrow{
  from{
    background-position: 50% 30%;
    opacity: 0;
  } to {
    background-position: 50% 50%;
    opacity: 1;
  }
}

@keyframes offArrow{
  0%{
    display: block;
    background-position: 50% 50%;
    opacity: 1;
  } 99% {
    height: 100%;
  } 100% {
    background-position: 50% 80%;
    opacity: 0;
    height: 0;
  }
}

@keyframes load{
  0%{
    height: $boxHeight;
    line-height: $boxHeight;
    color: transparent;
  } 30% {
    height: 0;
    width: 0;
  } 70% {
    color: transparent;
  } 100% {
    height: $boxWidth/$divideLoad;
    width: $boxWidth/$divideLoad;
    top: 49%;
    line-height: $boxWidth/$divideLoad;
    border-radius: 50%;
    background-color: darken($myColor, 10%);
    box-shadow: 0px 6px 50px -16px rgba(0,0,0,1);
  }
}

@keyframes offload{
  0%{
    height: $boxWidth/$divideLoad;
    width: $boxWidth/$divideLoad;
    top: 49%;
    line-height: $boxWidth/$divideLoad;
    border-radius: 50%;
    color: transparent;
    background-color: darken($myColor, 10%);
    box-shadow: 0px 6px 50px -16px rgba(0,0,0,1);
  } 70% {
    color: transparent;
  } 100% {
    height: $boxHeight;
    line-height: $boxHeight;
  }
}


/*Downloaded from https://www.codeseek.co/Maxiconnect/material-download-ZOWzwO */
    var body = document.body;
var box = document.querySelector('#box');

box.addEventListener('click', function(e){
  var test = this.classList.contains('load');
  
  if(test){
    var ajust = 20;
    var y = (e.clientY - (this.offsetTop + ajust)) + 'px';
    var x = (e.clientX - (this.offsetLeft + ajust)) + 'px';
  } else {
    var ajust = box.offsetHeight;
    var y = (e.clientY - (this.offsetTop + ajust)) + 'px';
    var x = (e.clientX - (this.offsetLeft)) + 'px';
  }

  if(body.classList.contains('arrow')){
    body.classList.add('reset');
    body.classList.remove('arrow');
  } else if(body.classList.contains('reset')){
    body.classList.remove('reset');
  }
  
  var child = document.createElement('div');
  child.classList.add('pseudoElement');
  child.style.top = y;
  child.style.left = x;
  this.appendChild(child);
  
  child.addEventListener("animationend", function(){
    if(test){
      body.classList.remove('fontBigger');
      this.parentNode.classList.remove('load');
      this.parentNode.classList.add('offload');
      this.parentNode.innerHTML = 'Download';
    } else { 
      if(this.parentNode.classList.contains('offload'))  { this.parentNode.classList.remove('offload');}
      this.parentNode.classList.add('load');
      body.classList.add('fontBigger');
      
      var loader = document.createElement('div');
  loader.classList.add('play');
  body.insertBefore(loader, box);
      
      var pourcent = 0;
      var timeLoad = window.setInterval(function(){
        pourcent++;
        box.textContent = pourcent + '%';
        if(pourcent==100){
          box.textContent = '';
          body.removeChild(loader);
          body.classList.add('arrow');
          window.clearInterval(timeLoad);
        }}, 60);
      }    
  });  
});

Comments