How To Create Reading Progress Bar with Javascript

Let’s create reading progress bar with javascript.

HTML

<div class="container">
<progress id="indicator" value="0" max="100"></progress>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere quas quam blanditiis
illum ad dicta possimus
odit
ullam culpa, illo provident a alias odio optio ea repellat! Alias, porro sapiente.
Saepe nulla quos fuga unde deserunt reprehenderit earum distinctio, dignissimos itaque animi accusantium?
Quas
quos corrupti dignissimos accusamus, dolor expedita inventore voluptatibus, quia officiis quidem excepturi
mollitia modi laboriosam libero.
Adipisci qui distinctio magnam atque veritatis quisquam cupiditate vel laborum quam fuga aperiam delectus
maxime
possimus sint labore hic molestiae cum molestias esse ex officia magni provident, ut ad! Aliquam?
Neque sit delectus optio? Perferendis provident dignissimos voluptatem id sint doloribus deserunt fugit odit
similique labore unde a, ad non vel natus, esse accusantium facere libero blanditiis impedit! Voluptatibus,
porro.
Accusamus minus, exercitationem enim explicabo accusantium doloremque eaque velit! Obcaecati tempora iusto
magni
amet, voluptas quo ullam explicabo corporis possimus itaque quidem consequuntur, enim, sint vel quod nihil
accusamus eveniet.
Consectetur obcaecati, molestiae suscipit perspiciatis enim ut rem illum expedita consequuntur eligendi
labore
vitae iure iusto eum omnis quidem ab. Autem culpa, inventore quaerat repellendus ratione perferendis enim
voluptas alias.
Nulla, fugit id nam sunt ab aspernatur temporibus ducimus ratione repellendus, fuga ipsa voluptate nostrum?

<img src="image/1.jpg" alt="" srcset="">

Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique ducimus deleniti nihil iusto et minus.
Incidunt ipsum repudiandae, vitae iste reiciendis consectetur nobis molestiae vel, deleniti ea accusamus
harum
sequi?
Similique, sequi recusandae quae illum ratione officiis obcaecati voluptatem iste necessitatibus excepturi
eveniet quasi ipsam vitae omnis adipisci commodi accusamus corporis sunt itaque quam. Reprehenderit eaque
pariatur quaerat tempora! Temporibus?
Corporis, mollitia sequi, ullam distinctio libero dolore maxime ducimus nesciunt sint quis dolorem?
Molestias
velit rem beatae quibusdam soluta sint debitis labore, quod maiores totam, reprehenderit perferendis,
temporibus
voluptatibus voluptas!
Illum excepturi vel libero magni. Quos facere maiores, rerum accusamus eaque optio, non autem enim minus
fugiat
officia molestias facilis harum consequatur, modi quasi soluta cumque nisi voluptas est blanditiis.

<img src="image/2.jpg" alt="" srcset="">

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Pariatur, animi repellendus? Magnam debitis,
dolorum,
voluptas velit veritatis, temporibus corporis maiores quia est laudantium consectetur repellendus excepturi!
Quae quas ex est?
Dolor alias aperiam incidunt ab debitis soluta reprehenderit fugiat dicta assumenda et obcaecati impedit
saepe
magni recusandae non illo sint quae vero sapiente, sunt deserunt mollitia nam, dignissimos voluptatibus.
Necessitatibus.
Inventore asperiores id minima ducimus, iure aliquid atque iste culpa obcaecati explicabo. Provident
eligendi
modi nisi in sunt delectus itaque. Quibusdam dolores dolore nam qui in porro amet tempora ipsam.

<img src="image/3.jpg" alt="" srcset="">

Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium aperiam rerum porro veritatis, ullam
reprehenderit explicabo fuga voluptas blanditiis dicta ut beatae illo saepe deserunt sequi sint, omnis
corrupti
architecto!
Eaque sit, animi quam velit non eius quis mollitia id? Error repudiandae ut debitis laboriosam
exercitationem
explicabo, eum blanditiis aspernatur dolor dicta? Fugit deleniti dignissimos, quam ullam nostrum repellendus
itaque!
Asperiores sapiente iusto tenetur repellendus in impedit minima fuga soluta possimus dolor. Necessitatibus,
officiis dolor. Voluptatibus ut amet accusantium aspernatur aliquam voluptate molestiae id alias ducimus ad
quos, debitis dolorem?
Maxime rem velit, quaerat quisquam deserunt doloribus in necessitatibus ducimus accusamus animi. Accusamus
dicta
aliquid quasi, quidem maxime soluta saepe aperiam cupiditate fugit unde possimus? Eum aperiam ratione
facilis
maiores?
Molestias qui iste modi laudantium harum vero? Incidunt cupiditate sit molestias pariatur? Corrupti,
similique
itaque? Asperiores, nihil aperiam nisi necessitatibus quaerat, alias atque sequi repellat nobis consequuntur
et
ut laborum.
Veniam perferendis voluptatibus molestias deleniti facere maxime perspiciatis reprehenderit, quasi minima
architecto iste blanditiis praesentium! Nisi aut aperiam, maxime labore voluptatibus nam, reprehenderit
accusamus, commodi odio amet sit veniam atque!
Voluptatem praesentium laborum hic officia necessitatibus libero fugit unde voluptatum, rerum corrupti
dicta.
Voluptate iusto, beatae dolore, quia optio earum mollitia tempora aliquam quisquam amet tenetur quam
adipisci
expedita nesciunt.
Impedit tenetur quia illum voluptatem, distinctio, nisi quas, corporis culpa libero asperiores quam. Eaque
officia voluptatem ipsa repellendus sequi, voluptates delectus quam dolores ex impedit? Deleniti quo nihil
consectetur quaerat.
Nihil nostrum quam qui natus deserunt amet doloribus maxime officia sapiente dicta earum, velit error
inventore

