👉 로딩바 예제 (HTML, CSS, CSS-Animation) 사용
로딩바 Animation
👉 HTML 코드 (loading.html)
<html>
<head>
<link rel="stylesheet" href="loading.css">
</head>
<body>
<div class="loading-container">
<div class="loading"></div>
<div id="loading-text">loading</div>
</div>
</body>
</html>
👉 CSS 코드 (loading.css)
body {background: #333333;}
/* Rotation Box */
@keyframes rotate-loading {
0% {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
}
@-moz-keyframes rotate-loading {
0% {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
}
@-webkit-keyframes rotate-loading {
0% {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
}
@-o-keyframes rotate-loading {
0% {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
}
/* Text Loading Bar */
@keyframes loading-text-opacity {
0%{opacity: 0} 50%{opacity: 1} 100%{opacity: 0}
}
@-moz-keyframes loading-text-opacity {
0%{opacity: 0} 50%{opacity: 1} 100%{opacity: 0}
}
@-webkit-keyframes loading-text-opacity {
0%{opacity: 0} 50%{opacity: 1} 100%{opacity: 0}
}
@-o-keyframes loading-text-opacity {
0%{opacity: 0} 50%{opacity: 1} 100%{opacity: 0}
}
.loading-container { margin: 40px auto }
.loading-container,.loading {
height: 100px;
position: relative;
width: 100px;
border-radius: 100%;
}
.loading-container:hover .loading {
border-color: transparent #E45635
}
.loading {
border: 2px solid transparent;
border-color: transparent #fff;
animation: rotate-loading 1.5s linear 0s infinite normal;
-moz-animation: rotate-loading 1.5s linear 0s infinite normal;
-o-animation: rotate-loading 1.5s linear 0s infinite normal;
-webkit-animation: rotate-loading 1.5s linear 0s infinite normal;
transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
-webkit-transform-origin: 50% 50%;
}
#loading-text {
-moz-animation: loading-text-opacity 2s linear 0s infinite normal;
-o-animation: loading-text-opacity 2s linear 0s infinite normal;
-webkit-animation: loading-text-opacity 2s linear 0s infinite normal;
animation: loading-text-opacity 2s linear 0s infinite normal;
color: #ffffff;
font-family: "Helvetica Neue, "Helvetica", ""arial";
font-size: 10px;
font-weight: bold;
margin-top: 45px;
opacity: 0;
position: absolute;
text-align: center;
text-transform: uppercase;
top: 0;
width: 100px;
}