Page Scroll Progress Indicator

We will discuss the Horizontal Page Scroll Progress Indicator today. We will know what the horizontal page scroll progress indicator is and why it is used. Also, we will learn how to create a horizontal page scroll progress indicator using HTML, CSS, and JavaScript. But before proceeding, I request you to watch the following video tutorial. This will help you understand your source code. Our channel has videos on many topics of front-end development. If you want you can subscribe to our YouTube channel.

Video Demo:

I hope you have seen the video. The horizontal page scroll progress indicator is a graphical element that is situated top of the page of a website after scrolling. The viewer can know about the scrolling progress and amount of content by looking at this complete graphical element. In addition, the user can know how much of the page will be filled. It tells users whether a page is complete or not. It also creates an important connection with the users which helps to increase their enthusiasm.

To create a horizontal page scroll progress indicator we first need to create a div element. Next, we'll add some space and create a new div element where the content of the text content will be situated. Here 'scrollDiv' is the horizontal line placed at the top of the page. The total length or progress of that line will increase as the user scrolls the page. Watch the above tutorial to see how we used CSS to stylize the snippet. Next, we used JavaScript to initiate the progress scrollbar animation. This JavaScript code creates a horizontal progress bar that updates as the user scrolls down the page. It calculates the percentage of the page scrolled based on the current window scroll position and maximum height. The progress bar's width is updated to show the user how far they have scrolled through the page.

You May Also Like:

Horizontal Page Scroll Progress indicator [ Source Code ]:

To create this Scroll Progress Indicator, first, create an HTML file and a CSS file. You can create a separate js file and put the JavaScript part to initiate the progress bar animation. Make sure to link this file with your HTML file. For this project, we have used the HTML file to add the script. After that, copy the code from the code box below and paste it into your files.

ADD HTML:

<!DOCTYPE html> 
<!-- divinectorweb.com -->
<html> 
  
<head> 
    <title>Horizontal Scroll Indicator using HTML CSS & JS</title>
    <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500&display=swap" rel="stylesheet"> 
    <link rel="stylesheet" href="style.css">
</head> 
  
