melawy-site/public/reading.tpl.html

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

            <div class="col-sm-12 mb-3">
                <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 progress-bar-striped bg-success"></div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-sm-12 mb-3">
                <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="92" 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 progress-bar-striped bg-success"></div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-sm-12 mb-3">
                <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 progress-bar-striped bg-success"></div>
                        </div>
                    </div>
                </div>
            </div>

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