Html,Css만을 이용하여 코드로 회전하는 '로딩' 표시 만들기
스피어란?
로딩중일때 표시되는 모양은 주로 원형 모양으로 제자리에서 무한회전하는 모습이다.
이 모습을 본따 로딩 표시 기능을 '회전하다'를 의미하는 영단어인 '스피어'라고도 한다.
수 많은 웹페이지에서 서핑을 하다보면 웹페이지내 용량이 많아 로딩이 길어지거나 짧은 로딩에도 인위적으로 디자인적인 요소를 주기위해 '로딩중'표시를 넣는 경우가 많다.
스피어 사용 예시
-여러 색깔로 변하며 무한회전하는 스피어
흔히 자주 보는 원형 모양의 스피어
코드 적용하기
HTML-------------------------- <div class="box"> <div class="loader"> <svg class="circular" viewBox="25 25 50 50"> <circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10"/> </svg> </div> </div> CSS------------------------------ $green: #008744; $blue: #0057e7; $red: #d62d20; $yellow: #ffa700; $white: #eee; $width: 100px; .loader { position: relative; margin: 0 auto; width: $width; &:before { content: ''; display: block; padding-top: 100%; } } .circular { animation: rotate 2s linear infinite; height: 100%; transform-origin: center center; width: 100%; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; } .path { stroke-dasharray: 1, 200; stroke-dashoffset: 0; animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite; stroke-linecap: round; } @keyframes rotate { 100% { transform: rotate(360deg); } } @keyframes dash { 0% { stroke-dasharray: 1, 200; stroke-dashoffset: 0; } 50% { stroke-dasharray: 89, 200; stroke-dashoffset: -35px; } 100% { stroke-dasharray: 89, 200; stroke-dashoffset: -124px; } } @keyframes color { 100%, 0% { stroke: $red; } 40% { stroke: $blue; } 66% { stroke: $green; } 80%, 90% { stroke: $yellow; } } .box { position: absolute; top: 0; bottom: 0; left: 0; right: 0; padding: 5%; } JS------------------------- // @elrumordelaluz - Provided scaling fix/improvement // @faddee - Provided fix for Edge support |
스피어 활용 예
스피어(로딩 표시)는 블로그에서도 다양한 쓰임새로 활용이 가능하다.
본문에 삽입을 하므로써 이목을 끌거나 스피어 모양을 원형이 아닌 다른 형태로 변형하여 다양한 효과로 쓰일 수가 있다.
좋아요💙 구독💖 감사합니다.//////////////////////////문의는 댓글 남겨주세요.///////////////////////////////////////
'CSS' 카테고리의 다른 글
[Css] 위아래로 움직이는 사진,그림,이미지 만들기 & 예제 (10) | 2021.01.31 |
---|---|
[CSS] 마우스 올릴때 점점 늘어나는 네모칸 상자 만들기 (10) | 2021.01.19 |
[Css] 툴팁이란? 흔히 보는 툴팁 사용 예 (17) | 2021.01.11 |
[CSS] 글자,이미지 중앙 가운데 정렬하는 방법 (11) | 2021.01.04 |
[Css] float을 이용한 정렬,개념 & 예제 (2) | 2020.11.08 |