웹사이트는 사용자의 기다림을 방지하기 위해 로딩바를 표시한다. 적절한 정보가 들어간 로딩화면은 방문한 사람들의 이탈률을 줄이는 역할도 한다. 일부 웹페이지의 경우 로딩바를 대신하여 몇가지 정보성 팁 메세지창을 나타내기도 한다.
웹사이트 로딩바 만들기
로딩화면으로 사용자에 기다림 방지
검색을 하고 정보를 탐색하고 웹사이트를 방문하면 가끔씩 화면에 아이콘이 돌아가는 모습을 볼 수 있다.
이것은 로딩바 또는 로딩화면이라 하며 사용자에게 웹페이지가 완전히 뜰 때까지 기다리는 것을 방지하는 역할을 한다.
어떤 웹페이지는 한업이 빈페이지만 나올 때가 있고 어떤 페이지는 오류를 나타내기 때문에 사용자에 알림 형식으로 알려줄 필요는 있다.
웹페이지의 정보가 다 나타날 때까지 사용자에게 기다림을 방지하고 데이터가 나타나는 것을 가시적으로 보여주기 위해 로딩바를 사용한다.
필요한 것
웹사이트에 나타날 로딩바를 만들 때 필요한 것은 움직이는 아이콘과 css, javascript 정도를 이용한다.
움직이는 아이콘은 검색하면 많기 떄문에 적당한 것을 사용하도록 하자.
css 는 아이콘의 위치를 지정하거나 화면을 조금 어둡게 하여 웹페이지가 모두 나타나지 전까지 사용자가 조작할 수 없도록 하기 위함이다. 부분 로딩을 사용하면 크게 상관은 없다.
자바스크립트는 웹페이지가 실행되면 로딩바를 화면에 표현하고 웹페이지의 텍스트와 리소스 등이 로딩된 이후 로딩바를 제거하는 역할을 한다.
움직이는 아이콘을 찾아보자.
움직이는 아이콘은 구글에서 검색하면 많이 나오기 때문에 아무거나 선택한다.
혹은 전문적으로 아이콘을 만들어 주는 웹사이트를 방문하여 다운로드해도 되지만 저작권을 확인해 본다.
본인의 경우 loding.io 에서 제공하는 아이콘을 사용하였다.
예쁘고 가시성이 좋은 아이콘들이 많기 때문에 적당히 골라 사용하면 되지만, 저작권에 대한 내용이 있기 때문에 반드시 확인해 본다.
loading.io - Your SVG + GIF + PNG Ajax Loading Icons and Animation Generator
Build Your Ajax Loading Icons, Animated Text and More with SVG / CSS / GIF / PNG !
loading.io
HTML 구성하기
로딩바를 만들기 전에 html 화면을 만들어 본다.
로딩바에 테스트와 함께 웹페이지를 제작하였다 가정하고 로딩화면을 구현하고 테스트 하기 위함이다.
html 화면의 내용은 별 게 없다.
텍스트와 함께 로딩바 아이콘을 표시해 주도록 한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>로딩바 만들기</title>
</head>
<body>
<div>
<h2>로딩바 만들기</h2>
<p>로딩바 만들기. 로딩바 만들기. 로딩바 만들기. 로딩바 만들기.</p>
<p>로딩바 만들기. 로딩바 만들기. 로딩바 만들기. 로딩바 만들기.</p>
<p>로딩바 만들기. 로딩바 만들기. 로딩바 만들기. 로딩바 만들기.</p>
<p>로딩바 만들기. 로딩바 만들기. 로딩바 만들기. 로딩바 만들기.</p>
<p>로딩바 만들기. 로딩바 만들기. 로딩바 만들기. 로딩바 만들기.</p>
<p>로딩바 만들기. 로딩바 만들기. 로딩바 만들기. 로딩바 만들기.</p>
</div>
<div id="loading">
<img src="loading.gif">
</div>
</body>
</html>아래와 같은 화면이 나오면 정상이다.
스타일 적용하기
css 를 이용하여 화면을 조금 흐르게 하고 움직이는 gif 를 화면의 가운데에 위치시키도록 한다.
가운데라고는 하지만 뭔가 조금 빈약하다.
추후에 코드를 조금 수정해 보도록 하고 지금은 이대로 넘어가본다.
<style>
#loading {
width: 100%; height: 100%;
top: 0; left: 0;
position: fixed;
display: block;
opacity: 0.5;
background: #ffffff;
text-align: center;
}
#loading > img {
position: absolute;
top: 35%;
left: 45%;
}
</style>head 태그 내에 style 태그를 입력하고 화면을 보면 아래와 같이 나타날 것이다.
전체적으로 화면은 조금 흐려졌지만 아이콘이 움직이고 있는 것을 볼 수 있다.
으음~ 조금 아쉽다. 능력의 한계를 조금은 느껴본다.
자바스크립트 동작 구현
jquery 를 사용하였으며 화면을 클릭하면 로딩바가 사라지도록 하였다.
본래는 클릭이 아니라 웹페이지에 모든 요소가 나타나면 로딩바가 사라지도록 해야 되는 것이 많지만, 지금은 테스트이며 텍스트가 나타나는 것이 너무 빠르기 때문에 로딩바가 눈보다 빠르게 나타났다 사라진다. 보이지도 않는다.
그렇기에 클릭이벤트를 추가하여 테스트 해 보도록 한다.
/** jquery lib */
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$('#loading').show();
$(window).on('load', function() {
console.log('jquery ready with resources');
/** 원래는 이것을 사용
$('#loading').hide();
*/
/** 화면이 너무 빠르게 로딩되기 때문에 클릭으로 테스트 */
$('#loading').click(function(){
$('#loading').hide();
return true;
});
});
$(document).ready( function() {
console.log('jquery ready without resources');
});
</script>웹페이지가 나타나고 로딩바가 화면에 나타난다.
화면을 마우스로 클릭하면 로딩바가 사라지고 화면은 다시 밝아지도록 하였다.
전체 코드 보기
아이콘을 넣고 html 을 만들고 css 를 붙여 화면을 꾸미고, 자바스크립트를 이용해 동작을 표현했다.
위에서 작성한 코드를 모두 합친 전체 코드를 확인해 보고 결과를 확인해 본다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>로딩바 만들기</title>
<style>
#loading {
width: 100%; height: 100%;
top: 0; left: 0;
position: fixed;
display: block;
opacity: 0.5;
background: #ffffff;
text-align: center;
}
#loading > img {
position: absolute;
top: 35%;
left: 45%;
}
</style>
</head>
<body>
<div>
<h2>로딩바 만들기</h2>
<p>로딩바 만들기. 로딩바 만들기. 로딩바 만들기. 로딩바 만들기.</p>
<p>로딩바 만들기. 로딩바 만들기. 로딩바 만들기. 로딩바 만들기.</p>
<p>로딩바 만들기. 로딩바 만들기. 로딩바 만들기. 로딩바 만들기.</p>
<p>로딩바 만들기. 로딩바 만들기. 로딩바 만들기. 로딩바 만들기.</p>
<p>로딩바 만들기. 로딩바 만들기. 로딩바 만들기. 로딩바 만들기.</p>
<p>로딩바 만들기. 로딩바 만들기. 로딩바 만들기. 로딩바 만들기.</p>
</div>
<div id="loading">
<img src="loading.gif">
</div>
</body>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$('#loading').show();
$(window).on('load', function() {
console.log('jquery ready with resources');
/** 원래는 이것을 사용
$('#loading').hide();
*/
/** 테스트용 클릭 이벤트 */
$('#loading').click(function(){
$('#loading').hide();
return true;
});
});
$(document).ready( function() {
console.log('jquery ready without resources');
});
</script>
</html>'programming > javascript' 카테고리의 다른 글
| 자바스크립트 에러 발생 시키기 강제로 에러 만들고 테스트하기 (0) | 2022.12.16 |
|---|---|
| jquery ajax 순차적 동기 처리 async false 메서드의 실행이 완료될 때까지 기다린다. (0) | 2022.12.13 |
| 자바스크립트 Map 요소 값 삭제하기 Removing value at Map (0) | 2022.06.26 |
| 자바스크립트 Map 값 추가하기 adding value at Map (0) | 2022.06.20 |
| 자바스크립트 Map 사용하기 키와 값을 쌍으로 가진 데이터 타입 using javascript Map Data Object (0) | 2022.06.17 |
댓글