spin.js 에 알림말 text 넣기 / 로딩바

spin.js 에 알림말 text 넣기

 

 

이전에 spin.js를 활용해서 프로그래스바를 적용한 적이 있었다.

 

그런데 그 프로그래스바에 알림말을 넣어달라는 요청이 있었다.

 

spin.js를 다음과 같은 모양으로 사용중이였다.

해당 플러그인은 아주 심플하고 간단간 녀석이여서 그런 기능은 없었다 ㅠㅠ

 

어쩔수 없이 기능을 만들어야 했다.

 

spin.js 에 다음과 같이 text 알림말을 추가했다.

 

 

 

 

 

spin.js 는 사용방법이 아주 쉬운 프로그래스바 오픈소스이다.

 

spin.js 에 대한 내용이나

기본적인 설정방법 및 사용방법은 아래 포스팅 링크로 이동해서 확인하면 된다.

---

onbeforeunload 를 활용하여 페이지 이동 시 프로그레스바, 로딩바 생성
javascript 프로그레스바 / 로딩바 플러그인 spin.js

---

 

 

 

기존 프로그래스바는 사용중이였기에 영향을 미치지 않는 선에서 텍스트를 출력할 수 있도록 만들었다.

 

사용방법

var spinner;
jQuery(function(){
    spinner = new Spinner().spin().el;
    jQuery(document.body).append(spinner);
    
    var spinerTextFontSize = 14;
    var spinerTextPadding = 10;
    var spinerTextWidth = 200;
    var spinerTextBorderWidth = 2;
    var spinerTextMarginTop = (((spinerTextFontSize + (spinerTextBorderWidth * 2) + (spinerTextPadding * 2)) / 2) * -1);
    var spinnerMarginLeft = (spinerTextWidth/2);
 
    $(spinner).append('<div class="spinerText"><div class="spinerTextDiv">잠시만 기다려 주세요.</div></div>');
    $(".spinerText").css("width",spinerTextWidth + "px");
    $(".spinerText").css("font-size",spinerTextFontSize + "px");
    $(".spinerText").css("line-height",spinerTextFontSize + "px");
    $(".spinerText").css("margin-top",spinerTextMarginTop + "px");
    $(".spinerText").css("padding",spinerTextPadding + "px");
    $(".spinerText").css("background-color","#fff");
    $(".spinerText").css("border",spinerTextBorderWidth + "px solid #5AA2DD");
    $(".spinerText").css("position","absolute");
    $(".spinerText").css("font-weight","bold");
    $(".spinerText").css("display","table");
    $(".spinerTextDiv").css("display","table-cell");
    $(".spinerTextDiv").css("text-align","center");
    $(".spinerTextDiv").css("vertical-align","middle");
 
    $(spinner).css('margin-left','-' + spinnerMarginLeft + 'px');
});

6# : 텍스트 크기

7# : 텍스트를 감싸고 있는 태그의 패딩값

8# : 텍스트를 감싸고 있는 태그의 크기

9# : 텍스트를 감싸고 있는 태그의 테두리 두께

10# : 텍스트를 감싸고 있는 태그의 상단 마진 (가운데로 정렬하기 위해서 텍스트 크기, 여백 등을 가지고 계산함)

11# : 프로그래스바의 좌측 여백

프로그래스바는 최초 화면 가운데 생성이 된다.

text 가 추가되면서 프로그래스바 + 텍스트 를 합한 전체 태그가 화면 가운데로 오게 하기 위해 좌측으로 이동시키기 위해 좌측마진을 구함

13# : text 태그를 프로그래스바 태그에 삽입

14# ~ 26# : 디자인 셋팅 (완성된 모양은 포스팅 상단에 있음)

당연히 메시지박스의 위치는 자유롭게 이동시킬 수 있다.

28# : 프로그래스바를 좌측으로 이동시킴