<img src="image/4.jpg" alt="" srcset="">

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi sapiente ipsa necessitatibus eum
doloribus
vero magni cum rerum iste natus quod cupiditate, dolor magnam. Et possimus nemo fugiat eligendi eius.
Aliquam dolore in saepe quo explicabo minus vero eaque dicta, dolorum nemo, voluptate quidem autem fugiat
iure!
Aliquid blanditiis laboriosam voluptatem ut perferendis amet delectus soluta unde, sequi, eligendi
excepturi!
Provident magnam quisquam minus autem excepturi obcaecati sed dolor quas, magni commodi ex! Quibusdam
commodi
dolores minus atque aperiam labore quas ducimus! Consectetur fugiat quibusdam voluptates corrupti, obcaecati
porro hic.
blanditiis vero illo ea? Ullam, doloremque! Dolores blanditiis ut laboriosam, sit quaerat natus sed?
Incidunt veritatis ducimus non porro reiciendis, maiores voluptatum maxime quia facilis saepe illum, in
magnam,
assumenda inventore necessitatibus ex illo temporibus cumque? Excepturi hic repellat fugit quam obcaecati
rerum
deleniti?

<img src="image/5.jpg" alt="" srcset="">

Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam odio, eius, cumque unde consectetur
reprehenderit sunt eaque magni molestias doloribus repellat distinctio itaque consequatur facilis placeat
cum
sed ut fuga!
Fugit qui aliquam, magnam molestiae aut culpa non reprehenderit eos eum minus praesentium tenetur ea
adipisci
odio dolore veniam, quo obcaecati nemo illo voluptatem neque distinctio officiis impedit facilis!
Repudiandae!
Unde quis quasi ducimus, debitis ullam velit voluptatibus vero id accusamus, quam voluptatum! Molestias iste
porro inventore perferendis minus mollitia, laborum, cumque officiis maiores, optio laboriosam nesciunt id!
Molestiae, ab!
Perferendis deleniti, aspernatur dolor consequuntur expedita magnam tempora earum, nesciunt fuga delectus
sequi
animi dolorum ipsam nobis pariatur autem maxime est ducimus quos voluptatem ipsum culpa atque aliquid
eligendi?
Molestiae.
Dolorum facere saepe, itaque doloribus ipsam distinctio adipisci modi aut cumque ex, hic quo? Consequuntur,
vitae nemo exercitationem esse molestias doloribus aperiam aspernatur! Tempora modi saepe corrupti fuga vel
obcaecati.
Laudantium error, sed incidunt quo dolores delectus culpa, eveniet quae necessitatibus fuga esse
consequuntur!
Accusamus unde voluptatibus ex, nobis perspiciatis officia soluta harum facere? Ipsum laboriosam quis odio
atque
illum.

