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>
  
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  
  <div class="progress">
    <div class="progress-bar">
      <span>games</span>
    </div>
  </div>
​
  <div class="progress">
    <div class="progress-bar">
      <span>averylonghashtag</span>
    </div>
  </div>
  
  <br/>
  <br/>
  
  <div class="progress">
    <span class="progress-bar">
      <span>averylonghashtag</span>
    </span>
  </div>
  
  
</body>
</html>
 
/**
 * Progress bars with centered text
 */
​
body {
  background-color: #fff;
  font-family: Verdana;
}
​
.progress {
  //display: inline;
  position: relative;
  height: 20px;
  margin-bottom: 5px;
  overflow: hidden;
  background-color: #f5f5f5;
  border-radius: 4px;
}
​
.progress-bar {
  float: left;
  width: 0;
  height: 100%;
  width: 50%;
  font-size: 12px;
  line-height: 20px;
  color: #444;
  text-align: center;
  background-color: #18bc9c;
}
​
.progress span {
    position: absolute;
    display: block;
    width: 100%;
}
 
$(function(){
  $('.progress').each(function(){
     $(this).width($(this).find('span').text().length * 11);
  });
});
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers