admink: Hiệu ứng loading gmail <style - Diễn Đàn TrangMod.Wap.Sh

admink (Admin) [Off]

17-09-2016

Hiệu ứng loading gmail

Share css load hiệu ứng giống gmail
[Tải ảnh]

<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>

#9 (0)