diff --git a/public/reading.tpl.html b/public/reading.tpl.html
index 1f91629..0618d60 100644
--- a/public/reading.tpl.html
+++ b/public/reading.tpl.html
@@ -2,13 +2,20 @@
       <div class="container py-5 my-5">
 
         <h3 style="text-align: center;">Основы программирования. Д.В. Топольский, И.Г. Топольская. 2010</h3>
-        <div class="progress" role="progressbar" aria-label="" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="height: 20px">
-            <div class="progress-bar bg-success" style="width: 100%">100%</div>
+        <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 progress-bar-animated bg-info"></div>
         </div>
 
         <h3 style="text-align: center;">Основы программирования. ч. 1. Тюгашев А. А. 2016</h3>
-        <div class="progress" role="progressbar" aria-label="" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" onmouseover="
-        x=Math.round(92/164*100);
+        <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}`;"
@@ -17,8 +24,9 @@
         </div>
 
         <h3 style="text-align: center;">Основы программирования. ч. 2. Тюгашев А. А. 2016</h3>
-        <div class="progress" role="progressbar" aria-label="" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" onmouseover="
-        x=Math.round(1/124*100);
+        <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}`;"