본문으로 바로가기

[티스토리]CCZ-CROSS 스킨 preloader 로딩 이미지 CSS로 변경


오늘은 뭔가 포스팅 제목처럼 대단한건 아니지만 엄청난 것을 해보겠습니다.


흉내내기님이 제작하신 CCZ-CROSS 스킨은 몇가지 옵션을 설정 할 수 있는 트리거가 있습니다.

스킨 옵션 설정


var setting = {

	activeCate: true,    //현재카테고리위치 표기 
	autoLink: false,      //댓글,방명록 자동링크
	extendThumb: false,  //썸네일 확장
	newIcon: true,    	 //new 아이콘 변경여부
	preloader: true,    //프리로드 활성화
	searchTag: true,  	 //검색시에 우선순위태그를 보여줌
	searchTagCount: 8,   //보여줄 우선순위태그 갯수
	tbHide: true,        //트랙백숨기기
	timeChange: false    //포스트,댓글,방명록 날짜표기 변경 
	
}


preloader

해당 스킨은 스크립트로 변경되는 부분이 존재하며, 이를 콘텐츠가 노출된 상태에서 변경되는 과정을 감추기 위해서 FOUC 처리가 기본으로 적용되어 있습니다. 다만, 로딩이 길어질 경우 빈 화면을 노출하고 있기에 기호에 따라 로딩 이미지로 대체할 수 있도록 이 옵션을 제공합니다. 활성화하면 페이지 로딩시에 아래와 같은 이미지가 제공됩니다.


라고 설명이 되어있습니다.


그런데 사용을 해보니 블로그 형태가 한번 나타나고

콘텐츠 내용이 불러오기 전에 로딩 화면이 전환 되었다가

다시 로딩완료 후 페이지가 보이기 때문에 


시각적으로 기존의 preloader 비활성화 할때보다

더 로딩이 더 오래 걸리는 것처럼 걸리는 것 처럼 느껴졌습니다.


그렇게 비활성화를 하던 도중


gif 아이콘을 찾다가

CSS로 만들어진 loading 효과를 찾게 되었습니다.


See the Pen flat loading animate by wenbin zhou (@wenbin5243) on CodePen.


그래서 기존의 preloadr.gif 파일을 css로 변경해보자고 생각하고 수정을 진행하게 됩니다.


저는 5번째 로딩 이미지로 변경하기 위해서

우선 CSS를 수정 해주었습니다.


스킨 파일에 저장 되어있는reset.css파일을 열어줍니다.

그리고 해당 부분을 찾아 줍니다. 그리고 /* 양끝에 주석 */ 처리를 해줍니다.

파일 업로드에 관련한...

따로 언급 되지 않아도 모든 파일은 [HTML/CSS 편집]->[파일업로드]에서 다운로드 후 수정이 완료 되면 꼭 다시 업로드로 갱신

reset.css 찾아서 주석처리 할 부분


