CSS Loading 02 - DevForum
Chia sẻ
DevForum chia sẻ các bạn mẫu CSS Loading 02 chờ Loading page tuyệt hảo có một không hai
1. HTML
<div id="wrap">
<div class="loading outer">
<div class="loading inner"></div>
</div>
</div>
2. CSS
.loading {
box-sizing: border-box;
position: relative;
display: inline-block;
padding: 0.5em;
vertical-align: middle;
text-align: center;
background-color: transparent;
border: 5px solid transparent;
border-top-color: #f60;
border-bottom-color: #f60;
border-radius: 50% 0;
box-shadow: 0 0 0.25em #f60 inset;
}
.outer {
animation: spin 1.5s infinite linear;
}
.inner {
animation: spin 1.5s infinite linear;
}
@keyframes spin {
0% {
transform: rotateZ(0deg);
}
100% {
transform: rotateZ(360deg);
}
}
/* styling */
html {
width: 100%;
height: 100%;
background: radial-gradient(circle, #ffffff 0%, #aaaaaa 100%) no-repeat;
overflow-x: hidden;
overflow-y: hidden;
}
body {
text-align: center;
display: table;
width: 100%;
height: 100%;
overflow-x: hidden;
overflow-y: hidden;
}
#wrap {
box-sizing: border-box;
display: table-cell;
vertical-align: middle;
}
3. JAVASCRIPT
Mong bài viết giúp ích được các bạn phần nào trong thiết kế Web. Hãy nhấn nút Chia sẻđể mọi người cùng học hỏi kiến thức mới nhé. Cảm ơn các bạn đã quan tâm Forum.