본문으로 바로가기

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

로딩중..
2016.02.09 18:35

안녕하세요. 오늘은 제가 사용하는 블로그 스킨

흉내내기 님이 제작하신 CCZ-CROSS 스킨의 preloader 기능의 로딩 이미지를

GIF 파일이 아닌 .CSS 로 변경하는 작업 2편을 해보겠습니다!


자세한 개념이나 내용 설명은 1편을 참고 해주시구요.

이번 편은 손쉽게 따라 할 수 있게 제작을 해보겠습니다.


사용 할 예제

See the Pen xbwVXJ by brunjo (@brunjo) on CodePen.


사용할 소스입니다. 구글의 로딩 바의 형식의 코드입니다.


준비물

우선 Notepad++ 는 공개 소스코드 편집기이자 여러 언어를 지원하는 메모장 프로그램입니다.


그리고 main.js 파일 및 reset.css 파일을 준비 합니다.


관리 홈에서 [HTML/CSS 편집] - > 우측 상단 [파일업로드] 를 클릭 하고

두 개의 파일을 다운 받으면 됩니다.

첫 번째 main.js 파일을 수정


Notepad++ 편집기로 main.js 파일은 먼저 열어줍니다.


가장 먼저 상단 트리거 preloader 부분에 falsetrue 로 고쳐서

기능을 활성화 시켜줍니다.


그다음 아래 해당 부분을 찾아서 값을 변경해 줍니다.

loding-fixed 변경 부분


	//옵션수행
	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);
	}

변경된 완성된 모습

이렇게 되야 합니다!

두 번째 reset.css 파일을 수정

이번엔 reset.css 파일을 열어줍니다.


.loading-fixed 부분을 찾아서 위아래로 /* */ 를 사용해 주석 처리를 해줍니다.

코드가 압축 되어 있기 때문에 잘보고 아래와 같이 주석 처리를 해줘야합니다. 



reset.css에서 새로 추가해야할 .fixed 부분


/* 아래 새로운 로딩바 CSS 코드를 삽입 시켜줍니다 */
.loading-fixed{position:absolute;margin-top:0;z-index:99999;width:100%;height:4px;background-color:#3cba54}.loading-fixed i{content:"";display:inline;position:absolute;width:0;height:100%;left:50%;text-align:center}.loading-fixed i:nth-child(1){background-color:#4885ed;animation:loading 3s linear .75s infinite}.loading-fixed i:nth-child(2){background-color:#db3236;animation:loading 3s linear 1.5s infinite}.loading-fixed i:nth-child(3){background-color:#f4c20d;animation:loading 3s linear 2.25s infinite}.loading-fixed i:nth-child(4){background-color:#3cba54;animation:loading 3s linear 3s infinite}@keyframes loading{from{left:50%;width:0;z-index:100}25%{left:0;width:100%;z-index:10}to{left:0;width:100%}}

기존에 설치 하셨던 분들은 .loading-fixed 에서 position: relative; 이부분을 position: absolute; 바꿔 주세요! ㅎㅎ

위에 코드는 바꿔났습니다.


변경된 완성된 모습


위 코드에서 height:4px 을 조절하면 로딩바의 높이

background-color:#3cba54 /*제일처음 기본색*/

i:nth-child(1){background-color:#4885ed;

i:nth-child(2){background-color:#db3236;

i:nth-child(3){background-color:#f4c20d;

i:nth-child(4){background-color:#3cba54;


부분을 수정하시면 색상을 변경 할 수 있습니다.!!


그럼 다들 한번 프리로더 기능을 사용해보시고 로딩바 이미지도 교체해서

블로그를 꾸며 보시길 바랍니다^^

신고

댓글을 달아 주세요

  1. 2016.02.09 23:18

    비밀댓글입니다

    • BlogIcon COCOSOFT COCO Media 2016.02.10 00:49 신고

      정상적으로 잘작동 하시는데요!! ㅎㅎ

      아그리고 <div class="e-content post-content fouc"></div>

      이부분이 본문 내용 영역인데 fouc[화면깜빡임]방지 처리가 되어있는데
      저는 로딩연속성을 위해서
      <div class="e-content post-content"></div>
      fouc를 빼버렸답니다. 한번 참고하시면 좋으실것같아요!^^ 설연휴마무리잘하세요!!

  2. BlogIcon 설랭 2016.02.10 00:52 신고

    감사합니다. ^^

    더 공부해서 잘 이해하도록 하겠습니다^^ㅎ

  3. BlogIcon 세모뷰 2016.02.17 19:02 신고

    1편의 소스를 수정해준다음에 2편을 적용시켜야만 하는건가요??따라하는데도 잘 안되네용 ㅠㅠ

    • BlogIcon COCOSOFT COCO Media 2016.02.17 19:07 신고

      2편만 하셔도 적용이 되실거에요!! 지금 페이지를 보니깐 main.js 부분에 정상적으로 수정이 안된것 같아요!!

      <div class="loading-wrap"><div class="loading-fixed"></div></div>

      이부분을 찾아서
      <div class="loading-wrap"><div class="loading-fixed"><i></i><i></i><i></i><i></i></div></div>

      이렇게 바꿔보시구 컨트롤+쉬프트+delete키를 눌러서 캐시를 삭제하고 다시 접속해보세요!!

    • BlogIcon 세모뷰 2016.02.17 19:19 신고

      감사합니다. 버전관리가 잘 안되서 그런지...이젠 썸네일 이미지들이 문제가 되네요..하루종일 접속해있으니 회사에서 도대체 뭐하는거냐고 그러네요ㅋㅋ

  4. BlogIcon SONYLOVE 2016.02.17 20:12 신고

    저는 main.js 와 reset.css 를 안쓰는 기능들을 거의 다 지워놔서 프리로더 부분도 안쓰는줄 알고 모두 지워버렸더라고요.
    그래도 혹시나 해볼까 싶어서 시도해봤더니 제대로 작동이 안되더라고요. 너무 지웠나봐요.ㅋㅋ

  5. 2016.12.11 18:35

    비밀댓글입니다

티스토리 툴바