JQuery mobile 에서 로더(스피너) 변경

Ajax mobile 에서는 아래와 같은 형태로 loader 가 존재하는데 문제는 기본스타일이 구식이므로 커스텀이 필요한 경우가 많다. 

.ui-loader .ui-icon-loading {
  background-color: #000; 
  display: block;
  margin: 0;
  width: 2.75em;
  height: 2.75em;
  padding: .0625em;
  -webkit-border-radius: 2.25em;
  border-radius: 2.25em;
}

.ui-icon-loading {
  background: url(images/ajax-loader.gif);
  background-size: 2.875em 2.875em;
 }

위의 항목들중에 일부를 변경하여 쉽게 변경한다. 

보통 이미지를 바꾸고 싶어하므로 .ui-icon-loading 의 url 항목을 아래와 같이 변경한다 .

1. 

.ui-loader .ui-icon-loading {
   background-color: transparent;
}

.ui-icon-loading {
   background: url("더_url.gif");
}

2. JQuery 모바일에서 이미 HTML으로 커스텀하에 지정하는 기능이 있는데 위의 경우보단 약간 까다롭다

자세한건 아래 링크를 참조해보자. 예제 소스를 보면 쉽게 따라 할수 있다.

http://demos.jquerymobile.com/1.4.5/loader/#CustomHTML

참조:

1. http://stackoverflow.com/questions/23849604/how-to-change-the-default-jquery-mobile-loading-icon