test.html
<html>
<head>
<link rel="stylesheet" href="loading.css" type="text/css"/>
</head>
<body>
<div class="data-list-box loading_box">
<div style="align-content: center; width: 100%; padding-top: 30px;">
<div class="loading load bar">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="text load" style="font-size: 15px; border-radius: 3px; margin-bottom: 3px;">
<p>로딩창 입니다.</p>
<p style="height: 17px;"> </p>
</div>
</div>
</div>
</body>
</html>
loading.css
@import "/css/v2/button.css";
.loading {
position: relative;
width: 96px;
height: 96px;
margin: 0 auto;
padding: 10px;
}
.bar div {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 10px;
height: 40px;
margin: auto;
margin-top: 70px;
background-color: #00fff6;
animation: bar 1s infinite linear;
}
.bar div:nth-child(1) {
right: -60px;
animation-delay: 0.3s;
}
.bar div:nth-child(2) {
right: -30px;
animation-delay: 0.15s;
}
.bar div:nth-child(3) {
animation-delay: 0s;
}
.bar div:nth-child(4) {
right: 30px;
animation-delay: -0.15s;
}
.bar div:nth-child(5) {
right: 60px;
animation-delay: -0.3s;
}
.table {
word-break:break-all !important;
width: 938px !important;
text-align: center !important;
margin: auto !important;
}
.table td{
padding: 10px;
max-width: 200px;
}
@keyframes bar {
0%, 50% {
transform: scaleY(1);
}
25% {
transform: scaleY(1.5);
}
}
.text{
border-radius:100%;
margin-top: 70px;
text-align: center;
}
결과 창
'IT > IT' 카테고리의 다른 글
| 크롬 다운로드 위치 변경 (0) | 2020.11.25 |
|---|---|
| GIF 캡쳐하기 (0) | 2020.07.27 |
| 브라우저별 TLS 1.0, TLS 1.1 프로토콜 지원 중단 (0) | 2020.07.27 |