Computer >> 컴퓨터 >  >> 프로그래밍 >> CSS

CSS로 회전 애니메이션 로딩 버튼 만드는 방법

웹 페이지에서 데이터를 불러오거나 작업을 처리하는 동안 사용자에게 시각적인 피드백을 주는 것은 사용자 경험(UX) 측면에서 매우 중요합니다. CSS와 Font Awesome 아이콘 라이브러리를 활용하면 별도의 JavaScript 없이도 간단하게 회전 애니메이션이 적용된 로딩 버튼을 만들 수 있습니다.

핵심 원리는 fa-spin 클래스입니다. Font Awesome의 스피너 아이콘(fa-spinner, fa-circle-o-notch, fa-refresh)에 이 클래스를 추가하기만 하면 아이콘이 계속 회전하는 효과가 자동으로 적용됩니다.

예제 코드

<!DOCTYPE html>
<html>
<head>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
button {
   background-color: rgb(60, 24, 126);
   border: none;
   outline: none;
   color: white;
   padding: 12px 24px;
   font-size: 26px;
}
h1{
   font-size: 50px;
   font-family: monospace,sans-serif,serif;
}
i {
   margin-left: -12px;
   margin-right: 8px;
}
</style>
</head>
<body>
<h1>Loading Buttons Example</h1>
<button><i class="fa fa-spinner fa-spin"></i>Loading</button>
<button><i class="fa fa-circle-o-notch fa-spin"></i>Loading</button>
<button><i class="fa fa-refresh fa-spin"></i>Loading</button>
</body>
</html>

코드 설명

  • 버튼 스타일: 보라색 배경(rgb(60, 24, 126))에 흰색 텍스트를 적용하고, border와 outline을 제거해 깔끔한 모양을 만듭니다.
  • 아이콘 정렬: i 태그에 마진을 설정하여 회전 아이콘과 'Loading' 텍스트 사이의 간격을 조절합니다.
  • 회전 애니메이션: 각 버튼 안의 아이콘에 fa-spin 클래스를 추가하여 로딩 중임을 직관적으로 표현합니다.

실행 결과

위 코드를 실행하면 세 개의 버튼에 각각 다른 스타일의 회전 로딩 아이콘이 표시되며, 다음과 같은 화면이 나타납니다.

CSS로 회전 애니메이션 로딩 버튼 만드는 방법