로드 중... 바닐라 JavaScript의 애니메이션

플라톤에 의해 재발행

팔로워 : 0

개요

로딩 애니메이션을 포함하여 웹사이트와 웹 애플리케이션을 개발할 때 진행 상황을 전달함으로써 사용자 경험을 크게 향상시킬 수 있습니다. 이렇게 하면 콘텐츠를 로드하는 동안 사용자의 관심을 끌고 주의를 끌 수 있으며 사용자가 추측하지 않고 진행 상황을 이해하는 데 도움이 됩니다.

이 가이드에서는 바닐라 JavaScript를 사용하여 로딩 애니메이션을 만드는 방법을 살펴보겠습니다. 우리는 애니메이션과 GIF를 및 CSS 생성 로더를 살펴보고 앱/웹사이트 시작 시 콘텐츠를 로드하거나 외부 API에서 콘텐츠를 요청하는 두 가지 시나리오에서 이를 사용하는 방법을 확인합니다.

로더를 만드는 방법

사람들이 로더를 표시하려는 다양한 방법이 있습니다. 이 가이드의 목적을 위해 전체 화면을 덮고 페이지 로드가 완료되면 사라지는 로더를 만들 것입니다. 먼저 자리 표시자 HTML 페이지를 만들어야 합니다.

<div class="loader-container"> <div class="spinner"></div>
</div> <div class="main-content"> <h1>Hello World!</h1> <p> This is a demo Project to show how to add animated loading with Vanilla JavaScript. </p> <div class="buttons"> <button class="btn"><a href="#">Read Article</a></button> <button class="btn get-quote">Generate Quote</button> </div> <div class="quote-section"> <blockquote class="quote"> If you do not express your own original ideas, if you do not listen to your own being, you will have betrayed yourself. </blockquote> <span class="author">- Rollo May</span> </div>
</div>

단순함을 위해 우리는 XNUMX개만 가지고 있습니다. <div> 블록 – 하나는 로더용이고 다른 하나는 웹사이트 콘텐츠용입니다.

앞서 언급했듯이 로딩 아이콘은 GIF, CSS 또는 다른 것으로 만든 애니메이션 아이콘. 기억해야 할 중요한 점은 동일한 접근 방식이 우리가 사용하는 모든 유형의 로딩 아이콘에 적용된다는 것입니다.

GIF를 사용하여 로더 만들기

A GIF 무한히 재생되는 애니메이션 아이콘입니다. 한 번 우리는 우리의 GIF, 우리는 스타일 loader-container 그것을 수용할 div. 다양한 스타일링 방법이 있습니다! 여기서 창의력을 발휘할 수 있습니다. 로딩 콘텐츠를 "차단"하기 위해 아이콘과 함께 페이지 상단에 검정색 배경이 있는 레이어를 추가하기만 하면 됩니다.

.loader-container { width: 100%; height: 100vh; position: fixed; background: #000 url("https://media.giphy.com/media/8agqybiK5LW8qrG3vJ/giphy.gif") center no-repeat; z-index: 1;
}

지금 웹 페이지를 로드하면 검은색 배경에 GIF 다음과 유사한 화면 중앙에 로드:

이 시점에서 JavaScript를 사용하여 로드를 구현할 준비가 되었습니다. 그러나 대신 CSS 생성 애니메이션을 사용하는 방법도 살펴보겠습니다. GIF, 가져올 추가 파일이 필요하지 않습니다.

CSS를 사용하여 로더 만들기

CSS를 사용하여 정확히 동일한 아이콘을 만들 것입니다. 추가 div(spinner) 내부 loader-container div는 아이콘을 나타내는 데 사용할 것입니다.

.spinner { width: 64px; height: 64px; border: 8px solid; border-color: #3d5af1 transparent #3d5af1 transparent; border-radius: 50%; animation: spin-anim 1.2s linear infinite;
} @keyframes spin-anim { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); }
}

위의 코드는 CSS loader-icon을 만드는 데 도움이 됩니다. 이제 loader-container div를 사용하여 이전과 같이 검정색 배경을 중앙에 추가하고 추가할 수 있습니다.

.loader-container { width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; position: fixed; background: #000; z-index: 1;
}

이제 두 가지 유형의 애니메이션 로더를 사용할 수 있으므로 JavaScript를 사용하여 이 로딩 애니메이션이 나타나고 사라지는 시기를 제어해 보겠습니다.

참고 : 이 라이브를 확인할 수 있습니다 코드펜 데모 우리가 실제로 만든 로더를 살펴보기 위해.

JavaScript로 로딩 애니메이션을 구현하는 방법

JavaScript를 사용하면 HTML 구조를 조작하고 제거하거나 숨길 수 있습니다. loader-container 현재 표시되는 앞에 웹사이트의 내용. 이를 달성하기 위한 두 가지 주요 접근 방식이 있습니다. loader-container, 또는 완전히 제거합니다.

