[해피CGI][cgimall] 클릭하면 다운로는 되는 애니메이션 Download Animation (SVG)

클릭하면 다운로는 되는 애니메이션을 재밌게 표현한 소스입니다.

다양한 상황에 응용 가능합니다.

 

HTML 구조

<div class="dl-box">

  <svg class="dl-svg" viewBox="0 0 160 160">

    <path class="dl-svg__circle" d="M80,3 a77,77 0 1,0 0,154 a77,77 0 1,0 0,-154 a77,77 0 1,0 0,154 a77,77 0 1,0 0,-154"/>

    <path class="dl-svg__arrow dl-svg__arrow-main" d="M80,47 v66"/>

    <path class="dl-svg__arrow dl-svg__arrow-side" d="M56,85 80,115"/>

    <path class="dl-svg__arrow dl-svg__arrow-side" d="M104,85 80,115"/>

    <path class="dl-svg__rotater" d="M80,3 a77,77 0 0,1 0,154 a77,77 0 0,1 0,-154"/>

    <path class="dl-svg__progress-plc" d="M-77,207 h314"/>

    <path class="dl-svg__triangle" d="M80,3 Q180,10 225,207 h-302"/>

    <path class="dl-svg__triangle-piece" d="M225,207 h15"/>

    <path class="dl-svg__progress" d="M-77,207 h314"/>

    <path class="dl-svg__progress-vert" d="M80,207 80,3"/>

    <path class="dl-svg__checkmark" d="M7,56 l74,52 l44,-56"/>

  </svg>

  <div class="dl-status">

    <p class="dl-status__numbers">0</p>

    <span class="dl-status__perc">%</span>

  </div>

  <div class="particles m--stage-2">

    <div class="particles__p"></div>

    <div class="particles__p"></div>

    <div class="particles__p"></div>

    <div class="particles__p"></div>

    <div class="particles__p"></div>

    <div class="particles__p"></div>

    <div class="particles__p"></div>

    <div class="particles__p"></div>

    <div class="particles__p"></div>

    <div class="particles__p"></div>

  </div>

  <div class="particles m--stage-3">

    <div class="particles__p"></div>

    <div class="particles__p"></div>

    <div class="particles__p"></div>

    <div class="particles__p"></div>

    <div class="particles__p"></div>

    <div class="particles__p"></div>

    <div class="particles__p"></div>

    <div class="particles__p"></div>

    <div class="particles__p"></div>

    <div class="particles__p"></div>

  </div>

  <button type="button" class="dl-reset">Reset</button>

</div>

 

< a href="https://dribbble.com/shots/2939772--Daily-UI-Download" target="_blank" class="icon-link">

  <img src="http://icons.iconarchive.com/icons/uiconstock/socialmedia/256/Dribbble-icon.png">

</a>

<a href="https://twitter.com/NikolayTalanov" target="_blank" class="icon-link icon-link--twitter">
  <img src="https://cdn1.iconfinder.com/data/icons/logotypes/32/twitter-128.png">

</a>

CSS(SCSS) 소스

*, *:before, *:after {

  box-sizing: border-box;

  margin: 0;

  padding: 0;

}

 

body {

  background: #006cc7;

  font-family: 'Roboto', Helvetica, Arial, sans-serif;

}

 

$circleSize: 160px;

$dlPad: 20px;

$dlWidth: 320px + $dlPad * 2;

$dlHeight: $circleSize + 50px + $dlPad*2;

$strokeW: 6px;

 

.dl-box {

  position: absolute;

  left: 50%;

  top: 50%;

  width: $dlWidth;

  height: $dlHeight;

  padding: $dlPad;

  margin-left: $dlWidth/-2;

  margin-top: $dlHeight/-2;

}

 

.dl-svg {

  overflow: visible;

  display: block;

  width: $circleSize;

  height: $circleSize;

  margin: 0 auto;

  

  &:not(.s--animating) {

    cursor: pointer;

  }

  

  path {

    fill: none;

    stroke-width: $strokeW;

    stroke-linecap: round;

  }

  

  &__circle {

    stroke: #4c99d9;

  }

  

  &__arrow {

    stroke: #fff;

  }

  

  &__rotater {

    stroke: #fff;

    opacity: 0;

  }

  

  &__triangle {

    stroke: #fff;

    opacity: 0;

    

    &-piece {

      stroke: #fff;

      opacity: 0;

    }

  }

  

  &__progress-plc {

    stroke: rgba(#fff, 0.4);

    opacity: 0;

  }

  

  &__progress,

  &__progress-vert,

  &__checkmark {

    stroke: #fff;

    opacity: 0;

  }

}

 

.dl-status {

  display: flex;

  justify-content: center;

  align-items: flex-end;

  position: absolute;

  left: 0;

  top: 90px;

  width: 100%;

  color: #4c99d9;

  opacity: 0;

  transition: 0.6s;

  transform: scale(0.8);

  pointer-events: none;

  

  &.s--active {

    opacity: 1;

    transform: scale(1);

  }

  
.
.
.

 

JS 소스

(function() {

  function $$(selector, context) {

    var context = context || document;

    var elements = context.querySelectorAll(selector);

    var nodesArr = [].slice.call(elements);

    return nodesArr.length === 1 ? nodesArr[0] : nodesArr;

  };

 

  var $status = $$('.dl-status');

  var $statusNumbers = $$('.dl-status__numbers');

 

  var $dlSVG = $$('.dl-svg');

 

  var $circle = $$('.dl-svg__circle');

  var $arrMain = $$('.dl-svg__arrow-main');

  var $arrSides = $$('.dl-svg__arrow-side');

  var $rotater = $$('.dl-svg__rotater');

  var $tri = $$('.dl-svg__triangle');

  var $triPiece = $$('.dl-svg__triangle-piece');

  var $plc = $$('.dl-svg__progress-plc');

  var $progress = $$('.dl-svg__progress');

  var $prVert = $$('.dl-svg__progress-vert');

  var $check = $$('.dl-svg__checkmark');

 

  var $resetBtn = $$('.dl-reset');

  var $particles = $$('.particles');

  var $particlesStage2 = $$('.particles.m--stage-2');

  var $particlesStage3 = $$('.particles.m--stage-3');

 

  var arrInitAT = 0.5;

  var dotFadeAT = 0.1;

  var rtRotationAT = 1.4;

  var triAT = 1.1;

  var rtDelay = arrInitAT + dotFadeAT;

  var triPhase2Delay = triAT * 0.6;

 

  var progressDelay = 0.2;

  var progressAT = 1;

  var prCollapseAT = 0.5;

  var prMoveAT = 0.4;

 

  var circleAT = 0.6;

 

  var checkAT = 0.5;

 

  function resetDl() {

    $dlSVG.classList.remove('s--animating');

    $resetBtn.classList.remove('s--visible');

    $particles.forEach(function($part) {

      $part.classList.remove('s--active');

    });

.
.
.

 

해당 사이트로 이동하여 전체 소스를 확인하실 수 있습니다.