How to show the scrolling percentage on screen using HTML CSS & JavaScript? Solution: JavaScript Scroll Percentage Show With Animation, HTML CSS JS Animate Scrolling Percent.
Maybe you saw a top progress bar for showing scroll information on may websites. Also, many websites use a circle with showing percent how many percents of webpage user has been scrolled. Some use both of these, that is a pretty cool effect for a webpage.
Today you will learn to show scrolling percentage information to webpages and users. This is possible with JavaScript, Also you have to use HTML & CSS because without these you can’t create just a webpage. This is very easy to understand & as always this also useful at the real-time environment.
So, Today I am sharing JavaScript Scroll Percentage Show With Animation program. In other words, showing scrolling percent with numbers and also with a progress bar using HTML CSS & JavaScript. This is a very short program, You can use it on your website after some modification. After getting the code you will fully understand the whole concept.
If you are thinking now how this animated scrolling percentage actually is, then see the preview given below.
Preview Of HTML CSS JS Animated Scrolling Percent
See this video preview to getting an idea about how this looks like.
Now you can see this visually. If you like this then get the source code of its.
You May Also Like:
- Animated Newsletter Signup Form
- Scroll To Top Feature With JavaScript
- Split an Image Using JavaScript
- Dynamic Banner Website Intro
JavaScript Scroll Percentage Show Source Code
Before sharing source code, let’s talk about it. First, I created a div with ID scroll-percent & also put data-scrollPercentage attribute. Basically, The data-* attributes is used to store custom data private to the page or application (get info). For creating the progress bar I created another div with class percentage.
After that, I created a circle in the bottom right position to show the percentage of scrolling. I gave width: 150px and height: 150px to this div, and put border-radius 50%. Now I created a div with 4000lpx height to creating webpage long. In the JS section, we declare the webpage height 100% now javascript will calculate how many percents you have been scrolled.
First, in CSS section I put progress bar’s height and circle’s value 0. Now JS modify the values of two elements. Now I can’t more explain by writing, get the codes then you will understand automatically. To create this program you have to create 3 files, first for HTML, second for CSS, & the third for JavaScript. Follow the steps to creating it without any error.
index.html
Create an HTML file named ‘index.html‘ and put these codes given below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<!DOCTYPE html> <!-- code by webdevtrick ( https://webdevtrick.com )--> <html> <head> <meta charset="UTF-8"> <title>JavaScript Animated scroll percentage | Webdevtrick.com</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://fonts.googleapis.com/css?family=Oswald&display=swap" rel="stylesheet"> <link rel="stylesheet" href="style.css"> </head> <body> <div id="scroll-percent" data-scrollPercentage><div class="percentage"> </div></div> <div id="percentage-value"></div> <div style="height: 4000px;"> </div> <script src="function.js"></script> </body> </html> |
style.css
Now create a CSS file named ‘style.css‘ and put these codes.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
/** code by webdevtrick ( https://webdevtrick.com ) **/ body { margin: 0; padding: 0; overflow-x: hidden; background-color: #E8E4E4; font-family: 'Oswald', sans-serif; } #scroll-percent { position: fixed; top: 0; width: 100vw; color: #000; margin: 0; padding: 0; } #percentage-value { position: fixed; top: 75%; left: 95%; transform: translateX(-50%); height: 150px; width: 150px; color: #FB3C3F; background-color: white; text-align: center; line-height: 150px; border-radius: 50%; box-shadow: 1px 1px 8px 2px #FB3C3F, -1px -1px 8px 2px #FB3C3F; font-size: 3em; z-index: 1; } [data-scrollPercentage] .percentage { display: inline-block; background-color: #FB3C3F; height: 6px; width: 0; } |
function.js
The final step, Create a JavaScript file named ‘function.js‘ and put the codes.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
/** code by webdevtrick ( https://webdevtrick.com ) **/ const updateScrollPercentage = function() { const heightOfWindow = window.innerHeight, contentScrolled = window.pageYOffset, bodyHeight = document.body.offsetHeight, percentage = document.querySelector("[data-scrollPercentage] .percentage") percentageVal = document.querySelector("#percentage-value") if(bodyHeight - contentScrolled <= heightOfWindow) { percentageVal.textContent = percentage.style.width = "100%" } else { const total = bodyHeight - heightOfWindow, got = contentScrolled, percent = parseInt((got/total) * 100) percentageVal.textContent = percentage.style.width = percent + "%" } } window.addEventListener('scroll', updateScrollPercentage) |
That’s It. Now you have successfully created JavaScript Scroll Percentage Show Program, A HTML CSS JavaScript Animated Scrolling Percent Showing to webpage function. If you have any doubt or question comment down below.
Thanks For Visiting, Keep Visiting.
Trying this in wordpress/elementor but am showing red on “[data-scrollPercentage]” and so i believe this is causing % to display as circle with number in bottom right of screen… Any way you can assist here? (https://ontarget736980020.wpcomstaging.com/rest-pause-the-proven-best-technique-for-growth/)
Actually fixed that however is offset by around 10% and haven’t got a clue :p