melawy-site/public/reading.tpl.html

      <div class="container py-5 my-5">
        <div class="row">

            <div class="col-sm-12 mb-5">
                <div class="card">
                    <div class="card-header">
                        Основы программирования. 2010. Топольский Д.В., Топольская И.Г
                    </div>
                    <div class="card-body">
                        <div class="progress" role="progressbar" aria-label="" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" data-current-page="26" data-total-pages="26"
                        onmouseover="
                        x=Math.round(this.getAttribute('data-current-page')/this.getAttribute('data-total-pages')*100);
                        this.setAttribute('aria-valuenow', `${x}`);
                        this.children[0].style.width=`${x}%`;
                        this.children[0].innerHTML=`${x} %`;"
                        style="height: 20px">
                            <div class="progress-bar bg-success"></div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-sm-12 mb-5">
                <div class="card">
                    <div class="card-header">
                        Основы программирования. ч. 1. 2016. Тюгашев А. А
                    </div>
                    <div class="card-body">
                        <div class="progress" role="progressbar" aria-label="" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" data-current-page="141" data-total-pages="164"
                        onmouseover="
                        x=Math.round(this.getAttribute('data-current-page')/this.getAttribute('data-total-pages')*100);
                        this.setAttribute('aria-valuenow', `${x}`);
                        this.children[0].style.width=`${x}%`;
                        this.children[0].innerHTML=`${x} %`;"
                        style="height: 20px">
                            <div class="progress-bar bg-success"></div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-sm-12 mb-5">
                <div class="card">
                    <div class="card-header">
                        Основы программирования. ч. 2. 2016. Тюгашев А. А
                    </div>
                    <div class="card-body">
                        <div class="progress" role="progressbar" aria-label="" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" data-current-page="1"  data-total-pages="124"
                        onmouseover="
                        x=Math.round(this.getAttribute('data-current-page')/this.getAttribute('data-total-pages')*100);
                        this.setAttribute('aria-valuenow', `${x}`);
                        this.children[0].style.width=`${x}%`;
                        this.children[0].innerHTML=`${x} %`;"
                        style="height: 20px">
                            <div class="progress-bar bg-success"></div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
      </div><!-- /.container -->