Loader는 거의 모든 웹 애플리케이션에서 사용되는 웹 구성 요소입니다. 로더 링을 구축하려면 CSS(Cascading Style Sheets)에 대한 사전 지식이 있어야 합니다. CSS는 로더 링의 스타일 지정 및 애니메이션 부분에 관여하기 때문입니다. 원본 콘텐츠가 웹 페이지에 로드되기 전에 로더 구성 요소가 로드되기 때문입니다. 이 기능을 구축하는 데 사용되는 기본 스타일 속성은 애니메이션, 전환 및 키프레임입니다. 이 세 가지 CSS 속성은 간단한 정적 애니메이션 로딩 루프를 애니메이션 로딩 루프로 전환합니다.
1단계 - 폴더에 HTML 파일을 만들고 텍스트 편집기를 사용하여 엽니다. HTML 파일에 HTML 상용구를 추가합니다.
2단계 − HTML 문서의 body 태그에 클래스 이름이 "loading"인 HTML 상위 div 컨테이너를 만듭니다.
으아아아3단계 −클래스 이름이 "Loader"인 메인 로더 링인 하위 div 컨테이너를 만듭니다.
으아아아4단계−"Loading"이라는 텍스트가 포함된 p 태그를 만듭니다.
으아아아5단계 − 이제 style.css 파일을 만들고 해당 파일을 HTML 문서에 연결합니다.
으아아아6단계 − 이제 HTML 요소의 스타일을 지정하고 웹 페이지에서 로더 링을 만듭니다.
으아아아Step 7 − 로더 클래스를 대상으로 하고 테두리 반경을 사용하여 테두리를 만들어 링 프레임과 같은 구조를 만듭니다.
으아아아8단계 − 애니메이션 이름이 "lring"이고 애니메이션 기간과 반복 횟수가 포함된 애니메이션 속성을 로더 요소에 추가합니다.
으아아아9단계 − 이제 키프레임 속성을 생성하고 위 애니메이션의 위치를 지정하고 애니메이션을 요소에 설정합니다.
으아아아10단계 − 애니메이션 로딩 링이 성공적으로 생성되었습니다.
이 예에서는 간단한 HTML 및 CSS 애니메이션 속성을 사용하여 애니메이션 로딩 루프 기능 구성 요소를 만듭니다. 이를 달성하기 위해 우리는 두 개의 파일을 만들었습니다. 첫 번째 파일은 로더 링의 레이아웃 또는 프레임인 index.html이고 다른 파일은 로더 링의 스타일 및 작업인 style.css 파일입니다. p> 으아아아
위 기능은 모든 웹 또는 모바일 애플리케이션에서 사용할 수 있습니다. 위에서 생성된 것은 단지 구성 요소이기 때문에 API를 사용하여 데이터나 로컬 데이터를 가져옴으로써 이 기능 구성 요소를 실제 작업 애플리케이션에 포함할 수 있으므로 네트워크 데이터가 아직 웹 페이지에 로드되지 않은 경우 로딩을 표시할 수 있습니다. 화면의 애니메이션 루프 데이터가 로드되면 로딩 루프를 웹 사이트 콘텐츠로 대체합니다. 또한 다양한 디자인의 애니메이션 로드를 구축할 수도 있습니다.
위 내용은 HTML과 CSS를 사용하여 애니메이션 로더 링을 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