<body> 
    <div class="box" id="scrollDiv"></div> 
    <div class="content">
        <h2>Scroll Indicator</h2>
        <h4>HTML CSS Javascript</h4> 
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sit tempora animi eveniet magnam labore deleniti alias quo vero iusto assumenda omnis debitis a tenetur optio deserunt, quas doloribus nulla ad sint. Nam autem dignissimos excepturi aliquam. Facilis cupiditate aut consequuntur sunt placeat quis quaerat. Neque quibusdam animi assumenda! Ad, odit. Ipsam modi magnam, est inventore qui, vitae magni accusantium accusamus laborum quam sequi tempora molestias fugit odio similique quidem ex perferendis facere consectetur officia omnis in? Quibusdam neque, voluptates voluptate dignissimos placeat accusamus vero aliquid cum molestiae odit velit quaerat eum sunt libero rerum doloribus dolor nisi dicta qui! Accusantium esse obcaecati ea. Id similique consequatur numquam, obcaecati maxime provident. Excepturi enim, ad neque deserunt atque impedit natus unde quam aut provident? Incidunt eum quis saepe odio necessitatibus eos perferendis vel atque expedita excepturi nulla quibusdam, architecto, iusto, facere eius explicabo molestiae exercitationem tempora! Cum ipsa doloremque temporibus est officia dolores quidem quibusdam perspiciatis cupiditate, consequuntur praesentium ad corporis rerum itaque similique nam tempora sequi iusto nisi soluta voluptatibus! Reiciendis a aspernatur vitae quidem accusantium commodi, itaque fuga atque aperiam, eius est placeat enim sint ducimus? Culpa, architecto expedita nisi tenetur maiores natus vitae cupiditate rerum quisquam animi dolorum repellendus perferendis autem distinctio minima! Eveniet reiciendis earum, tempore, inventore natus blanditiis totam quidem ex voluptatum nemo fuga error. Delectus iure harum quae quibusdam vel at architecto. Neque assumenda aut eum nemo consequatur perferendis voluptatum qui nisi velit exercitationem, odio omnis ratione voluptas eveniet commodi provident facere laboriosam dolores non quo? Ullam ipsam in molestiae obcaecati accusamus quae, ut, quos facere eveniet aspernatur assumenda repellendus labore voluptates? Possimus vitae molestiae reiciendis architecto, magnam officia harum illo aliquid laborum autem, ipsum soluta incidunt natus id. Neque aliquam doloribus temporibus officiis deleniti tempora. Consequatur blanditiis reprehenderit asperiores similique ratione, rerum, accusamus assumenda fugit est mollitia aliquam modi expedita repellendus, facilis corrupti repudiandae ullam repellat. Architecto dolorem accusamus voluptatem hic, omnis magnam optio iure commodi a sit amet officia culpa eligendi, voluptas saepe laudantium distinctio tempore sapiente ullam adipisci fugiat, blanditiis facilis. Repellat, consequuntur possimus delectus nulla corporis, quia distinctio quis eaque minus molestiae commodi totam ipsa vel tempore assumenda repudiandae nisi. Ab dicta cupiditate quidem, quasi totam numquam facere nobis corporis velit ducimus porro, dignissimos vitae ipsa magni. Voluptatibus praesentium aspernatur quisquam mollitia harum blanditiis minus et obcaecati eos, inventore sunt illo officiis aliquid, voluptate repudiandae nostrum accusamus accusantium sequi. Facilis illum libero voluptatibus iure rem amet vitae provident autem, totam, fuga inventore nesciunt fugit quaerat officiis modi vero dolores, sit quam beatae quis quos quod? Nobis, deserunt quaerat nihil reiciendis eaque vel, sapiente et explicabo iure nesciunt tenetur. Impedit animi ipsam hic in incidunt minus dolore deleniti ratione, blanditiis eos architecto cum quod enim illum, ex eveniet repellendus fugit reiciendis laudantium! Magnam officiis maxime est incidunt esse perferendis aliquid, iusto cum error. Mollitia voluptates voluptas unde, laboriosam aliquid libero rem placeat iste, odit explicabo eum exercitationem! Esse dolorum doloremque, nostrum delectus hic beatae? Deleniti consectetur animi deserunt maxime libero reprehenderit quae autem provident nobis nostrum earum nulla itaque, sed ullam ea est. Culpa, recusandae deserunt voluptas cumque ab praesentium? Accusamus odit, dolore officia at culpa eum numquam aut sit quasi recusandae nostrum suscipit rerum alias exercitationem. Nisi, sunt velit culpa veritatis facere reprehenderit distinctio nihil quaerat rerum, fugiat accusamus minima asperiores cupiditate eius aliquam, fugit nulla consequuntur! Cum iste expedita facere commodi ratione fuga pariatur fugit incidunt reprehenderit rem eveniet illum, cupiditate ea officiis laborum quae voluptates voluptatibus. Consequatur delectus accusantium sed rerum ea non ipsam totam quos, error exercitationem a in, distinctio eaque porro nostrum nihil omnis laudantium eos animi labore vitae fugit quidem! Ipsam rem, alias corporis, pariatur provident quisquam sequi quibusdam voluptate, odio consequatur fuga animi laudantium! Qui esse omnis blanditiis vitae ad, ut saepe laudantium obcaecati, distinctio officia illum debitis officiis veniam fugiat. Voluptatem aspernatur, soluta nobis architecto voluptatibus sapiente. Eos provident alias ratione quaerat nulla mollitia eius. Eaque omnis nulla molestias odit quod atque, natus possimus minus quis commodi ex illum amet distinctio error suscipit, cum mollitia alias facere impedit. Repudiandae commodi voluptatem excepturi voluptates non? Aspernatur nemo provident incidunt fugit perspiciatis suscipit reprehenderit dolorum est impedit voluptas! Hic aperiam, a doloribus, cumque saepe dolores distinctio iure maxime tempora asperiores porro vitae illo laborum autem id officia perspiciatis earum ducimus aliquid vero dolore aut? Quidem, atque. Culpa velit minus obcaecati, animi sapiente eligendi, ducimus aspernatur quos blanditiis laborum est quasi omnis at amet? Voluptate nulla aspernatur dolor laborum impedit sed iusto veritatis, harum fuga omnis incidunt consequuntur totam molestias neque voluptas placeat libero eos deserunt nam dignissimos, dolore dolorum dolorem consequatur? Cumque a consectetur facilis quisquam earum atque, aperiam ducimus doloremque nemo incidunt. Ab nobis illo officia, beatae libero ipsum modi eveniet cum hic reiciendis, voluptatibus amet sapiente quisquam quas aperiam, maiores nostrum delectus expedita consequatur ipsam blanditiis est praesentium sint! Corporis, odio? Culpa vero ratione voluptate harum. Non deleniti ea quae, ad voluptatem accusantium et quo quos animi ducimus alias recusandae quisquam beatae. Animi aspernatur fuga illum libero maxime quos, et praesentium suscipit distinctio obcaecati consectetur hic sequi accusantium quisquam odio doloribus ab repellendus vero architecto reprehenderit velit? Cumque recusandae quasi deleniti explicabo amet accusamus dolor quas quia aliquid, facere sequi suscipit sit ratione numquam nulla a reiciendis! Aperiam dolorem fugiat, amet a fuga quibusdam minima rerum repellendus consequuntur adipisci accusantium ut commodi, voluptatem quisquam beatae explicabo odio assumenda laborum sed. Facere doloremque vel, accusantium voluptas nemo eligendi a beatae! Animi, dicta inventore accusantium nesciunt amet excepturi quam? Doloribus, porro adipisci. Cumque corporis earum sit sed iste rerum iure assumenda, dolor odit necessitatibus. Officia pariatur, tenetur velit eaque unde quidem officiis, fugit voluptatum consequatur incidunt ab repudiandae hic odit molestias inventore quae. Vel delectus quae cupiditate sint? Labore, praesentium repudiandae totam aperiam hic numquam harum quibusdam, nam cumque officiis, nulla quia perferendis quo nemo inventore rerum sequi. Maxime beatae quibusdam ad blanditiis! Quos in vel ducimus, repellendus rerum veritatis tempora qui sequi omnis quis. Deserunt necessitatibus sequi velit. Aperiam ipsam quas quo nesciunt quisquam aut repellat adipisci nam exercitationem iste dolores maiores molestias, tempore laudantium nisi aspernatur expedita. Natus eius optio distinctio delectus reiciendis consequuntur alias accusantium doloremque, error cupiditate nemo facere, voluptate tempore, labore ut. Quas voluptates illo reprehenderit voluptatibus incidunt eum autem dolorum fugit. Laboriosam architecto veritatis molestiae numquam, amet fuga iusto tempora ratione assumenda eligendi aspernatur iste consequatur, dolores repudiandae inventore explicabo, corrupti officiis porro. Dolorum maiores praesentium magni sed ad id maxime eos laboriosam autem minima! Atque, debitis nostrum libero eos animi cupiditate nesciunt nam nulla ad corporis ea dolore tempora et eveniet rerum. Quasi odit tempore aspernatur blanditiis saepe fugit asperiores officia, nulla est et atque? Ab, quo dolorum! Ipsa recusandae facilis quo obcaecati, praesentium consectetur, doloribus sapiente eaque iusto porro illum fugit nesciunt. In delectus quisquam adipisci incidunt error laboriosam vero nobis a culpa velit architecto quo cumque tenetur dicta illo atque quam reprehenderit dolorem asperiores tempore, molestias perspiciatis magnam! Tempora architecto quam, asperiores cum quo, ullam aliquam laboriosam cupiditate doloribus consequuntur quaerat. Architecto sint dolores eaque, necessitatibus, libero deleniti voluptates, alias magnam amet veritatis reprehenderit dolorum soluta voluptatem quaerat iste dicta? Quae suscipit similique minus consequuntur expedita ducimus est! Sint enim fuga vitae dolorem magni suscipit nobis totam voluptatem, a omnis, hic nesciunt fugiat eos voluptas odit! Commodi aliquid illum fugiat blanditiis deserunt modi neque aspernatur doloremque nihil voluptatem quis autem, facilis quaerat consequuntur odit voluptate provident! Deleniti est tenetur error, qui reiciendis ullam amet minus autem, inventore nulla ab dignissimos rem et, perferendis fugiat repellendus esse explicabo officiis dolor libero numquam. Commodi nisi voluptas saepe culpa illum dolor ipsam hic asperiores accusamus nam. Autem, deleniti quod quae, eum laboriosam iure ab impedit, eaque nostrum quaerat at! Quia quibusdam et, consectetur eius autem sequi. Veniam neque consequuntur nostrum odio ipsa error velit fuga saepe possimus tenetur amet natus doloremque illum molestiae odit doloribus sequi autem porro aperiam adipisci, voluptatum sunt deserunt ratione? Aliquam rerum aut unde officiis quod id consequuntur sunt animi amet? Illo laudantium sequi doloribus rerum explicabo iste corrupti, consequatur omnis soluta voluptatibus ipsum nobis dignissimos commodi vel nihil, odit odio, asperiores similique doloremque ipsam provident earum quibusdam. Nobis praesentium pariatur dolorum a adipisci rem veritatis facere nostrum animi, esse omnis quam autem maxime in repellat aspernatur debitis. Libero rem vel eos voluptates at veniam sequi quod? Inventore, aliquid excepturi esse molestias facere laudantium expedita obcaecati nesciunt hic cum explicabo aut nemo laborum necessitatibus sint itaque dicta voluptatem placeat consequatur unde veniam ut corporis eligendi corrupti. Numquam veritatis illo debitis voluptatibus quia magnam tempora, vel est blanditiis deleniti rem eligendi asperiores quos quaerat. Doloremque obcaecati nihil, minima dolor odit fugit tenetur a praesentium perspiciatis iure sed officia id ipsam commodi asperiores pariatur molestiae quos voluptates sequi at aut aperiam. Atque, aliquid! Minus possimus consequatur adipisci dolores vero minima neque doloremque cum voluptas esse quis ipsum omnis, sit, nisi cumque in. Voluptates tenetur nemo placeat! Laudantium amet eos modi deleniti tempora ullam id accusantium suscipit rerum ex nobis, aspernatur distinctio quam qui? Natus maiores magni atque facilis veniam!</p> 
    </div> 
  
    <script type="text/javascript"> 
        window.addEventListener('scroll', moveScrollIndicator); 
  
        const scrollIndicatorElt = document.getElementById('scrollDiv'); 
  
        const maxHeight = window.document.body.scrollHeight - window.innerHeight; 
  
        function moveScrollIndicator(e) { 
            const percentage =  ((window.scrollY) / maxHeight) * 100; 
  
            scrollIndicatorElt.style.width = percentage + '%'; 
        } 
    </script> 
