Skip to content

Instantly share code, notes, and snippets.

@hlorand

hlorand/progress.html

Created September 25, 2016 07:40
Show Gist options
  • Save hlorand/b08b5f1c5a5414367a042d953f2a2c9e to your computer and use it in GitHub Desktop.
Save hlorand/b08b5f1c5a5414367a042d953f2a2c9e to your computer and use it in GitHub Desktop.
Download ZIP
jQuery reading position indicator progress bar
Raw
progress.html
<!doctype html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script>
$(document).ready(function(){
var getMax = function(){
return $(document).height() - $(window).height();
}
var getValue = function(){
return $(window).scrollTop();
}
if('max' in document.createElement('progress')){
// Browser supports progress element
var progressBar = $('progress');
// Set the Max attr for the first time
progressBar.attr({ max: getMax() });
$(document).on('scroll', function(){
// On scroll only Value attr needs to be calculated
progressBar.attr({ value: getValue() });
});
$(window).resize(function(){
// On resize, both Max/Value attr needs to be calculated
progressBar.attr({ max: getMax(), value: getValue() });
});
}
else {
var progressBar = $('.progress-bar'),
max = getMax(),
value, width;
var getWidth = function(){
// Calculate width in percentage
value = getValue();
width = (value/max) * 100;
width = width + '%';
return width;
}
var setWidth = function(){
progressBar.css({ width: getWidth() });
}
$(document).on('scroll', setWidth);
$(window).on('resize', function(){
// Need to reset the Max attr
max = getMax();
setWidth();
});
}
});
$(document).ready(function(){
$('#flat').addClass("active");
$('#progressBar').addClass('flat');
$('#flat').on('click', function(){
$('#progressBar').removeClass().addClass('flat');
$('a').removeClass();
$(this).addClass('active');
$(this).preventDefault();
});
$('#single').on('click', function(){
$('#progressBar').removeClass().addClass('single');
$('a').removeClass();
$(this).addClass('active');
$(this).preventDefault();
});
$('#multiple').on('click', function(){
$('#progressBar').removeClass().addClass('multiple');
$('a').removeClass();
$(this).addClass('active');
$(this).preventDefault();
});
$('#semantic').on('click', function(){
$('#progressBar').removeClass().addClass('semantic');
$('a').removeClass();
$(this).addClass('active');
$(this).preventDefault();
alert('hello');
});
$(document).on('scroll', function(){
maxAttr = $('#progressBar').attr('max');
valueAttr = $('#progressBar').attr('value');
percentage = (valueAttr/maxAttr) * 100;
if(percentage<49){
document.styleSheets[0].addRule('.semantic', 'color: red');
document.styleSheets[0].addRule('.semantic::-webkit-progress-value', 'background-color: red');
document.styleSheets[0].addRule('.semantic::-moz-progress-bar', 'background-color: red');
}
else if(percentage<98){
document.styleSheets[0].addRule('.semantic', 'color: orange');
document.styleSheets[0].addRule('.semantic::-webkit-progress-value', 'background-color: orange');
document.styleSheets[0].addRule('.semantic::-moz-progress-bar', 'background-color: orange');
}
else {
document.styleSheets[0].addRule('.semantic', 'color: green');
document.styleSheets[0].addRule('.semantic::-webkit-progress-value', 'background-color: green');
document.styleSheets[0].addRule('.semantic::-moz-progress-bar', 'background-color: green');
}
});
});
</script>
<style>
progress {
/* Positioning */
position: fixed;
left: 0;
top: 0;
/* Dimensions */
width: 100%;
height: .20em;
/* Reset the apperance */
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
/* Get rid of the default border in Firefox/Opera. */
border: none;
/* For Firefox/IE10+ */
background-color: transparent;
/* For IE10+, color of the progress bar */
color: red;
}
progress::-webkit-progress-bar {
background-color: transparent;
}
.flat::-webkit-progress-value {
background-color: #c2f169;
}
.flat::-moz-progress-bar {
background-color: #c2f169;
}
.single::-webkit-progress-value {
background-color: transparent;
background-image: -webkit-linear-gradient(left, transparent, #c2f169);
}
.single::-moz-progress-bar {
background-color: transparent;
background-image: -moz-linear-gradient(left, transparent, #c2f169);
}
.multiple::-webkit-progress-value {
background-image: -webkit-linear-gradient(-45deg,
transparent 33%, rgba(0, 0, 0, .1) 33%,
rgba(0,0, 0, .1) 66%, transparent 66%),
-webkit-linear-gradient(left, green, #c2f169);
}
.multiple::-moz-progress-bar {
background-image: -moz-linear-gradient(-45deg,
transparent 33%, rgba(0, 0, 0, .1) 33%,
rgba(0,0, 0, .1) 66%, transparent 66%),
-moz-linear-gradient(left, green, #c2f169);
}
.progress-container {
width: 100%;
background-color: transparent;
position: fixed;
top: 0;
left: 0;
height: .20em;
display: block;
}
.progress-bar {
background-color: #c2f169;
width: 50%;
display: block;
height: inherit;
}
</style>
</head>
<body>
<progress value="0" id="progressBar">
<div class="progress-container">
<span class="progress-bar"></span>
</div>
</progress>
scroll down
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
asd
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
asd
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
asd
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
asd
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
asd
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment