Arrow Progress Bar

simple arrow progres bar which would suit white background/solid background sites or applications

by James Butler

HTML

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

CSS

.arrow {
    height:200px;
    width:300px;
    background: rgb(169, 3, 41);
    /* Old browsers */
    background: -moz-linear-gradient(top, rgba(169, 3, 41, 1) 0%, rgba(143, 2, 34, 1) 44%, rgba(109, 0, 25, 1) 100%);
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(169, 3, 41, 1)), color-stop(44%, rgba(143, 2, 34, 1)), color-stop(100%, rgba(109, 0, 25, 1)));
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(169, 3, 41, 1) 0%, rgba(143, 2, 34, 1) 44%, rgba(109, 0, 25, 1) 100%);
    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(169, 3, 41, 1) 0%, rgba(143, 2, 34, 1) 44%, rgba(109, 0, 25, 1) 100%);
    /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(169, 3, 41, 1) 0%, rgba(143, 2, 34, 1) 44%, rgba(109, 0, 25, 1) 100%);
    /* IE10+ */
    background: linear-gradient(to bottom, rgba(169, 3, 41, 1) 0%, rgba(143, 2, 34, 1) 44%, rgba(109, 0, 25, 1) 100%);
    /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#a90329', endColorstr='#6d0019', GradientType=0);
    /* IE6-9 */
    position:relative;
    overflow:hidden;
    transition:all 0.8s;
}
.arrow:before {
    content:"";
    position:absolute;
    top:0;
    width:70%;
    height: calc(100% - 80px);
    border-top:40px solid white;
    border-bottom:40px solid white;
    z-index:10;
}
.arrow:after {
    content:"";
    position:absolute;
    right:0;
    border-top:100px solid white;
    border-bottom:100px solid white;
    border-left:100px solid transparent;
    z-index:10;
}
.perc {
    position:absolute;
    top:0;
    width:0%;
    height:100%;
    background: rgb(30, 87, 153);
    /* Old browsers */
    background: -moz-linear-gradient(top, rgba(30, 87, 153, 1) 0%, rgba(41, 137, 216, 1) 50%, rgba(32, 124, 202, 1) 51%, rgba(125, 185, 232, 1) 100%);
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(30, 87, 153,...