Skip to content

Instantly share code, notes, and snippets.

@ttsvetko

ttsvetko/index.html

Forked from anonymous/index.html
Created November 19, 2015 15:54
Show Gist options
  • Save ttsvetko/2fba60361feaeb2eeab7 to your computer and use it in GitHub Desktop.
Save ttsvetko/2fba60361feaeb2eeab7 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source http://jsbin.com/kepemu
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style id="jsbin-css">
.progressbar {
height: 20px;
line-height: 20px;
width: 100px;
padding: 0 5px;
margin: 10px;
background: linear-gradient(to right, #5caa61 0%,#5caa61 50%,#ffffff 50%,#ffffff 10%);
background-size: 200% 100%;
background-position: 100% 0;
text-align: right;
}
</style>
</head>
<body>
<div class="progressbar" id="progressbar">
0%
</div>
<input type="number" id="value" min="0" max="100"/>
<script id="jsbin-javascript">
var progressbar = document.getElementById('progressbar');
var input = document.getElementById('value');
input.onchange = function(ev) {
progressbar.textContent = this.value + '%';
progressbar.style.backgroundPositionX = 100 - this.value + '%';
};
</script>
<script id="jsbin-source-css" type="text/css">.progressbar {
height: 20px;
line-height: 20px;
width: 100px;
padding: 0 5px;
margin: 10px;
background: linear-gradient(to right, #5caa61 0%,#5caa61 50%,#ffffff 50%,#ffffff 10%);
background-size: 200% 100%;
background-position: 100% 0;
text-align: right;
}</script>
<script id="jsbin-source-javascript" type="text/javascript">var progressbar = document.getElementById('progressbar');
var input = document.getElementById('value');
input.onchange = function(ev) {
progressbar.textContent = this.value + '%';
progressbar.style.backgroundPositionX = 100 - this.value + '%';
};</script></body>
</html>
Raw
jsbin.kepemu.css
.progressbar {
height: 20px;
line-height: 20px;
width: 100px;
padding: 0 5px;
margin: 10px;
background: linear-gradient(to right, #5caa61 0%,#5caa61 50%,#ffffff 50%,#ffffff 10%);
background-size: 200% 100%;
background-position: 100% 0;
text-align: right;
}
Raw
jsbin.kepemu.js
var progressbar = document.getElementById('progressbar');
var input = document.getElementById('value');
input.onchange = function(ev) {
progressbar.textContent = this.value + '%';
progressbar.style.backgroundPositionX = 100 - this.value + '%';
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment