웹솔루션개발 22년 노하우! 해피CGI의 모든것

[해피CGI][cgimall] 간단하게 로딩효과를 낼 수 있는 css 본문

웹프로그램밍 자료실/기타 자료

[해피CGI][cgimall] 간단하게 로딩효과를 낼 수 있는 css

해피CGI윤실장 2020. 9. 9. 09:25

 

간단한 css소스만으로 위 이미지처럼 로딩 애니메이션을 연출할 수 있습니다. ^^


<style>
  @keyframes roading{
    100% {transform:rotate(360deg);}
  }
  .roading{
   display:inline-block;
   width:50px;
   height:50px;
   border:10px solid #72b4fe;
   border-color:#72b4fe transparent transparent;
   border-radius:50%;
   animation: roading 2s linear infinite;
  }
</style>

<div class="roading"></div>

홈페이지바로가기

Comments