<style>
    .bar {
        width: 100%;
        height: 20px;
        border: 1px solid #2980b9;
        border-radius: 3px;
        background-image: 
            repeating-linear-gradient(
            -45deg,
            #2980b9,
            #2980b9 11px,
            #eee 10px,
            #eee 20px /* determines size */
            );
        background-size: 28px 28px;
        animation: move .5s linear infinite;
    }

    @keyframes move {
        0% {
            background-position: 0 0;
        }
        100% {
            background-position: 28px 0;
        }
    }
</style>
<div id="story" class="light-wrapper customer-wrapper">
    <div class="container-fluid inner-customer-dashboard">
        <ul class="list-group">
            <li class="list-group-item">
                <h3 class="text-left"><?php isset($processing) ? print $processing : '' ?></h3>
            </li>
            <li class="list-group-item">
                <div class="bar" style='width:95%; color: #000;'></div>
            </li>
        </ul>
    </div>
</div>
<script>
    $(document).ready(function () {
        $.ajax({
            url: '<?php echo site_url("onlineorder/processorder") ?>',
            type: "GET",
            dataType: "json",
            success: function (output) {
                if (output.success) {
                    location.replace('<?php echo site_url('onlineorder/forwarding') ?>')
                }
            }
        });
    });
</script>