Inspired from the blogs Cats who Code, I made this progress bar for wasting my time :p
And also, I'm just a little thought: Why did he use JQuery as a driver if we can make it purely using CSS3?

Here I also have added a callback function to demonstrate that the download process finished. So don't be surprised with the dark layer. Although in fact, there is no such thing as a 'callback' in CSS, right?

Until the download completed, you will know that your Internet connection is really slow! Haha...

The HTML

<div id='progress'><div></div></div>
<div id='olay1'>Download Complete!</div>

The CSS

#progress {
  background:-webkit-linear-gradient(top, #333, #666);
  background:-moz-linear-gradient(top, #333, #666);
  background:-ms-linear-gradient(top, #333, #666);
  background:-o-linear-gradient(top, #333, #666);
  background:linear-gradient(top, #333, #666);
  width:60%;
  height:20px;
  -webkit-box-shadow:0px 3px 10px rgba(0,0,0,0.4);
  -moz-box-shadow:0px 3px 10px rgba(0,0,0,0.4);
  box-shadow:0px 3px 10px rgba(0,0,0,0.4);
  margin:50px auto 0px;
  position:relative;
  overflow:hidden;
  -webkit-border-radius:10px;
  -moz-border-radius:10px;
  border-radius:10px;
}

#progress:after {
  content:"";
  width:100%;
  height:100%;
  background:-webkit-linear-gradient(top, rgba(255,255,255,0.7) 0%, transparent 55%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.5) 100%);
  background:-moz-linear-gradient(top, rgba(255,255,255,0.7) 0%, transparent 55%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.5) 100%);
  background:-ms-linear-gradient(top, rgba(255,255,255,0.7) 0%, transparent 55%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.5) 100%);
  background:-o-linear-gradient(top, rgba(255,255,255,0.7) 0%, transparent 55%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.5) 100%);
  background:linear-gradient(top, rgba(255,255,255,0.7) 0%, transparent 55%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.5) 100%);
  -webkit-border-radius:10px;
  -moz-border-radius:10px;
  border-radius:10px;
  position:absolute;
  top:0px;
  left:0px;
}

#progress div {
  display:block;
  width:100%;
  height:100%;
  background:#8FB44C;
  background:-webkit-repeating-linear-gradient(-45deg, #8FB44C 10px, #8FB44C 20px, #A0DE29 20px, #A0DE29 30px);
  background:-moz-repeating-linear-gradient(-45deg, #8FB44C 10px, #8FB44C 20px, #A0DE29 20px, #A0DE29 30px);
  background:-ms-repeating-linear-gradient(-45deg, #8FB44C 10px, #8FB44C 20px, #A0DE29 20px, #A0DE29 30px);
  background:-o-repeating-linear-gradient(-45deg, #8FB44C 10px, #8FB44C 20px, #A0DE29 20px, #A0DE29 30px);
  background:repeating-linear-gradient(-45deg, #8FB44C 10px, #8FB44C 20px, #A0DE29 20px, #A0DE29 30px);
  -moz-background-size:500%;
  background-size:500%;
  position:absolute;
  top:0px;
  left:0px;
  -webkit-box-shadow:1px 0px 5px #000;
  -moz-box-shadow:1px 0px 5px #000;
  box-shadow:1px 0px 5px #000;
  -webkit-animation:progressbar 50s linear;
  -moz-animation:progressbar 50s linear;
  -ms-animation:progressbar 50s linear;
  -o-animation:progressbar 50s linear;
  animation:progressbar 50s linear;
}

#olay1 {
  width:100%;
  height:100px;
  text-align:center;
  background:#000;
  padding:50px 0px;
  font:bold 20px 'Courier New',Monospace,Arial,Sans-Serif;
  color:#fff;
  text-shadow:0px 0px 3px #fff;
  text-transform:uppercase;
  position:fixed;
  top:0px;
  left:0px;
  visibility:hidden;
  -webkit-animation:complete 5s linear 51s;
  -moz-animation:complete 5s linear 51s;
  -ms-animation:complete 5s linear 51s;
  -o-animation:complete 5s linear 51s;
  animation:complete 5s linear 51s;
}


@-webkit-keyframes progressbar {
  0%       {width:0%;background-position:top left;}
  100%     {width:100%;background-position:bottom right;}
}

@-webkit-keyframes complete {
  0%       {visibility:hidden;}
  1%, 100% {height:1000px;visibility:visible;}
}

@-moz-keyframes progressbar {
  0%       {width:0%;background-position:top left;}
  100%     {width:100%;background-position:bottom right;}
}

@-moz-keyframes complete {
  0%       {visibility:hidden;}
  1%, 100% {height:1000px;visibility:visible;}
}

@-ms-keyframes progressbar {
  0%       {width:0%;background-position:top left;}
  100%     {width:100%;background-position:bottom right;}
}

@-ms-keyframes complete {
  0%       {visibility:hidden;}
  1%, 100% {height:1000px;visibility:visible;}
}

@-o-keyframes progressbar {
  0%       {width:0%;background-position:top left;}
  100%     {width:100%;background-position:bottom right;}
}

@-o-keyframes complete {
  0%       {visibility:hidden;}
  1%, 100% {height:1000px;visibility:visible;}
}


@keyframes progressbar {
  0%       {width:0%;background-position:top left;}
  100%     {width:100%;background-position:bottom right;}
}

@keyframes complete {
  0%       {visibility:hidden;}
  1%, 100% {height:1000px;visibility:visible;}
}

Best viewed in Firefox. Ugly rounded corner in Chrome and not burning in Opera (for now).

Taman Kanak-Kanak Raudhatul Athfal Miftahul Jannah KuntiliKecamatan Sumpiuh Kabupaten Banyumas Provinsi Jawa Tengah - 53195

Pasang Iklan Anda di Sini