[2015.12.07] download button design - progress bar 진행상태가 합쳐진 다운로드 버튼

아주 간단한 다운로드 버튼이지만 볼 내용들은 많네요 ㅎㅎ

소스와 함께 찬찬히 살펴보도록 합시다.

  

우선 calc 를 사용한 계산된 수치로 값을 입력하는 부분입니다.

margin-top: calc(50vh - 2em);

background에서도 볼게 많네요. 우선 , 로 여러개의 속성들을 연결하여(chain) 여러가지 효과를 중복하여 적용했구요.

background 이미지가 적용되는 영역을 border-box, padding-box 로 지정하였네요. (외곽선만 채워지는 효과 구현)
  - border-box : 엘리먼트의 경계선 안까지 확장된다.
  - padding-box : 엘리먼트의 패딩 안까지 확장되지만 경계선 안까지만 포함된다.
  - content-box : 엘리먼트의 경계선과 패딩 안까지 포함.

background: 
linear-gradient(#323232, #232323) padding-box, 
linear-gradient(#3bc8ef, rgba(59, 200, 239, 0.1)) 0/0 100% no-repeat border-box, 
repeating-linear-gradient(45deg, rgba(34, 34, 34, 0.25), transparent 1px, transparent 3px, rgba(34, 34, 34, 0.25) 4px) border-box,
repeating-linear-gradient(-45deg, rgba(34, 34, 34, 0.25), transparent 1px, transparent 3px, rgba(34, 34, 34, 0.25) 4px) border-box, 
linear-gradient(#3bc8ef, #3bc8ef) 0/0 100% no-repeat border-box, 
linear-gradient(#151515, #2e2e2e) border-box;

참고) HTML & CSS 초보자 가이드 - 5강 : 백그라운드와 그라디언트

또 중간에 data 속성값을 불러와서 내용을 입력해주는 부분이 있네요.

content: attr(data-perc);

CSS에선 저렇게 사용하구요. 아래처럼 스크립트에서 data 속성으로 들어가있어야 불러올 수 있습니다.

el.dataset.perc = perc + '%';

jquery에서는 $.data('perc',value) 이용할 수 있겠지요.

아래는 스크립트 소스입니다. 

var rID = null;

var load = function(el, s, t) {
    var perc, k = 2;

    if(t%k === 0) {
        perc = t/k;
        el.dataset.perc = perc + '%';
        el.style.backgroundSize = 
            s.replace(/0px/g, el.dataset.perc);

        if(perc === 100) {
            cancelAnimationFrame(rID);
            rID = null;
            return;
        }
    }

    rID = requestAnimationFrame(
        load.bind(this, el, s, ++t)
    );
};
123
document.querySelector('button')
    .addEventListener('click', function() {
    var s;

    if(!rID) {
        this.classList.toggle('loading');
        s = getComputedStyle(this).backgroundSize;
        if(this.classList.contains('loading'))
            load(this, s, 0);
        else {
            this.dataset.perc = 
            this.style.backgroundSize = ''
        }
    }
}, false);

자주 못봤던 requestAnimationFrame 과 cancelAnimationFrame 만 간단하게 살펴보도록 하죠.

rID = requestAnimationFrame(
        load.bind(this, el, s, ++t)
    );
cancelAnimationFrame(rID);

​

IE9 이상부터 사용 가능.

setInterval()을 통해서 함수를 반복 호출 할수는 있으나 requestAnimationFrame 을 사용하는 이유는 뭐 크게 3가지?

  1. 부드럽게 처리가 된다.

  2. 활성/비활성이 명확하여 CPU 사용에 대한 제어를 확실히 할 수 있다.

  3. 배터리 사용의 효율이 좋다.

뭐 대충 이렇답니다.ㅎ

참고) 1) SAVING BATTERY LIFE WITH CANCELANIMATIONFRAME

       2) Using requestAnimationFrame

아참 getComputedStyle 이 놈도 가볍게 봅시다.

엘리먼트에 최종적으로 적용된 style을 가져오는 건데, 그냥 element.style을 하는 경우 외부에서 import된 style 속성값은 읽어올 수 없으므로 이놈이 필요하다는 말씀.

* 주의 : getComputedStyle 함수는 언제나 'px' 단위의 결과 값을 보여준다.

참고) getComputedStyle() 메소드를 사용하자

간단한 사용 예제 및 Demo

See the Pen download button (click me!) by Ana Tudor (@thebabydino) on CodePen.