ShareLoading

**kaiser** · 12.08.2016 / 20:07

Cho ai đang rảnh k có rì nghịc :24:

HTML5

<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>
 
<div class="wrapper">
  <div class="progressbar">
    <div class="stylization"></div>
  </div>
</div>

**bongyb** · 12.08.2016 / 20:17

Cái này là cái gì. :24:

**kayer** · 12.08.2016 / 20:27

Ko giải thích gì cả!

**kaiser** · 12.08.2016 / 20:35

code loading :24: k thì để đấy nhìn cho nó sặc sỡ ngoài ra chả có tác dụng rì cả đã bảo cho ai đang rảnh k có rì chơi mà

**bongyb** · 12.08.2016 / 20:48

kaiser đã viết ↑

code loading :24: k thì để đấy nhìn cho nó sặc sỡ ngoài ra chả có tác dụng rì cả đã bảo cho ai đang rảnh k có rì chơi mà

:shot: Bó tay

**vipnamdan** · 12.08.2016 / 21:03

Mod lại tí .okey

HTML5

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

**mad** · 12.08.2016 / 21:05

HTML5

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

hình như code này klq gì đến code trên cả dư thừa cái này rùi

**vipnamdan** · 12.08.2016 / 21:07

Chắc vậy

**hanhphucao** · 12.08.2016 / 21:28

Không like vì không có ảnh demo :19:

**aogiac** · 12.08.2016 / 21:34

demo ...?