로딩창 만들기 🔥

HTML

  <section class="loading">
    <h1 class="loading-title">Loading....</h1>
    <div class="progress-bar" aria-hidden="true">
      <span class="progress-bar-gauge"></span>
    </div>

로딩창을 만들기위한 기본적인 뼈때

CSS 파트

기본틀

*{
  box-sizing: border-box;
  margin: 0 auto;
}

기본적으로 전체적으로 box-sizing: border-box를 사용하여 박스의 넓이를 잡아준다. margin : 0 auto를 통하여 중앙 정렬을 해준다.

loading css

.loading{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 500px;
height: 220px;
}

loading-tilte

.loading-title {
font-size: 30px;
font-weight: 400;
line-height: 1.3333333333;
color: #151B26;
text-align: center;
animation-name: flicker;
animation-duration: 1600ms;
animation-iteration-count: infinite;
animation-direction: alternate;
margin-bottom: 20px;
}

progress-bar

.progress-bar{
width: 300px;
height: 12px;
background-color: #e5eaef;
border-radius: 100px;
position: relative;
overflow: hidden;
}

progress-bar-gauge

.progress-bar-gauge{
position: absolute;
top: 0;
left: 0;
width: 20px;
height: 12px;
border-radius: 100px;
background-color: #13CE66;
animation-name: loading-bar;
animation-duration: 1600ms;
animation-iteration-count: infinite;
animation-timing-function: ease-out;
}

애니메이션 효과

@keyframes flicker{
  from{
    opacity: 1;
  }
  to{
    opacity: 0;
  }
}

@keyframes loading-bar{
0% {
  width: 0;
  opacity: 0;
}
90%{
  width: 100%;
  opacity: 1;
}
100%{
  width: 100%;
  opacity: 0;
}
}