순수 CSS를 사용하여 로딩 스피너를 만듭니다.
1단계 - HTML
필요한 HTML 구조를 만듭니다(단지 한 줄).
<div class="spinner"></div>
2단계 - 기본 스타일을 추가합니다.
.spinner{
width: 64px;
height: 64px;
border: 8px solid;
border-color: #3d5af1 transparent #3d5af1 transparent;
border-radius: 50%;
animation: spin 1.2s linear infinite;
}
3단계 - 회전 애니메이션 추가
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
그게 다야! 로딩 스피너를 만들었습니다. 다음은 최종 결과입니다.
감사합니다😀
Reference
이 문제에 관하여(순수 CSS를 사용하여 로딩 스피너를 만듭니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://dev.to/devggaurav/create-a-loading-spinner-using-pure-css-4o80
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<div class="spinner"></div>
.spinner{
width: 64px;
height: 64px;
border: 8px solid;
border-color: #3d5af1 transparent #3d5af1 transparent;
border-radius: 50%;
animation: spin 1.2s linear infinite;
}
3단계 - 회전 애니메이션 추가
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
그게 다야! 로딩 스피너를 만들었습니다. 다음은 최종 결과입니다.
감사합니다😀
Reference
이 문제에 관하여(순수 CSS를 사용하여 로딩 스피너를 만듭니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://dev.to/devggaurav/create-a-loading-spinner-using-pure-css-4o80
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
Reference
이 문제에 관하여(순수 CSS를 사용하여 로딩 스피너를 만듭니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/devggaurav/create-a-loading-spinner-using-pure-css-4o80텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
