Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
  <script src="http://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script> 
  
<style>
.progress-bar {
  background-color: #1a1a1a;
  height: 6px;
  padding: 0 0 0 0;
  width: 802px;
  margin: 201px 0px 0px 0px;      
}
​
.progress-bar span {
  display: block;
  height: 100%; 
        -webkit-transition: width .4s ease-in-out;
        -moz-transition: width .4s ease-in-out;
        -ms-transition: width .4s ease-in-out;
        -o-transition: width .4s ease-in-out;
        transition: width .4s ease-in-out;    
}
​
.blue span {
  background-color: #00a200;   
}
​
.stripes span {
  -webkit-background-size: 30px 30px;
  -moz-background-size: 30px 30px;
  background-size: 30px 30px;     
  background-image: -webkit-gradient(linear, left top, right bottom,
            color-stop(.25, rgba(255, 255, 255, .15)), color-stop(.25, transparent),
            color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .15)),
            color-stop(.75, rgba(255, 255, 255, .15)), color-stop(.75, transparent),
            to(transparent));
  background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
            transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
            transparent 75%, transparent);
  background-image: -moz-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
            transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
            transparent 75%, transparent);
  background-image: -ms-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
            transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
            transparent 75%, transparent);
  background-image: -o-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
            transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
            transparent 75%, transparent);
  background-image: linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
            transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
            transparent 75%, transparent);            
  
  -webkit-animation: animate-stripes 3s linear infinite;
  -moz-animation: animate-stripes 3s linear infinite;           
}
​
@-webkit-keyframes animate-stripes { 
  0% {background-position: 0 0;} 100% {background-position: 60px 0;}
}
​
@-moz-keyframes animate-stripes {
  0% {background-position: 0 0;} 100% {background-position: 60px 0;}
}
​
.shine span {
  position: relative;
}
​
.shine span::after {
  content: '';
  opacity: 0;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #fff;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;     
  
  -webkit-animation: animate-shine 2s ease-out infinite;
  -moz-animation: animate-shine 2s ease-out infinite;       
}
​
@-webkit-keyframes animate-shine { 
  0% {opacity: 0; width: 0;}
  50% {opacity: .5;}
  100% {opacity: 0; width: 95%;}
}
​
​
@-moz-keyframes animate-shine {
  0% {opacity: 0; width: 0;}
  50% {opacity: .5;}
  100% {opacity: 0; width: 95%;}
}
</style>  
  
  
  
  
<script>  
$(document).ready(function() {
​
  
function animuj() {  
  
  $('.progress-bar span').width(0);
  
  $('.progress-bar span').animate({
      width: '800px'
    }, 3000, function() {
      // Animation complete.
    }); 
}
 
animuj();  
  
});
</script>  
  
</head>
<body>
  
  
 <div class="progress-bar blue stripes">
    <span style="width: 0px"></span>
 </div>
  
  
</body>
</html>
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers