Problems with Custom Progress Bar

Design help Custom code
1

Continuing the discussion from Reading progress bar for articles / one page sites :slight_smile::

I have tried to implement it but I am not able to show anything on my site. :frowning:

I put this in custom head code:

<!Progress Bar>
<style>
progress {
/* Positioning */
position: fixed;
left: 0;
top: 0;
z-index: 100000000;
width: 100%;
height: 3px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;

/* Get rid of the default border in Firefox/Opera. */
border: none;

/* Progress bar container for Firefox/IE10+ */
background-color: #333;

/* Progress bar value for IE10+ */
color: #E60000;
}

progress::-webkit-progress-bar {
background-color: transparent;
}

progress::-webkit-progress-value {
background-color: #333;
}

progress::-moz-progress-bar {
background-color: #333;
}
</style>

I put this in Footer Code:

<!Progress Bar JQuery>
<script>
$(document).on('ready', function() {
var winHeight = $(window).height(), 
docHeight = $(document).height(),
progressBar = $('progress'),
max, value;

/* Set the max scrollable area */
max = docHeight - winHeight;
progressBar.attr('max', max);

$(document).on('scroll', function(){
value = $(window).scrollTop();
progressBar.attr('value', value);
});
});
</script>

And I made a Custom Code Field in my Header with an own class and put in this code:

<script>
{progress value="0"}{/progress}
</script>

Does anybody has a idea why it is not displayed at my site?

Thank you so much in advance! :slight_smile:

2

Just changed the Custom Code Fild Code to:

<script>
<progress value="0"></progress>
</script>

but still not appearance :neutral_face:

3

Thank you so much for editing the origin post :slight_smile:
Know i have got it and it works perfectly with this custom html code:

<script>
<progress value="0"></progress>
</script>
4

@jonas You are welcome.