progressbar

 <div class="row">
                <div class="container">
                    <div class="bg-white rounded">
                        <h4 class="h6 w-60 mr-auto px-4 py-1 rounded-bottom bg-success text-white shadow-sm" style="
                            display: inline-block;
                        ">
                            Turnover ของคุณอาทิตย์นี้
                        </h4>
                        <div class="card-body">
                            <div class="barWrapper">
                                <span class="progressText">

                                    <div class="row">
                                        <div class="col-md-4 mt-2">
                                            <span class="text-success font-weight-bold">ตั้งแต่ :</span>

                                            <span class="badge badge-primary shadow"
                                                style="padding: 5px 10px 0 10px; border-radius: 50px;">
                                                <h5 class="font-weight-bold"> <i class="fas fa-calendar-alt"></i>
                                                    29/04/2019 </h5>
                                            </span>

                                            <span class="badge badge-primary shadow"
                                                style="padding: 5px 10px 0 10px; border-radius: 50px;">
                                                <h5 class="font-weight-bold"> <i class="fas fa-clock"></i> 12:00 </h5>
                                            </span>
                                        </div>

                                        <div class="col-md-4 mt-2">
                                            <span class="text-danger font-weight-bold">จนถึง :</span>
                                            <span class="badge badge-primary shadow"
                                                style="padding: 5px 10px 0 10px; border-radius: 50px;">
                                                <h5 class="font-weight-bold"> <i class="fas fa-calendar-alt"></i>
                                                    29/04/2019 </h5>
                                            </span>

                                            <span class="badge badge-primary shadow"
                                                style="padding: 5px 10px 0 10px; border-radius: 50px;">
                                                <h5 class="font-weight-bold"> <i class="fas fa-clock"></i> 12:00 </h5>
                                            </span>
                                        </div>
                                    </div>
                                </span>

                                <div class="progress-outer mt-4">
                                    <div class="progress">
                                        <div class="progress-bar progress-bar-info progress-bar-striped active"
                                            role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="5000"
                                            style="width:10%; box-shadow:-1px 10px 10px rgba(91, 192, 222, 0.7);">
                                            <div class="progress-value">ขาดอีก xxxx/5000 [10%]</div>
                                        </div>
                                        <br>


                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>