 |
admink
(Admin)
[Off] 17-09-2016 |
Hiệu ứng loading gmail
<style type="text/css">
body {
background: rgb(245,245,245);
}
b {
position: absolute;
top: calc(50% - 26px);
left: 50%;
transform: translateX(-50%);
font-family: arial,sans-serif;
}
.loader-gmail {
position: absolute;
top: calc(50% - 6px);
left: calc(50% - 160px);
border: 1px solid #a4a4a4;
width: 320px;
height: 8px;
background-image: linear-gradient(135deg, #6187f2 0%, #6187f2 25%, #5679da 25%, #5679da 50%, #6187f2 50%, #6187f2 75%, #5679da 75%, #5679da 100%);
background-repeat: repeat;
background-position: 0px 0px;
background-size: 16px 16px;
background-clip: content-box;
padding: 1px;
animation: loading 1s linear infinite;
}
.loader-gmail:after {
position: absolute;
right: 0;
height: 8px;
background: rgb(245,245,245);
z-index: 20;
animation: progress 4s ease-in-out infinite;
content: '';
}
@keyframes loading {
from {
background-position: 0px 0px;
}
to {
background-position: -16px 0px;
}
}
@keyframes progress {
0% {
min-width: 100%;
}
30% {
min-width: 80%;
}
50% {
min-width: 65%;
}
69% {
min-width: 20%;
}
85% {
min-width: 0;
}
100% {
min-width: 0;
}
}
</style>
2
<b>Loading rosino999@gmail.com...</b>
<div class="loader-gmail"></div>
body {
background: rgb(245,245,245);
}
b {
position: absolute;
top: calc(50% - 26px);
left: 50%;
transform: translateX(-50%);
font-family: arial,sans-serif;
}
.loader-gmail {
position: absolute;
top: calc(50% - 6px);
left: calc(50% - 160px);
border: 1px solid #a4a4a4;
width: 320px;
height: 8px;
background-image: linear-gradient(135deg, #6187f2 0%, #6187f2 25%, #5679da 25%, #5679da 50%, #6187f2 50%, #6187f2 75%, #5679da 75%, #5679da 100%);
background-repeat: repeat;
background-position: 0px 0px;
background-size: 16px 16px;
background-clip: content-box;
padding: 1px;
animation: loading 1s linear infinite;
}
.loader-gmail:after {
position: absolute;
right: 0;
height: 8px;
background: rgb(245,245,245);
z-index: 20;
animation: progress 4s ease-in-out infinite;
content: '';
}
@keyframes loading {
from {
background-position: 0px 0px;
}
to {
background-position: -16px 0px;
}
}
@keyframes progress {
0% {
min-width: 100%;
}
30% {
min-width: 80%;
}
50% {
min-width: 65%;
}
69% {
min-width: 20%;
}
85% {
min-width: 0;
}
100% {
min-width: 0;
}
}
</style>
2
<b>Loading rosino999@gmail.com...</b>
<div class="loader-gmail"></div>
| #1 (0) |