From d0a1566fb931a06ba6f8ee20d1f826265e3436cc Mon Sep 17 00:00:00 2001
From: rosh <roshinift2lev@gmail.com>
Date: Thu, 18 Jun 2020 18:42:07 +0530
Subject: [PATCH] adding progress bar

---
 index.html   |  6 ++----
 myScript1.js | 23 +++++++----------------
 mystyle.css  | 41 ++++++++++++++++++++++++++++++-----------
 3 files changed, 39 insertions(+), 31 deletions(-)

diff --git a/index.html b/index.html
index 3eaf9b3..2298faf 100644
--- a/index.html
+++ b/index.html
@@ -6,7 +6,7 @@
     <script src="jquery-3.5.1.js"></script> 
     <script src="jquery-3.5.1.min.js"></script>
     <script src="jquery.bxslider.js"></script>
-    <script src="myScript1.js"></script> 
+    <script src="myScript1.js"></script>  
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
     <meta charset="UTF-8">
     <meta name="viewport" content="width=<device-width>, initial-scale=1.0">
@@ -17,9 +17,7 @@
     <br><br>
     <div id="CG">Casa Grande</div>
     <br>
-    <div id="myProgress">
-        <div id="myBar"></div>
-      </div>
+    <div class="progress"><span></span></div>
       <div class="outside">
         <p><span id="slider-prev"></span>  <span id="slider-next"></span>
         </p>
diff --git a/myScript1.js b/myScript1.js
index e5882c5..6d4d751 100644
--- a/myScript1.js
+++ b/myScript1.js
@@ -1,19 +1,8 @@
-window.onload=function()  { 
-  var element = document.getElementById("myBar");    
-  var width = 1; 
-  var identity = setInterval(scene, 10); 
-  function scene() { 
-    if (width >= 100) { 
-      clearInterval(identity); 
-    } else { 
-      width++;  
-      element.style.width = width + '%';  
-    } 
-  } 
-}
+
+ 
 
 $(document).ready(function(){
- $('#slider').bxSlider({
+  var slider = $('#slider').bxSlider({
     auto: true,
              controls: true,
              slideMargin: 70,
@@ -37,8 +26,10 @@ $(document).ready(function(){
              nextSelector: '#slider-next',
              prevSelector: '#slider-prev',
              nextText: '<i class="fa fa-arrow-circle-right fa-3x"></i>',
-             prevText: '<i class="fa fa-arrow-circle-left fa-3x"></i>'
-
+             prevText: '<i class="fa fa-arrow-circle-left fa-3x"></i>',
+             onSlideBefore: function(currentSlideNumber, totalSlideQty, currentSlideHtmlObject) {
+              var progressLength = (currentSlideHtmlObject +1) * 16.8 + '%';
+              $('.progress span').css('max-width','calc(15px + ' + progressLength + ')')}
   });
 });
 
diff --git a/mystyle.css b/mystyle.css
index 8ec9dc4..619a121 100644
--- a/mystyle.css
+++ b/mystyle.css
@@ -63,16 +63,8 @@ body {
     font-family: Elephant;
 }
 
-#myProgress {
-    width: 30%;
-    background-color: grey;
-  }
-  
-  #myBar {
-    width: 1%;
-    height: 5px;
-    background-color: black;
-  }
+
+
 
   a {
     text-decoration: none;
@@ -97,4 +89,31 @@ body {
   
   .round {
     border-radius: 50%;
-  }
\ No newline at end of file
+  }
+
+   .progress {
+		display:block;
+		width: 35%;
+    height: 5px;
+		background:#929090;
+		content:"";
+		top:0;
+		left:0;
+		right:0;
+		overflow:hidden;
+	}
+	 .progress span {
+		display:block;
+		max-width:16.8%;
+		height:5px;
+		background:#0d0e0d;
+		
+		border-top:25px solid #0d0e0d;
+		border-right:0px solid #929090;
+		-webkit-transition:all 0.75s ease-in-out;
+		-moz-transition:all 0.75s ease-in-out;
+		-ms-transition:all 0.75s ease-in-out;
+		transition:all 0.75s ease-in-out;
+	}	
+  
+