Прогресс бар HTML/CSS

by Ksenia Polyakova

HTML

<div class="progress-wrap">
  <div class="progress-progress"></div>
</div>

CSS

body{
  background:#444;
  position:relative;
  width:100%;
  height:100%;
}
.progress-wrap{
  position:relative;
  font-size:36px; 
  width:66.667%;
  margin:0 16.665%;
  background:/* #333 */ white;
  height:/* 2em */ 3px;
 /*  border-radius:1.25em; */
  
  overflow:hidden;  
 /*  box-shadow:inset 0 3px 3px 2px #222; */
  /* border-bottom:1px solid #f4f4f4; */
}
.progress-progress{
  width:100%;
  height:2em;
  left:0;
  background: /* linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,0.1) 2%,rgba(255,255,255,1) 10%,rgba(255,255,255,0) 20%), 
    rgba(0,200,0,0.75) */ red;
  position:absolute;
  
  -webkit-animation:move 3.33s linear;
     -moz-animation:move 3.33s linear;
      -ms-animation:move 3.33s linear;
       -o-animation:move 3.33s linear;
          animation:move 3.33s linear;
}
@-webkit-keyframes move {
	from { width:0 }
	to { width:100% }
}
@-moz-keyframes move {
	from { width:0 }
	to { width:100% }
}
@-ms-keyframes move {
	from { width:0 }
	to { width:100% }
}
@-o-keyframes move {
	from { width:0 }
	to { width:100% }
}
@keyframes move {
	from { width:0 }
	to { width:100% }
}