Css arrow Progress bar

Question

I'm currently in the process of learning all about css, so I'm trying to generate different shapes with different functionalities.

---

I am currently working on a project which requires a horizontal arrow to display the 'progress' of a transaction occurring.

So i'm trying to generate an arrow 'progress bar' like:

                 |\
                 | \
+----------------+  \
|XX|    10%          >
+----------------+  /
  \              | /
   \             |/
    \the XX's depict a different color.

I currently Am able to 'fill' up until the arrow head, but the way I've generated the arrow head,I can't seem to 'fill' it in line as well (i.e. at ~90%, half of the physical head should be full) - and not the whole thing.

---

My current snippet:

.arrow{
    margin:0 auto;
    height:100px;
    width:200px;
    background:red;
    margin-top:60px;   
    position:relative;
    /*overflow:hidden;*/
}

.arrow:before, .prog:before{
    content:"";
    position:absolute;
    right:-100px;
    border-left:100px solid red;
    border-top:100px solid transparent;
    border-bottom:100px solid transparent;
    top:-50%;
}

.prog{
    position:absolute;
    height:100%;
    width:0%;
    background:blue;
    transition: all 0.8s;
}

.arrow:hover .prog{
    width:100%;
}
.prog:before{
    border-left:100px solid transparent;
    transition: all 0.8s;
}
.arrow:hover .prog:before{
    border-left:100px solid blue;
}

<div class="arrow">
    <div class="prog"></div>
</div>

---

this doesn't really work since you 'see the points' outside of the arrow's body, making it seem like another arrow is appearing in front of it, rather than 'filling it up'.

---

a fiddle lives here

---

I've used a hover effect as a demo, although I would like to use jquery to set the percentage complete

Answer 1

You can animate just the width of the .prog element and set it to overlfow: hidden

.prog{
    width: 0%;
    height:100%;
    position: relative;
    overflow: hidden;
    transition: width 0.8s 
}
.arrow:hover .prog{
    width: 300px;
}
.arrow{  
    height:200px;
    margin:0 auto;
    width:300px;
    position:relative;
    margin-top:60px;
}
.arrow,.arrow:before,.arrow:after{
    z-index:1
}
.prog,.prog:before,.prog:after{
    z-index:2
}
.arrow:before, .prog:before,
.arrow:after, .prog:after{
    content:"";
    position:absolute;
}
.arrow:before, .prog:before{
    left: 200px;
    top: 0px;
    border-top: 100px solid transparent;
    border-bottom: 100px solid transparent;
}
.arrow:after, .prog:after{
    margin: 0 auto;
    height: 100px;
    width: 200px;
    top: 50px;
    left: 0
}
.arrow:before{
    border-left: 100px solid red
}
.arrow:after{
    background: red
}
.prog:before{
    border-left: 100px solid blue
}
.prog:after{
    background: blue
}

<div class="arrow">
    <div class="prog"></div>
</div>