<script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.4/vue.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/vue-resource/1.2.1/vue-resource.min.js'></script>

<div class="site-canvas" id="app">
  <div class="download-button" @click="download = !download" :class="{'downloading':download}">
  <div class="download-button_icon">
  <span></span>
  <span></span>
  <span></span>
  </div>
  <div class="download-button_text">
  Download
  </div>
  <transition name="fade">
  <div class="files" v-if="download">
  <svg v-for="i in [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]" :style="fileStyles()" viewBox="0 0 8 8" class="file">
  <path d="M0 0v8h7v-4h-4v-4h-3zm4 0v3h3l-3-3z"></path>  
  </svg>
  </div>
  </transition>
  </div>
</div>

.download-button {
  position:fixed;
  margin:auto;
  top:0;
  left:0;
  right:0;
  bottom:0;
  width:120px;
  height:120px;
  background:#5757ff;
  border-radius:5px;
  box-shadow:0 10px 20px rgba(0,0,0,0.2);
  transition:250ms transform, 250ms box-shadow;
  cursor:pointer;
}
.download-button:hover {
  transform:scale(0.95);
  box-shadow:0 4px 8px rgba(0,0,0,0.1);
}

.download-button_icon {
  position:absolute;
  margin:auto;
  top:10px;
  left:0;
  right:0;
  width:80px;
  height:80px;
}
.download-button_icon span {
  position:absolute;
  margin:auto;
  top:0;
  left:0;
  right:0;
  bottom:0;
  width:4px;
  height:50px;
  background:#fff;
  border-radius:4px;
  content:'';
}

.download-button_icon span:nth-child(2),
.download-button_icon span:nth-child(3) {
  top:35px;
  height:25px;
  left:16px;
  transform:rotate(45deg);
}
.download-button_icon span:nth-child(3) {
  left:-16px;
  transform:rotate(-45deg);
}

.download-button_text {
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  color:#fff;
  text-align:center;
  font-size:1em;
  font-weight:700;
  padding:15px 0;
}
.files {
  position:relative;
  margin-top:130px;
  text-align:center;
}
.files .file {
  width:15px;
  fill:#5757ff;
  animation:800ms fallingFile infinite ease-in;
}
@keyframes fallingFile {
  0%{opacity:0;transform:translate3d(0,-40px,0) rotate(0deg);}
  60%{opacity:1;}
  100%{opacity:0;transform:translate3d(0,120px,0) rotate(90deg);}
}

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}

(function(){
  var app = new Vue({
  el: '#app',
  data: {
  download: false
  },
  methods: {
  fileStyles: function() {
  let delay = -(Math.floor(Math.random() * 10) * 254);
  let duration = (Math.floor(Math.random() * 11) + 9) * 100;
  return {
  'animation-delay' : delay + 'ms',
  'animation-duration' : duration + 'ms'
  }
  }
  },
  mounted() {
   
  }
  });
})();