gbBeQM

gbBeQM.markdown

gbBeQM

A Pen by Nate on CodePen.

License.

index.html

<div class="overlay"></div>
<div class="upload-animation-container">
    <i class="fa fa-file-text-o fa-4x"></i>  
    <i class="fa fa-file-pdf-o fa-4x"></i>
    <i class="fa fa-file-image-o fa-4x"></i> 
</div>
<label class="dropLabel">Drop Your Files Here</label>
<i class="fa fa-file-text-o  fa-4x"></i>  

style.scss

$bg: #444;
$color: #D32F2F;
$accent: #eee;
$size: 300px;

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
            transform: rotate(359deg);
  }
}

@keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
            transform: rotate(359deg);
  }
}

.overlay{
  width: 100%;
  height: 100vh;
  background-color: $bg;
  opacity: .7;

}
.dropLabel{
    width: $size;
    position: fixed;
    top: 50%;
    left: 50%;
    margin-left: -$size/2;
    text-align:center;
    color: $accent;
    font-weight: 600;
  }
.upload-animation-container{
  position:absolute;
  border: 1px solid $color;
  background-color: $color;
  border-radius: 50%;
  width: $size;
  height: $size;
  top: 50%;
  left: 50%;
  margin-left: -$size/2;
  margin-top: -$size/2;
  & .fa{
    position: absolute;
    color: $accent;
    left: 50%;
    top: 50%;
    width: 56px;
    margin-top: -40px;
    margin-left: -28px;
    &:nth-of-type(1){
      transition:All 1s ease;
      -webkit-transition:All 1s ease;
      -moz-transition:All 1s ease;
      -o-transition:All 1s ease;
      transform: rotate(420deg)  translatey(-100px);
      -webkit-transform: rotate(420deg)  translatey(-100px);
      -moz-transform: rotate(420deg)  translatey(-100px);
      -o-transform: rotate(420deg)  translatey(-100px);
      -ms-transform: rotate(420deg)  translatey(-100px);
    }
    &:nth-of-type(2){
      transition:All 1s ease;
      -webkit-transition:All 1s ease;
      -moz-transition:All 1s ease;
      -o-transition:All 1s ease;
      transform: rotate(360deg)  translateY(-100px);
      -webkit-transform: rotate(360deg)  translateY(-100px);
      -moz-transform: rotate(360deg)  translateY(-100px);
      -o-transform: rotate(360deg)  translateY(-100px);
      -ms-transform: rotate(360deg)  translateY(-100px);

    }
    &:nth-of-type(3){
      transition:All 1s ease;
      -webkit-transition:All 1s ease;
      -moz-transition:All 1s ease;
      -o-transition:All 1s ease;
      transform: rotate(660deg)  translateY(-100px);
      -webkit-transform: rotate(660deg)  translateY(-100px);
      -moz-transform: rotate(660deg)  translateY(-100px);
      -o-transform: rotate(660deg)  translateY(-100px);
      -ms-transform: rotate(660deg)  translateY(-100px);
    }
  }

  &:hover{
      -webkit-animation: fa-spin 5s infinite linear;
          animation: fa-spin 5s infinite linear;
    & .fa{
      &:nth-of-type(1){
        transition:All 1s ease;
        -webkit-transition:All 1s ease;
        -moz-transition:All 1s ease;
        -o-transition:All 1s ease;
        transform: rotate(60deg)  translatey(-183px);
        -webkit-transform: rotate(60deg)  translatey(-183px);
        -moz-transform: rotate(60deg)  translatey(-183px);
        -o-transform: rotate(60deg)  translatey(-183px);
        -ms-transform: rotate(60deg)  translatey(-183px);
      }
      &:nth-of-type(2){
        transition:All 1s ease;
        -webkit-transition:All 1s ease;
        -moz-transition:All 1s ease;
        -o-transition:All 1s ease;
        transform: rotate(180deg)  translateY(-186px);
        -webkit-transform: rotate(180deg)  translateY(-186px);
        -moz-transform: rotate(180deg)  translateY(-186px);
        -o-transform: rotate(180deg)  translateY(-186px);
        -ms-transform: rotate(180deg)  translateY(-186px);

      }
      &:nth-of-type(3){
        transition:All 1s ease;
        -webkit-transition:All 1s ease;
        -moz-transition:All 1s ease;
        -o-transition:All 1s ease;
        transform: rotate(300deg)  translateY(-170px);
        -webkit-transform: rotate(300deg)  translateY(-170px);
        -moz-transform: rotate(300deg)  translateY(-170px);
        -o-transform: rotate(300deg)  translateY(-170px);
        -ms-transform: rotate(300deg)  translateY(-170px);
      }
    }
  }
}