adding progress bar

index.html

@@ -17,9 +17,7 @@
     <br><br>
     <div id="CG">Casa Grande</div>
     <br>
-    <div id="myProgress">
+    <div class="progress"><span></span></div>
-        <div id="myBar"></div>
-      </div>
       <div class="outside">
         <p><span id="slider-prev"></span>  <span id="slider-next"></span>
         </p>

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 + ')')}
   });
 });
 

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;
@@ -98,3 +90,30 @@ body {
   .round {
     border-radius: 50%;
   }
+
+   .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;
+	}	
+  
+