</body> 
  
</html>

ADD CSS:

*{
    margin: 0;
    padding: 0;
}
 
body {     
    background-color: #0259f0;
}

.content {
text-align: center;
padding: 2% 6%;
color: #fff;
}

.content h2 {
font-family: 'Bebas Neue', cursive;
font-size: 4rem;
margin: 0;
}

.content h4 {
font-family: 'Montserrat', sans-serif;
margin: 0;
font-size: 24px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 10px;
margin-bottom: 5%;
}

.content p{
text-align: justify;
font-size: 15px;
line-height: 1.9;
font-family: 'Montserrat', sans-serif;
}

.box {
background: linear-gradient(to right, #ee0979, #ff6a00);
height: 15px;
width: 0%;
position: fixed;
top: 0;
border-radius: 0 15px 15px 0;
}

Hope your code is working fine. We have hundreds of other projects available on this website. Click the load more button at the bottom of our homepage to get those. If the contents of our website have been beneficial to you, please share them with others. Thank you very much for visiting our website.

DOWNLOAD CODE

Video Demo:

Horizontal Page Scroll Progress indicator [ Source Code ]:

Post a Comment

Post a Comment

About Us

Contact Form

Page Scroll Progress Indicator

Video Demo:

Horizontal Page Scroll Progress indicator [ Source Code ]:

You might like

Post a Comment

Post a Comment

Contact Form