Loader

기본 사용

<div class="gn-loader"></div>

크기

<div class="gn-loader is-small"></div>
<div class="gn-loader is-normal"></div>
<div class="gn-loader is-medium"></div>
<div class="gn-loader is-large"></div>

색상

<div class="gn-loader is-success"></div>
<div class="gn-loader is-warning"></div>
<div class="gn-loader is-danger"></div>
<div class="gn-loader is-info"></div>

<div class="gn-loader is-inline"></div>
<div class="gn-loader is-inline is-success"></div>
<div class="gn-loader is-inline is-warning"></div>
<div class="gn-loader is-inline is-danger"></div>
<div class="gn-loader is-inline is-info"></div>
<div class="gn-loader is-inline is-primary"></div>

타입

<div class="gn-loader is-bounce"></div><br>
<div class="gn-loader is-move"></div>
<div class="gn-loader is-inline"></div><br>

생성 옵션

<button class="gn-button new-loader1">loader 예제보기</button>
<button class="gn-button new-loader2">loader 예제보기</button>

Gn.create('button', {
  target: '.new-loader1',
  onClick: function () {
    Gn.create('loader', {
      duration: 3000,
      size: 'large',
      positionX: 'right',
      positionY: 'center',
      color: 'secondary'
    });
  }
});
Gn.create('button', {
  target: '.new-loader2',
  onClick: function () {
    Gn.create('loader', {
      duration: 3000
    });
  }
});

name		type	default	description
width		number|string	25	로더 사이즈
color		string		'success','warning','danger','info','cancel','dark','link','trans','secondary','mono'
size		string		'small','normal','medium','large'
type		string		'inline','bounce','move','
positionX		string	center	메시지 표시 가로 위치 center, left, right
positionY		string	center	메시지 표시 세로 위치 center, top, bottom
duration		number		메시지 출력 유지시간, 해당 옵션 설정 시 create 시점에 로더가 보인다.

메소드

name	return	description
show(duration)	void	로더를 보여준다. (duration 미입력 시 계속 보여준다.)
hide()	void	로더를 숨김처리한다.