Share Hiệu ứng Preload với CSS3 Đẹp đầy màu sắc cực ảo

Mình cũng chưa từng làm site nào mà áp dụng hiệu ứng CSS3 Đẹp và Độc Đáo như thế này.
Nếu những ai đang xem bài viết này thấy nó phù hợp với trang của mình thì hãy sử dụng.
Hiệu ứng này tương đối nhẹ mình có để DEMO trực tiếp ở bên dưới.
Cái hiệu ứng CSS3 này khá teen phù hợp cho các site chat play nhạc video rất Dễ Thương.

Bên trên là DEMO trực tiếp về hiệu ứng Preload CSS3 quá Đẹp. Nếu các bạn muốn sử dụng thì Copy mã HTML và CSS bên dưới vào web của các bạn

Copy Code:

.wrapper { 
width: 100%; 
height: 100%; 
} 
.wrapper { 
position: relative; 
background: #e7f0f7; 
} 
.progressbar { 
display: block; 
position: absolute; 
z-index: 9; 
top: 0; 
right: 0; 
bottom: 0; 
left: 0; 
margin: auto; 
width: 400px; 
height: 30px; 
} 
.progressbar::before, 
.progressbar::after { 
content: ''; 
display: block; 
position: absolute; 
z-index: 99; 
top: 0; 
left: 0; 
width: 100%; 
height: 100%; 
border-radius: 15px; 
background-image: -webkit-linear-gradient(0deg, #e91e63 0%, #e91e63 20%, #03a9f4 20%, #03a9f4 40%, #8bc34a 40%, #8bc34a 60%, #ffeb3b 60%, #ffeb3b 80%, #ff5722 80%, #ff5722 100%); 
background-image: linear-gradient(90deg, #e91e63 0%, #e91e63 20%, #03a9f4 20%, #03a9f4 40%, #8bc34a 40%, #8bc34a 60%, #ffeb3b 60%, #ffeb3b 80%, #ff5722 80%, #ff5722 100%); 
background-position: 0 0; 
background-repeat: repeat-x; 
-webkit-animation: movebar 5s linear infinite; 
animation: movebar 5s linear infinite; 
} 
.progressbar::before { 
box-shadow: 0 6px 10px 0 rgba(0,0,0,0.1); 
} 
.progressbar::after { 
z-index: 9; 
top: 6px; 
-webkit-filter: blur(16px); 
filter: blur(16px); 
opacity: 0.7; 
} 
.stylization { 
position: absolute; 
z-index: 999; 
height: 4px; 
width: 90%; 
left: 5%; 
top: 6px; 
opacity: 0.3; 
} 
.stylization::before, 
.stylization::after { 
content: ''; 
display: block; 
position: absolute; 
height: 4px; 
top: 0; 
border-radius: 2px; 
} 
.stylization::before { 
background: #fff; 
left: 0; 
right: 10px; 
} 
.stylization::after { 
width: 6px; 
background: #fff; 
right: 0; 
} 
@-webkit-keyframes movebar { 
from { 
background-position: 0 0; 
} 
to { 
background-position: 400px 0; 
} 
} 
@keyframes movebar { 
from { 
background-position: 0 0; 
} 
to { 
background-position: 400px 0; 
}

HTML:

Copy Code:

Nếu thấy thích thì mang về mà test!
Coppy nhớ ghi nguồn Share nhé *

Tập tin đính kèm

Share Hiệu ứng Preload với CSS3 Đẹp đầy màu sắc cực ảo

Code random và hiệu ứng chữ rơi 3D bằng css3

Code loading sặc sỡ cho ai thích màu mè

Code nút bấm menu góc màn hình Pro

Share code hiệu ứng ảnh cực đẹp cho wap/web

Share hiệu ứng loading 7 sắc cầu vòng đẹp với CSS3