I am trying to create a progress bar with stripes on it just like this: 
<http://css-tricks.com/examples/ProgressBars/>

See screenshot: 

![enter image description here](https://i.stack.imgur.com/nL0en.jpg)

However I can't pull up together my codes to make it animate like that.

```
<!-- begin snippet: js hide: false -->

<!-- language: lang-css -->

.container{
  width: 400px;
  margin: 0 auto;

}

.bar{
  width: 100%;
  background: #141414;
  padding: 17px;
  -webkit-border-top-right-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomright: 5px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}

.bar-fill{
  height: 15px;
  display: block;
  background: #45c9a5;
  width: 0%;
  border-radius: 8px;

  -webkit-transition: width 0.8s ease;
  transition: width 0.8s ease;
  -webkit-animation: mymove 5s infinite; 
  animation: mymove 5s infinite;
}

.bar-unfill{
  height: 15px;
  display: block;
  background: #fff;
  width: 100%;
  border-radius: 8px;
}

/* Chrome, Safari, Opera */ 
@-webkit-keyframes mymove {
    from {width: 0%;}
    to {width: 100%;}
} 

/* Standard syntax */ 
@keyframes mymove {
   from {width: 0%;}
    to {width: 100%;}
}

.title{
 background: #545965;
 color: #fff;
 padding: 15px;
 float: left;
 position: relative;
 right: 60px;
-webkit-border-top-left-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-bottomleft: 5px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}

```

Here's the HTML:

```
 <div class="container">
<div class="plain-title">Plain</div>
  <div class="bar">
    <span class="bar-unfill">
        <span class="bar-fill"></span>
    </span>    
  </div>
</div>

```

It must be only PURE CSS