<img src="image/6.jpg" alt="" srcset="">

Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate ex eaque dolore magni molestiae, laborum
quia
omnis hic nisi soluta cum nostrum, amet nobis quos quis officia totam maxime facere?
Veniam nihil, distinctio eum iure, dolore aspernatur est nobis libero a, nisi laboriosam quidem? Dolores
numquam
sed sapiente fugit sequi vero sunt qui maxime a, nobis aut consectetur delectus aliquam.
Assumenda ratione exercitationem, nam iure officia atque labore nesciunt itaque eveniet quia nemo, delectus
sapiente quam, quibusdam pariatur explicabo ex consequatur cumque id quod temporibus blanditiis! Assumenda
fugit
maxime temporibus!
Soluta at eveniet doloremque perferendis praesentium sapiente tempore fugiat velit neque odit blanditiis cum
vero consequatur nobis eligendi perspiciatis cupiditate, laborum quo totam! Dignissimos consectetur vero
quasi
fuga, quae modi.
Culpa pariatur saepe earum itaque provident. Reiciendis beatae blanditiis eum ipsum dolorem expedita
reprehenderit assumenda hic voluptatibus alias fuga dolore iusto, magnam repudiandae. Dolorem iusto fugit
reiciendis nobis similique dolorum.
Libero voluptate laudantium atque, consequuntur dolorem aut distinctio tempora, voluptatem voluptatibus,
deleniti quam esse? Rerum cum nemo voluptas velit earum quidem fugiat odit optio illum, laborum rem dolor
quam
eos.
Deleniti consequatur cumque reprehenderit sapiente et quaerat dolorum autem aut perferendis repellendus
fugit
hic, blanditiis sequi unde odio labore distinctio, libero enim! Numquam consequatur, dolore dicta nam odio
amet magnam!
Blanditiis aliquid, ullam assumenda labore nihil rerum laborum saepe dicta magni aut tempora quos ab sequi
sunt?
Possimus, repellat cum. Nulla illo earum unde quas officiis eum doloremque odit qui.
Dicta amet modi quam pariatur temporibus sapiente sint necessitatibus quasi, quaerat sed itaque tempora
eveniet.
Natus, ipsam perspiciatis architecto provident asperiores sequi magnam repellat tenetur dolore accusantium,
dolorem molestiae quibusdam!

<img src="image/7.jpg" alt="" srcset="">

Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni, consectetur. Esse quia error quibusdam modi
reprehenderit! Velit, minus. Totam inventore eveniet doloribus, quia esse harum deleniti soluta labore vitae
omnis?
Rem accusantium omnis numquam amet culpa assumenda? Suscipit animi id nam inventore nulla architecto
reiciendis
ut dolores, nesciunt deleniti quod rem, soluta tempora, corporis sunt perferendis. Omnis unde facilis
tenetur.
Reiciendis exercitationem nesciunt sint eum porro debitis deserunt quia provident laudantium? Soluta cum
repellat ipsam accusamus explicabo numquam harum eveniet magnam facere quasi, deleniti id nisi adipisci
error
voluptates? Harum!
At laboriosam quasi sunt laudantium ad earum suscipit mollitia obcaecati porro inventore, maxime labore nemo
corrupti et facilis delectus eligendi placeat iure nesciunt eum! Maiores, culpa officia. Maxime, illo
officiis!
Alias molestiae quaerat non similique libero asperiores vitae facere ratione reiciendis ex distinctio, iusto
id,repudiandae mollitia velit magnam sint excepturi. Deleniti, ut? Id adipisci mollitia, eius delectus tenetur
quis?Laborum, repellat sapiente eveniet doloribus minima eligendi dolore nostrum fugiat unde explicabo quam esse
rem
sed distinctio in molestias repellendus sint facilis. Aspernatur a voluptates explicabo beatae quasi illum
sed.
Veniam quod ratione sed suscipit, facilis neque velit porro, et culpa eum quos modi, iusto temporibus
dolorum
voluptates. Harum obcaecati reprehenderit optio voluptatum, ex molestiae praesentium hic cum corrupti
voluptatem.
Quo aperiam mollitia tempore tempora fugit quod illum excepturi eveniet quia architecto pariatur quos
eligendi
veniam soluta, animi laudantium et laborum facere distinctio repudiandae? Optio, magni! Inventore sed
quisquam
dolore.
Quam, obcaecati nulla exercitationem rerum quibusdam omnis ea inventore! Accusamus fugit quia facere
temporibus
eum numquam nemo placeat aperiam rem iusto, ea sed, perspiciatis velit harum nulla adipisci vitae autem.
Voluptatibus dignissimos mollitia tempore laboriosam aut. Fugiat minima blanditiis repellat temporibus
porro,
quae a non aperiam. Repellat, vel, quidem facilis veniam eveniet consequuntur ipsa illum, necessitatibus cum
reiciendis consequatur!
tenetur animi commodi iusto qui cupiditate aut mollitia laboriosam sed! Necessitatibus facilis corrupti aut
rem?

<img src="image/8.jpg" alt="" srcset="">
</div>

CSS

html {
    box-sizing: border-box;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

body {
    padding: 0;
    margin: 0;
}

.container {
    width: 1000px;
    margin: 0 auto;

}

#indicator {
    width: 997px;
    position: fixed;
    top: 0px;
    height: 9px;
    background-color: #fff;
}

img {
    width: 350px;
    height: 350px;
}

JS

document.addEventListener("scroll", () => {
    let windowHeight = window.innerHeight;
    console.log(windowHeight) // height of the visibile part of window
    const body = document.body;
    const html = document.documentElement;
    const documentHeight = Math.max(body.getBoundingClientRect().height, 
    html.getBoundingClientRect().height);
    const position = window.scrollY;
    let progress = (position / (documentHeight - windowHeight)) * 100;
    document.getElementById('indicator').setAttribute('value', progress)
});