본문 바로가기

인터넷/티스토리 꾸미기

웹사이트 로딩바 만들기

티스토리에 로딩화면을 만들어보자.

우선 이 로딩화면을 추가 할때 단점부터 이야기 하자면 로딩이 필요 없는 부분(?)에서도 로딩화면이 돌기 때문에 사실상 로딩이 더 길어지는 것이 사실이다. 물론 체감상 그리 큰 차이는 아니지만 수치적으로는 그렇다.

즉 바로 보여도 되는 페이지도 로딩화면이 돌기 때문에 그런 단점이 생기는 것인데 로딩 자체 역시 그리 길지 않기 떄문에 체감이 크지 않다고 말할 수 있다. 여하튼 장점과 단점이 확실하기에 이 내용을 포스팅을 할까 말까 하다가 선택은 여러분의 몫으로 남기고 로딩화면이 필요하신분들에겐 좋은 자료가 될 것 같아서 포스팅 한다. 굉장히 간단하니 쉽게 할 수 있을 것이다.

HEAD와 /HEAD 사이에 추가




필자가 사용한 로딩화면 CSS 코드다.

여기에서 포인트는 .loading-bar 에서 background-color와 바로 밑에 transition의 width를 변경하는 것인데 background-color는 알다시피 로딩바의 색을 조절할 수 있고 width는 로딩바의 길이를 말하는데 클수록 자체 로딩이 길어진다. 필자는 1500이 적당하다고 생각한다. head가 길어지는 것이 싫으신분은 CSS에 style 부분을 추가하시고 script 부분은 js파일로 만들어서 업로드 후 불러오는 쪽으로 하시길 바란다.

BODY 바로 밑에 추가



BODY의 바로 밑에 그대로 복사해서 붙이면 끝이다.


마지막 부분에 450수치는 로딩이 완료후 페이드 되는 수치다. 0으로 하면 페이드가 되지 않고 바로 보인다. 그러나 변경하는 걸 추천하지 않는다. 이제 새로 고침을 하면 사이트 상단에 로딩바가 보일 것이다.
궁금한점이 있거나 안되는 부분이 있다면 댓글 남겨주시면 답해드리도록 하겠다.

출처 https://thinking-twins.webflow.io/preloader