어떤 접근 방식을 선택하든 첫 번째 단계는 querySelector() or getElementById() 검색 loader-container 우리가 그것을 조작할 수 있도록:

const loaderContainer = document.querySelector('.loader-container');

둘째, 우리는 eventListener 듣기 위해 load 이벤트가 발생하면 콜백 함수를 호출합니다. load 이벤트 발생:

window.addEventListener('load', () => { // ...
});

로딩 중… 요소 숨기기

가장 일반적인 방법은 숨기는 것입니다. loader-container 과 display: none 콘텐츠가 완전히 로드되면 사라집니다.

HTML DOM을 사용하면 JavaScript에서 HTML 요소의 스타일을 변경할 수 있으며 아래 코드는 로더의 컨테이너를 설정하고 있음을 나타냅니다. display 재산 none 한 번 나타나지 않도록 load 성공:

window.addEventListener('load', () => { loaderContainer.style.display = 'none';
});

또는 다음을 보유하는 별도의 클래스를 만들 수 있습니다. display: none 재산:

.loader-container-hidden { display: none;
}

그리고 사용 classList.add() 클래스를 추가하려면 loader-container 요소:

window.addEventListener('load', () => { loaderContainer.classList.add('loader-container-hidden');
});

로딩 중… 요소 제거

지금까지 우리는 우리가 자신의 정보를 숨길 수 있는 주요 방법을 보았습니다. loader-container, 요소가 여전히 존재하지만 숨겨져 있음을 나타냅니다. 또 다른 옵션은 요소를 완전히 제거하는 것입니다.

window.addEventListener('load', () => { loaderContainer.parentElement.removeChild(loaderContainer);
});

이 시점에서 페이지를 로드할 때 페이지 콘텐츠가 완전히 로드될 때까지 로드 애니메이션이 표시됩니다.

API에서 외부 콘텐츠를 요청할 때 애니메이션 로드 구현

외부 API에서 콘텐츠를 가져오는 것은 로더를 포함해야 하는 또 다른 상황입니다. 이러한 유형의 콘텐츠는 가져오고 표시하는 데 시간이 걸릴 수 있으므로 로더를 포함하는 것이 가장 좋습니다.

우리의 경우 견적을 받아보자. 인용 API 내장된 Fetch API를 사용합니다. 이 기사의 시작 부분에서 만든 HTML에는 "견적 생성" 단추. 우리가해야 할 일은 사용하는 것입니다. document.querxySelector() 요소를 가져오고 처리할 콜백 함수를 만드는 메서드 click 사용자가 버튼을 클릭할 때 발생하는 이벤트:

const getQuoteBtn = document.querySelector('.get-quote'); getQuoteBtn.addEventListener('click', () => { fetch('https://api.quotable.io/random') .then((response) => { return response.json(); }) .then((data) => { const quote = document.querySelector('.quote'); const author = document.querySelector('.author'); quote.innerHTML = data.content; author.innerHTML = data.author; });
});

이렇게 하면 응용 프로그램에 임의의 따옴표를 가져오는 데 성공적으로 도움이 되지만 애니메이션로드 사용자가 콘텐츠를 기대한다는 것을 알 수 있도록 합니다. 이를 수행하기 위해 두 가지 방법을 만들 것입니다. 하나는 loader-container 다른 하나는 숨기기:

const displayLoading = () => { loaderContainer.style.display = 'block';
}; const hideLoading = () => { loaderContainer.style.display = 'none';
};

참고 : 우리가 사용하는 display: none하지만 앞에서 나열한 다른 방법 중 하나를 사용할 수 있습니다.

이 시점에서 마침내 로딩 애니메이션을 콜백 함수에 통합할 수 있습니다. 가져오기가 시작되면 콜백 함수는 로딩 애니메이션을 표시하고 데이터가 수신되면 숨깁니다:

getQuoteBtn.addEventListener('click', () => { displayLoading(); fetch('https://api.quotable.io/random') .then((response) => { return response.json(); }) .then((data) => { hideLoading(); const quote = document.querySelector('.quote'); const author = document.querySelector('.author'); quote.innerHTML = data.content; author.innerHTML = data.author; });
});

결론

이 기사에서는 바닐라 JavaScript를 사용하여 로딩 애니메이션을 만들고 적절하게 표시하는 방법을 배웠습니다. 이를 달성하기 위한 다양한 접근 방식을 고려하고 로딩 애니메이션에 대한 몇 가지 다른 사용 사례를 살펴보았습니다. 회전하는 원을 로더로 사용하기로 결정했지만 원하는 대로 변경할 수 있습니다. 자유롭게 자신만의 원을 만들 수 있습니다. GIF 또는 CSS 애니메이션 로더.

타임 스탬프 : ２０２３년 ６월 ２８일