Rev. 2.73

Felix Gnass씨가 배포한 spin.js는 추가적인 이미지나 CSS를 호출하지 않고 순수 자바스크립트만으로 만들어지는 로딩 알리미입니다. 특정 자바스크립트 라이브러리에 종속적이지 않으며, IE6에서도 사용할 수 있습니다. 이것은 몇몇 HTML요소들에 CSS3에서 지원하는 속성들을 사용해서 그려지는 것이며, 이를 만족하지 못하는 하위 IE계열 브라우저에서는 VML을 이용하여 표현합니다.

다양한 옵션들을 지원하여 라인의 수, 길이, 두깨, 크기, 색상, 속도, 잔상, 그림자를 설정할 수 있으며, stop() 메서드로 중지할 수 있고 spin()메서드로 다시 시작할 수 있습니다. 사용방법은 다음과 같습니다.

var opts = {
  lines: 14, // The number of lines to draw
  length: 11, // The length of each line
  width: 6, // The line thickness
  radius: 19, // The radius of the inner circle
  color: '#000', // #rgb or #rrggbb
  speed: 1, // Rounds per second
  trail: 56, // Afterglow percentage
  shadow: true // Whether to render a shadow
};
var target = document.getElementById('foo');
var spinner = new Spinner(opts).spin(target);

// or use default options

var spinner = new Spinner().spin();
target.appendChild(spinner.el);

아래와 같은 코드를 사용하면 jQuery 플러그인으로도 사용할 수 있습니다.

$.fn.spin = function(opts) {
  this.each(function() {
    var $this = $(this),
        data = $this.data();

    if (data.spinner) {
      data.spinner.stop();
      delete data.spinner;
    }
    if (opts !== false) {
      data.spinner = new Spinner($.extend({color: $this.css('color')}, opts)).spin(this);
    }
  });
  return this;
};

Comments

Got something to add? You can just leave a comment.

Your Reaction Time!

captcha

avatar