.loading-fixed{position:fixed;left:0;top:0;width:100%;height:100%;background:#fff url('./preloader.gif') no-repeat center;opacity:1;filter:alpha(opacity=100);z-index:99999;}.loading-fixed img{position:absolute;top:50%;left:50%;margin-left:-47px;margin-top:-36px;}
/* 위 부분을 찾아서 아래 처럼 양끝에 주석 처리를 해줍니다. */
/*.loading-fixed{position:fixed;left:0;top:0;width:100%;height:100%;background:#fff url('./preloader.gif') no-repeat center;opacity:1;filter:alpha(opacity=100);z-index:99999;}.loading-fixed img{position:absolute;top:50%;left:50%;margin-left:-47px;margin-top:-36px;}*/


그리고는 위 로딩 CSS 이미지 코드에서 CSS부분에서 .loading 5클라스 네임이 적힌 코드를 전부 갖고 와서

.loading 5를 모두 .loading-fixed 바꾸어 줍니다.


그리고 꼭 z-index:1;값을 주어서 로딩 CSS 이미지가 제일 위에 올라 올 수 있게 해줍니다.

사실z-index:1; 속성을 몰라서.. 다른 것을 전부 해결해 놓고 한참을 찾았습니다.. ㅠ_ㅠ


loding-fixed로 클래스 네임을 고치고 reset.css에 붙혀넣기 해야 하는 것


.loading-fixed{
  width: 40px;
  height: 40px;
  z-index: 1; /*직접 입력 해주어야 합니다*/
  transform:rotate(45deg);
  animation:loading-fixed-ani1 3s ease-in-out infinite;
}
.loading-fixed i{
  width: 40px;
  height: 40px;
  display: inline-block;
  border-radius: 50%;
  position:absolute;

}
.loading-fixed i:nth-child(1){
  background: #ff5954;
  transform:translate(0,50px);
  animation:loading-fixed-ani2 3s ease-in-out infinite;
}
.loading-fixed i:nth-child(2){
  background: #1f4c59;
  transform:rotate(90deg) translate(0,50px);
  animation:loading-fixed-ani3 3s ease-in-out infinite;
}
.loading-fixed i:nth-child(3){
  background: #00b39f;
  transform:rotate(180deg) translate(0,50px);
  animation:loading-fixed-ani4 3s ease-in-out infinite;
}
.loading-fixed i:nth-child(4){
  background: #ffb364;
  transform:rotate(270deg) translate(0,50px);
  animation:loading-fixed-ani5 3s ease-in-out infinite;
}
@keyframes loading-fixed-ani1{
  25%{
    transform:rotate(135deg);
  }
  50%{
    transform:rotate(225deg);
  }
  75%{
    transform:rotate(315deg);
  }
  100%{
    transform:rotate(405deg);
  }
}
@keyframes loading-fixed-ani2{
  17.5%,25%,42.5%,50%,67.5%,75%,92.5%,100%{
    transform:translate(0,50px);
  }
  12.5%,37.5%,62.5%,87.5%{
    transform:translate(0,35px);
  }
}
@keyframes loading-fixed-ani3{
  17.5%,25%,42.5%,50%,67.5%,75%,92.5%,100%{
    transform:rotate(90deg) translate(0,50px);
  }
  12.5%,37.5%,62.5%,87.5%{
    transform:rotate(90deg) translate(0,35px);
  }
}
@keyframes loading-fixed-ani4{
  17.5%,25%,42.5%,50%,67.5%,75%,92.5%,100%{
    transform:rotate(180deg) translate(0,50px);
  }
  12.5%,37.5%,62.5%,87.5%{
    transform:rotate(180deg) translate(0,35px);
  }
}
@keyframes loading-fixed-ani5{
  17.5%,25%,42.5%,50%,67.5%,75%,92.5%,100%{
    transform:rotate(270deg) translate(0,50px);
  }
  12.5%,37.5%,62.5%,87.5%{
    transform:rotate(270deg) translate(0,35px);
  }
}


그리고 위 코드를 아까 주석 처리한 부분 뒤에 붙혀주면 됩니다.


바로 붙혀넣기를 해도 상관이 없지만 reset.rss 코드 압축 처리가 되어있기 때문에

http://refresh-sf.com/

위 CSS 코드를 압축 해서 붙혀 넣기를 하면 더욱 좋습니다.!

압축 처리된 CSS 코드 위와 동일한 코드입니다.


.loading-fixed{width:40px;height:40px;z-index:1;transform:rotate(45deg);animation:loading-fixed-ani1 3s ease-in-out infinite}.loading-fixed i{width:40px;height:40px;display:inline-block;border-radius:50%;position:absolute}.loading-fixed i:nth-child(1){background:#ff5954;transform:translate(0,50px);animation:loading-fixed-ani2 3s ease-in-out infinite}.loading-fixed i:nth-child(2){background:#1f4c59;transform:rotate(90deg) translate(0,50px);animation:loading-fixed-ani3 3s ease-in-out infinite}.loading-fixed i:nth-child(3){background:#00b39f;transform:rotate(180deg) translate(0,50px);animation:loading-fixed-ani4 3s ease-in-out infinite}.loading-fixed i:nth-child(4){background:#ffb364;transform:rotate(270deg) translate(0,50px);animation:loading-fixed-ani5 3s ease-in-out infinite}@keyframes loading-fixed-ani1{25%{transform:rotate(135deg)}50%{transform:rotate(225deg)}75%{transform:rotate(315deg)}100%{transform:rotate(405deg)}}@keyframes loading-fixed-ani2{100%,17.5%,25%,42.5%,50%,67.5%,75%,92.5%{transform:translate(0,50px)}12.5%,37.5%,62.5%,87.5%{transform:translate(0,35px)}}@keyframes loading-fixed-ani3{100%,17.5%,25%,42.5%,50%,67.5%,75%,92.5%{transform:rotate(90deg) translate(0,50px)}12.5%,37.5%,62.5%,87.5%{transform:rotate(90deg) translate(0,35px)}}@keyframes loading-fixed-ani4{100%,17.5%,25%,42.5%,50%,67.5%,75%,92.5%{transform:rotate(180deg) translate(0,50px)}12.5%,37.5%,62.5%,87.5%{transform:rotate(180deg) translate(0,35px)}}@keyframes loading-fixed-ani5{100%,17.5%,25%,42.5%,50%,67.5%,75%,92.5%{transform:rotate(270deg) translate(0,50px)}12.5%,37.5%,62.5%,87.5%{transform:rotate(270deg) translate(0,35px)}}



이제 다음은 main.js 를 열어줍니다.


main.js에서 찾아서 변경 해줘야 할 부분


	//옵션수행
	if (setting.preloader) { //프리로드
		var htmlStr = '<div class="loading-wrap"><div class="loading-fixed"></div></div>';
		$body.prepend(htmlStr);
	}

// 위 부분을 찾아서 아래처럼 로딩 CSS 이미지 HTML의 div 값으로 변경해줍니다.

	//옵션수행
	if (setting.preloader) { //프리로드
		var htmlStr = '<div class="loading-wrap"><div class="loading-fixed"><i></i><i></i><i></i><i></i></div></div>';
		$body.prepend(htmlStr);
	}


자 그러면 로딩 이미지가 정상적으로 구현이 되는 것을 알 수 있는데...

이번에는 위치가 말썽입니다. ㅠ_ㅠ

가장 좌측 상단에서 로딩이미지가 돌기 시작합니다.

jquery를 사용해서 div가 화면 정중앙에 올 수 있도록 아래 스크립트를 추가해줍니다.


div 클래스가 화면 정중앙에 올 수 있도록 해주는 코드 main.js에 붙혀넣기


 $( document ).ready(function() {
    $(window).resize();
 }); 
 $(window).resize(function(){
     $('.loading-fixed').css({position:'absolute'}).css({
         left: ($(window).width() - $('.loading-fixed').outerWidth())/2,
         top: ($(window).height() - $('.loading-fixed').outerHeight())/2
     });
 });




드디어 정상적으로 화면 정중앙 가운데에 로딩이미지가 뜨는 것을 확인 할 수 있습니다!


감동 ㅠ_ㅠ 개감동



저도 독학으로 공부를 하고 있기에 직접 소스코드를 짤 수 도 없어서..

무슨 원리로 ㅠ_ㅠ preloader가 구현 되는지는 잘 모르지만!


그래도 CSS로 된 로딩 이미지를 바꾸는 것을 성공 했습니다.


이렇게 한 번 만들어 놓으면 앞으로 더 다양한 로딩 이미지를 틈틈히 바꿀 수 있을 것 같습니다.^-^


CCZ-CROSS 스킨을 사용 하시는 분들은 한번 블로그를 본인 개성에 맞게 꾸며 보시는 것도 좋을 것 같습니다!!

아래 링크에서 더많은 CSS 소스를 확인하세요!!

http://codepen.io/




신고

댓글을 달아 주세요

  1. BlogIcon SONYLOVE 2016.02.04 08:08 신고

    로딩이 완전 멋있어지는데요.
    저는 fouc 때매 화면전환이 느리게 느껴져서 fouc 만 모두 제거했어요.
    근데 이건 저도 왠지 해놓고 싶어집니다.

    • BlogIcon COCOSOFT COCO Media 2016.02.04 13:46 신고

      감사합니다!! 확실히 이렇게 해놓으니깐 화면 연속성(?)이 시각적으로 좋아지는거 같아서요!!^^ 나중에 CSS 관련 더예쁨 로딩 이미지로 교체를 해봐야겠습니다!

  2. BlogIcon 끄르릉 2016.02.05 21:58 신고

    ㅎㅎㅎㅎ ㅋㅋㅋ 저도 시간나면 바꿔볼께요 로딩 이미지 예쁘당 ++;;;

  3. BlogIcon SONYLOVE 2016.02.05 22:49 신고

    상단바 무지개색 로딩이 더 좋아보이네요. 화면에 크게 방해되지도 않고요.

    • BlogIcon COCOSOFT COCO Media 2016.02.06 14:40 신고

      반응형 웹이나보니 ㅠ_ㅠ 모바일에서 함께 거부감 없이 사용될 로딩바를 찾다가! 바형태로 찾게 되었네요!! http://blog.pexels.com/css-only-loaders/ 여기서 찾았어요! 요즘 저런 블로그 스킨 형태도 많이 보이네요!

  4. 2016.02.09 04:17

    비밀댓글입니다

  5. 2016.02.09 17:33

    비밀댓글입니다

티스토리 툴바