페이스북 스타일 로딩바
어디서 가져왓더라 기억이
이전부터 페이스북 로딩바는 이쁘다고 생각했다. 그 이전에는 전형적인 동그란 원형 로딩이 다였는데 새로운게 오래전에 나왔다.
지금봐도 여전히 깔끔한거 같다.
<style>
/* FACEBOOK LOADER */
.loader {
width: 32px;
height: 32px;
margin: 0 auto;
}
/* Initial state */
.bar {
background-color: #99aaca;
border: 1px solid #96a6c9;
float: left;
margin-right: 4px;
margin-top: 6px;
width: 6px;
height: 18px;
/* Set the animation properties */
animation-duration: 1s;
animation-iteration-count: infinite;
animation-name: loadingbar;
}
.loader .bar:last-child {
margin-right: 0px;
}
/* Delay both the second and third bar at the start */
.loader .bar:nth-child(2) {
animation-delay: 0.1s;
}
.loader .bar:nth-child(3) {
animation-delay: 0.2s;
}
/* The actual animation */
@keyframes loadingbar {
0% { }
10% {
margin-top: 5px;
height: 22px;
border-color: #d1d8e6;
background-color: #bac5db;
}
20% {
margin-top: 0px;
height: 32px;
border-color: #d1d7e2;
background-color: #c6ccda;
}
30% {
margin-top: 1px;
height: 30px;
border-color: #d1d8e6;
background-color: #bac5db;
}
40% {
margin-top: 3px;
height: 26px;
}
50% {
margin-top: 5px;
height: 22px;
}
60% {
margin-top: 6px;
height: 18px;
}
70% { }
100% { }
}
</style>
</head>
<body>
<!-- FACEBOOK LOADER -->
<div class="loader">
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
</div>
페이스북 스타일 로딩 애니메이션 분석
이 코드는 페이스북 스타일의 로딩 애니메이션을 구현하는 CSS 코드이다. 3개의 막대기가 번갈아 가며 위아래로 점프하는 효과를 준다. 각 막대기는 .bar 클래스를 사용하여 스타일이 지정되었으며, 애니메이션은 @keyframes loadingbar을 통해 구현되었다.
1. 로더 크기와 위치 설정
.loader 클래스는 로딩 애니메이션의 크기와 위치를 설정한다. 크기는 32px x 32px로 지정되었고, margin: 0 auto; 속성을 통해 가로로 중앙 정렬되게 했다.
.loader {
width: 32px;
height: 32px;
margin: 0 auto;
}
2. 막대기의 기본 스타일
.bar 클래스는 각 로딩 막대기의 스타일을 지정한다. 배경색은 #99aaca로, 테두리는 #96a6c9로 설정되었다. 각 막대기의 너비와 높이는 width: 6px, height: 18px로 설정되었다. 애니메이션은 1초 간격으로 무한 반복되며, 애니메이션 이름은 loadingbar로 지정되었다.
.bar {
background-color: #99aaca;
border: 1px solid #96a6c9;
float: left;
margin-right: 4px;
margin-top: 6px;
width: 6px;
height: 18px;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-name: loadingbar;
}
3. 애니메이션 딜레이
두 번째와 세 번째 막대기에 애니메이션의 시작 시점을 지연시키기 위해 animation-delay 속성을 사용하였다. 첫 번째 막대기는 바로 시작하고, 두 번째는 0.1초 뒤에, 세 번째는 0.2초 뒤에 애니메이션이 시작되도록 설정되었다.
.loader .bar:nth-child(2) {
animation-delay: 0.1s;
}
.loader .bar:nth-child(3) {
animation-delay: 0.2s;
}
4. 애니메이션 설정
애니메이션은 @keyframes loadingbar을 사용하여 정의되었다. 각 단계에서는 막대기의 margin-top과 height, 그리고 background-color와 border-color가 변화하며, 이로 인해 점프하는 효과가 나타난다. 막대기의 크기는 **22px**에서 **32px**로 증가하고, 색상도 점진적으로 변화한다.
@keyframes loadingbar {
0% { }
10% {
margin-top: 5px;
height: 22px;
border-color: #d1d8e6;
background-color: #bac5db;
}
20% {
margin-top: 0px;
height: 32px;
border-color: #d1d7e2;
background-color: #c6ccda;
}
30% {
margin-top: 1px;
height: 30px;
border-color: #d1d8e6;
background-color: #bac5db;
}
40% {
margin-top: 3px;
height: 26px;
}
50% {
margin-top: 5px;
height: 22px;
}
60% {
margin-top: 6px;
height: 18px;
}
70% { }
100% { }
}</code></pre>
<h3>5. 최종 결과</h3>
<p>이 CSS 애니메이션은 3개의 막대기가 순차적으로 **점프하며 크기와 색상이 변하는 효과**를 제공한다. 이러한 애니메이션은 로딩 화면에서 **사용자에게 직관적인 로딩 상태**를 보여줄 수 있게 돕는다. 무한 반복되는 애니메이션은 로딩이 완료될 때까지 지속되며, 웹 페이지의 로딩 상태를 직관적으로 전달한다.</p>