<img src="//nojsim.images.xtstatic.com/tp.gif" alt="" />

XtGem Forum catalog

Zcode › HTML-CSS › Code loading sặc sỡ cho ai thích màu mè

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

09-10-2016

code loading này mình k thích lắm vì nó sặc sỡ quá cứ share lên thôi ai thích thì dùng ạ

code loading đẹp

đemo http://zcode.mobie.in/demo/loading23
code

Copy Code:

<style>
  .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;
  }
}
</style>
<script type="text/javascript" src="hottp://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>
<script type="text/javascript">window.onload = detectarCarga;
function detectarCarga() {
document.getElementById("Zenload").style.display="none";
}</script>
<div class="ntc" id="Zenload">
<b><font style="font-size: 8pt;" color="#ff00cc" face="Verdana">
<div class="wrapper">
  <div class="progressbar">
    <div class="stylization"></div>
  </div>
</div> <script language="JavaScript">
function toggleDisplay(id) {
document.getElementById(id).style.visibility = "visible";
if(document.getElementById(id).style.display == "none" ) {
document.getElementById(id).style.display = "";
} else {
document.getElementById(id).style.display = "none";
}
}
</script>

Lượt xem: total>

BBCode:

Link:

Cùng chuyên mục

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

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

Share code tạo chữ nhiều hiệu ứng đẹp