Skip to content

Instantly share code, notes, and snippets.

/index.html

Created September 23, 2014 09:41
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<style id="jsbin-css">
/**
* Progress bars with centered text
*/
body {
background-color: #fff;
font-family: Verdana;
}
.progress {
float: left;
position: relative;
height: 20px;
margin-left: 5px;
margin-bottom: 5px;
overflow: hidden;
background-color: #f5f5f5;
border-radius: 4px;
}
.progress-bar {
float: left;
width: 100%;
height: 100%;
font-size: 12px;
line-height: 20px;
color: #444;
text-align: center;
background-color: #18bc9c;
}
.progress-bar span {
position: absolute;
display: block;
width: 100%;
}
.w50 {width: 50%;}
.w67 {width: 67%;}
</style>
</head>
<body>
<div class="progress">
<div class="progress-bar w67">
<span>games</span>
</div>
</div>
<div class="progress">
<div class="progress-bar w50">
<span>averylonghashtag</span>
</div>
</div>
<div class="progress">
<div class="progress-bar">
<span>completetd</span>
</div>
</div>
<script id="jsbin-javascript">
$(function(){
$('.progress').each(function(){
$(this).width($(this).find('span').text().length * 11);
});
});
</script>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-2.1.1.min.js"><\/script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div class="progress">
<div class="progress-bar w67">
<span>games</span>
</div>
</div>
<div class="progress">
<div class="progress-bar w50">
<span>averylonghashtag</span>
</div>
</div>
<div class="progress">
<div class="progress-bar">
<span>completetd</span>
</div>
</div>
</body>
</html></script>
<script id="jsbin-source-css" type="text/css">/**
* Progress bars with centered text
*/
body {
background-color: #fff;
font-family: Verdana;
}
.progress {
float: left;
position: relative;
height: 20px;
margin-left: 5px;
margin-bottom: 5px;
overflow: hidden;
background-color: #f5f5f5;
border-radius: 4px;
}
.progress-bar {
float: left;
width: 100%;
height: 100%;
font-size: 12px;
line-height: 20px;
color: #444;
text-align: center;
background-color: #18bc9c;
}
.progress-bar span {
position: absolute;
display: block;
width: 100%;
}
.w50 {width: 50%;}
.w67 {width: 67%;}
</script>
<script id="jsbin-source-javascript" type="text/javascript">$(function(){
$('.progress').each(function(){
$(this).width($(this).find('span').text().length * 11);
});
});</script></body>
</html>
Raw
jsbin.IBOwEPog.css
/**
* Progress bars with centered text
*/
body {
background-color: #fff;
font-family: Verdana;
}
.progress {
float: left;
position: relative;
height: 20px;
margin-left: 5px;
margin-bottom: 5px;
overflow: hidden;
background-color: #f5f5f5;
border-radius: 4px;
}
.progress-bar {
float: left;
width: 100%;
height: 100%;
font-size: 12px;
line-height: 20px;
color: #444;
text-align: center;
background-color: #18bc9c;
}
.progress-bar span {
position: absolute;
display: block;
width: 100%;
}
.w50 {width: 50%;}
.w67 {width: 67%;}
Raw
jsbin.IBOwEPog.js
$(function(){
$('.progress').each(function(){
$(this).width($(this).find('span').text().length * 11);
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment