0 Another Pure CSS3 Progress Bar

Here also has the added callback function to indicate that the download is complete. So do not be surprised by a dark layer. Although in reality there is no such thing as 'callback' in the CSS, right?

Until the download is complete, you will know that your internet connection is very slow!

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).
Download File