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

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

흉내내기 님이 제작하신 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 부분에 false 를 true 로 고쳐서

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

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

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; 바꿔 주세요! ㅎㅎ

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

변경된 완성된 모습