Bootstrap progress bar with value.

progress-with-indicator.html

<style>
  
$percentage-width: 3.75em;

.progress-indicator {
    overflow: hidden;
    margin: 1em 0;

    .indicator {
        float: none;
        width: auto;
        overflow: hidden;

        > .percentage {
            position: relative;
            min-width: ($percentage-width/2);
            max-width: calc(100% - #{$percentage-width/2});
            > div {
                position: relative;
                .arrow-up {
                    position: relative;
                    left: ($percentage-width - 0.5em);
                }
                .value {
                    position: relative;
                    right: -($percentage-width/2);
                    width: $percentage-width;
                    line-height: 2.25;
                }
            }
        }

        > .progress {
            height: 2.5em;
            border-radius: 1.25em;
            margin: 0 0 0.25em;
        }
    }

    .button {
        padding-left: 1.5em;
    }

}
</style>
<div class="progress-indicator">
    <div class="button pull-right">
        <a href="#" class="btn btn-primary btn-lg">Update</a>
    </div>
    <div class="indicator">
        <div class="progress">
            <div class="progress-bar" role="progressbar" style="width: <?php echo $percentage; ?>;"></div>
        </div>
        <div class="percentage" style="width: <?php echo $percentage ?>">
            <div class="pull-right">
                <div class="arrow-up"></div>
                <div class="value text-xs-center bg-primary">
                    <?php echo $percentage ?></div>
            </div>
            <div class="clearfix"></div>
        </div>
    </div>
</div>