Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div class="progress"></div>

<div class="container">
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui optio ipsam modi ipsa enim eum iste debitis non quasi, similique voluptates praesentium aperiam aut deserunt eveniet eaque nesciunt obcaecati sit consectetur quam illo pariatur inventore? Earum deserunt sunt pariatur nihil, hic eos impedit voluptas tenetur nesciunt aliquam quae beatae! Repellendus, eligendi eius, provident nam ullam autem recusandae voluptates omnis, assumenda eos culpa aliquam laudantium. Placeat error quisquam repellendus rerum veniam ad aliquid aspernatur, maxime, voluptates dolor animi, fugiat voluptatum harum tenetur tempora officia? Nulla quaerat eveniet obcaecati distinctio cumque vero culpa necessitatibus repellendus quod maxime quia sunt deserunt, voluptates ipsa aliquam voluptate nesciunt molestiae dicta est nemo quidem amet adipisci? Incidunt sit necessitatibus consectetur, culpa totam ipsum architecto laborum libero, corrupti aspernatur, fugit eaque! Culpa ipsa cum est rerum amet veritatis expedita neque possimus, quis doloribus quidem sunt ab ut facilis fuga tempore odit doloremque sed dignissimos sequi placeat unde minima ducimus! Amet optio corrupti rerum dolore doloremque cum? Officiis, perspiciatis! At obcaecati tenetur sint neque dolorum ipsam, dignissimos laudantium consequatur itaque dolores atque nesciunt cumque, officia nostrum asperiores optio ipsum. Quam perferendis repellendus impedit sed veniam maxime quod vero nesciunt, numquam, eligendi expedita rerum praesentium obcaecati sunt inventore eum similique ab adipisci sint laborum. Repellendus reprehenderit doloribus qui in mollitia ratione? Libero consequuntur laudantium cumque voluptatem omnis eveniet, minus, enim maiores quis rerum, aut nisi ad aliquid. Fuga nobis dolores quia provident cumque, numquam voluptatum facere voluptatem excepturi aliquid natus laborum dolorum ut officiis voluptates quaerat iste exercitationem doloremque reiciendis nihil, libero sint iusto! Ipsum quis ut voluptatem repellat qui nisi amet. Ipsum, laborum? Neque natus cum quas doloremque rem voluptas quidem fugiat quo asperiores sint aliquid id autem, consequatur, quam ea qui eius distinctio blanditiis numquam deleniti earum illum commodi? Quaerat sed impedit beatae quibusdam culpa eum pariatur deleniti voluptates asperiores cupiditate quia eveniet repudiandae dolore, quasi temporibus suscipit molestiae aut rerum tempora doloremque? Voluptates laboriosam accusamus iste voluptatum totam enim eos animi, repellendus, reprehenderit impedit assumenda sequi. Officiis, ea blanditiis eveniet accusamus magnam, eligendi praesentium sapiente sequi dolorem commodi dolores perferendis harum eos animi. Nostrum nulla ad labore itaque esse molestiae voluptatibus ab in inventore, obcaecati omnis facere eligendi deleniti dolor ipsam odio culpa hic distinctio voluptate ea illum exercitationem voluptates quisquam. Debitis odit omnis deleniti totam rerum fugit, dolor earum officiis ratione repellendus quis magni harum unde repudiandae veritatis quisquam officia excepturi voluptas voluptates perspiciatis aperiam maxime autem tempore? Sequi molestias repellat reiciendis culpa fugiat quasi officia nulla velit nostrum! Enim tempore ipsa amet sed earum impedit non ea! Beatae sint cupiditate rerum dolorem ad quia repellat quisquam sit eveniet quos consequatur blanditiis obcaecati mollitia veritatis, error adipisci, sed alias similique ipsa natus sequi? Fuga magni natus quisquam, tempora adipisci ex illo. Tenetur dolorem, eum, nemo delectus ipsa id officiis omnis rerum doloribus cum tempora culpa nam quaerat porro et nobis architecto consequuntur amet aperiam quis? Necessitatibus aspernatur corrupti labore maiores. Alias architecto porro distinctio nam dignissimos! Ab recusandae velit incidunt tempora maxime, itaque, distinctio nemo porro officiis molestiae possimus quaerat dolorem sint, illum quam dolores eos dolore necessitatibus harum et sapiente sequi quia. Voluptas dolor tempora velit molestiae omnis dolorum facilis magnam laborum rem. Cumque libero facilis atque aliquam expedita soluta a minima maxime, ea sunt ab beatae iste totam mollitia neque praesentium vitae fuga. Voluptatibus corrupti porro, autem, accusamus similique deserunt pariatur rem totam omnis cumque inventore, ullam officiis velit amet repudiandae iure minus est fugit! Quod sapiente animi vel saepe corrupti repudiandae, explicabo dolores sint maxime odit quis perferendis, repellendus ex aperiam dicta voluptas consectetur illum eum ut? Aspernatur aliquam eius maiores laboriosam! Nihil possimus dolorem iusto neque sit aut molestiae alias, quasi quisquam esse itaque nesciunt voluptates reprehenderit dolores in aliquid inventore eveniet eius dolorum voluptatem est! Veritatis velit dolore pariatur natus explicabo nam consequatur rerum architecto. Soluta, repellat porro! Totam cum incidunt doloremque id voluptas. Voluptate iure dolorum inventore voluptatem amet veritatis, veniam deleniti, mollitia et, corporis nobis voluptatum! Delectus at, fuga distinctio quam iure debitis aut incidunt harum, nobis nulla ab aliquam dicta voluptatum quidem optio molestiae temporibus. Saepe iure ut quisquam sed quibusdam, obcaecati excepturi necessitatibus labore facere, fugiat maiores quia aliquid molestias? Earum, corrupti minus error consequuntur dicta porro laborum libero nostrum consectetur excepturi harum maxime aut illo pariatur debitis tempore asperiores repudiandae mollitia voluptas enim unde non ex laboriosam aperiam. Veniam nostrum omnis doloribus accusantium excepturi ullam, quo placeat libero optio maiores? Reprehenderit vero praesentium excepturi expedita eligendi inventore, corrupti sint aperiam dignissimos! Sapiente obcaecati nesciunt numquam quis dolore aspernatur natus temporibus, officiis ipsum ea cumque sequi tempore a sunt voluptate tempora repellat in dolor minus? Molestiae animi minus nihil atque in autem dolorum recusandae corporis, ea error. Porro, odit nostrum. Minima ipsam dicta repellendus consequuntur magni voluptas amet odio porro. Pariatur beatae alias ipsam. Totam magnam praesentium possimus eos incidunt earum modi ut exercitationem non perspiciatis quisquam debitis dicta, error alias quibusdam, quod deleniti laudantium reprehenderit omnis! Atque suscipit maxime reprehenderit eveniet dolorum, quaerat amet quod? Voluptate id cum fugit itaque! Tempora unde voluptates labore pariatur obcaecati officiis maxime, in, quam molestias, ut nulla eligendi necessitatibus veniam? Rerum doloribus iusto reprehenderit nesciunt exercitationem natus neque ex! Adipisci possimus magnam reprehenderit consequatur distinctio rerum at, eum ducimus aperiam eius soluta mollitia suscipit rem. Ad, consequatur harum sunt hic tempora autem veniam dolores ullam tenetur, aperiam facere dolorum asperiores? Itaque necessitatibus dolorum iure praesentium exercitationem nihil eaque laborum ut laboriosam voluptas amet aperiam in id illum, ducimus corrupti consectetur atque accusantium aspernatur modi recusandae! Perferendis, debitis maxime est repudiandae porro in. Est laudantium, vel illum placeat ducimus ratione, doloribus atque sit id expedita explicabo sint. Molestiae maiores deserunt iusto modi vel eveniet repudiandae aliquid at! Quod incidunt, quae, voluptatibus suscipit, voluptates officiis iste explicabo adipisci harum id alias. Totam tenetur deserunt nostrum consequatur esse, id necessitatibus dicta unde fuga. Asperiores ipsum beatae at architecto? Deleniti sapiente voluptate labore non consequatur nobis repellendus. Amet recusandae eligendi, veritatis eum repellendus sed dignissimos debitis iusto ea totam nostrum unde! Commodi aliquid modi vero architecto repellendus id. Exercitationem, aut facilis. Et eius quos laboriosam iste rerum ab provident vitae dicta optio. Ad beatae dolore possimus fugit, a minima autem facere saepe expedita quos pariatur quam cupiditate nobis exercitationem, eaque est veniam impedit et repellat sunt placeat aperiam? Libero similique enim iusto eveniet id possimus, numquam quia delectus, architecto cumque suscipit omnis cupiditate fuga dignissimos adipisci error sapiente impedit autem, ipsa amet corrupti laudantium. Non qui enim assumenda maxime? Quidem unde repellendus explicabo vero sint eos voluptas quia, nisi aliquid dolor molestias vitae id quisquam consequuntur doloremque fugit libero ea repudiandae vel expedita nobis odit aperiam optio? Animi laboriosam hic itaque dolorum sapiente reiciendis, dolores perspiciatis, vel eum vero consequatur esse id voluptate ex? Iure tempore hic repudiandae dignissimos odit, sed officia officiis similique cum consectetur adipisci eaque temporibus minima obcaecati modi at voluptatum libero. Numquam officia perferendis, rerum alias iusto itaque in dolores eveniet consectetur ut. Numquam harum delectus nisi quam consequatur, consectetur ratione nostrum debitis nihil deserunt sed, illo ipsum ducimus odio sit error, at facere dolores vel. Totam, magnam iusto? Praesentium voluptatibus minima consequuntur. Maiores, libero deleniti? Porro rem aliquam nesciunt dolor cumque eligendi excepturi quo, voluptatem laudantium aspernatur labore illum quaerat. Nobis, ut esse. Sit recusandae corrupti consectetur, magnam vitae illo dolore modi? Nulla qui iusto aspernatur quia esse consequatur? Amet laboriosam quia, quibusdam animi alias nobis esse porro. Libero nisi iure natus eveniet molestiae tenetur ipsum obcaecati eos possimus ut ipsa, unde, omnis dolores. Molestias, totam? Labore cum ex, corporis impedit veniam iure dignissimos, laudantium aliquid, necessitatibus ipsum optio laboriosam tempora deserunt. Cumque eligendi, asperiores hic doloremque dolorum sunt rerum! Nulla ipsa blanditiis a vitae dolor quibusdam, architecto sit nemo aspernatur quis, molestias numquam cum. Veniam, libero aliquam totam quas harum quidem sunt vitae nostrum soluta quibusdam quis eveniet aspernatur et sint corporis? Rerum minus delectus at non, omnis a voluptatem officia perspiciatis repellat nostrum nulla praesentium eum fugiat ab dicta ea? Illum, nam consequatur. Totam laborum culpa inventore accusamus neque suscipit aperiam delectus reprehenderit? Dolor blanditiis libero, aspernatur amet quaerat ab corporis dolore soluta necessitatibus atque eveniet dignissimos recusandae eius. Incidunt obcaecati error eius hic deserunt vero, labore asperiores. Eveniet ullam dicta eos? Ipsam delectus dolores reiciendis perferendis corporis quis exercitationem quam dicta deserunt odit est ratione illo, porro recusandae officiis ea voluptates molestiae, repellat et. Eveniet, perferendis architecto! Voluptatum corporis ad qui esse dolores expedita optio architecto aspernatur iste reiciendis officiis laudantium nobis sit quae dolorem, sunt nisi quam quaerat vel, ipsa ipsum consectetur minima hic pariatur. Adipisci deserunt tempora, quasi fugit saepe quisquam debitis non delectus eius nisi modi pariatur ducimus amet ratione ullam iure quidem velit ut necessitatibus sapiente vel? Architecto suscipit nisi placeat neque, voluptatibus illum id eaque magnam nobis officia ea sunt animi labore ducimus iure excepturi doloribus explicabo facere veritatis nesciunt aut perferendis saepe nam? Quia exercitationem, dolorem eius quod, magnam aperiam earum nemo qui ut cupiditate eligendi! Laudantium id impedit recusandae sit ipsam ea non eius, voluptate atque ullam voluptatem tempore a earum doloremque, odit perferendis. Repellat veritatis vero perferendis, sapiente nesciunt aperiam harum delectus fugiat nihil. Praesentium cum expedita cupiditate quos iste sequi earum itaque veniam obcaecati, aliquid dolorem aliquam! Quibusdam nam ratione quam facilis nihil similique saepe repellat praesentium voluptas sapiente, cupiditate repellendus sed qui, officia quas eos molestias, sit neque magni! Enim laudantium ea et, ducimus eum laborum eius assumenda sequi rerum amet neque repellat iste doloremque perferendis nobis ab ullam quas placeat nulla quae, cum architecto minima sapiente deleniti. Rem, accusamus dolorum minima iste cupiditate laboriosam praesentium expedita eaque impedit sit necessitatibus, velit magni harum ipsa facilis, ipsam sed repellendus ut repellat soluta debitis unde ipsum. Quos impedit cum ea at magni a pariatur non enim consequuntur vitae eveniet iure modi qui nobis, facilis error eligendi, quaerat totam dolorem! Libero molestias laboriosam eos dolorum veniam eligendi dicta atque, magnam possimus assumenda accusamus alias saepe sapiente ipsam hic, sint ipsum unde accusantium quaerat maxime numquam obcaecati. Cupiditate eos quisquam asperiores quo quas harum nostrum voluptatem repudiandae alias deserunt rem voluptate magni perspiciatis, qui explicabo ex vero? Esse ipsum voluptates voluptatibus velit? Vitae error modi odit sapiente ipsum repudiandae, fugit laborum voluptatum sed at consequuntur optio, quos quaerat maiores deleniti temporibus possimus saepe exercitationem! Quas dicta iusto quia assumenda asperiores dolor excepturi doloremque culpa magnam. Officia ipsam nobis odit rem earum architecto non quo suscipit enim, numquam provident esse. Et incidunt impedit laborum, magnam consequuntur, tempore hic tenetur ipsum sunt repellat asperiores eos ipsa error accusamus aliquid minima. Saepe numquam nobis molestias iusto temporibus vero error, provident fugiat nam reiciendis eos veniam sunt vel tenetur tempora nesciunt, unde consectetur facere quibusdam laborum fugit. Praesentium vel sit adipisci, eligendi labore, maiores libero ducimus alias aut autem fugiat, enim consequatur harum eos provident illum. Pariatur dolorem repellat sit iusto quidem, eum accusamus vel aliquid nihil nam voluptates quibusdam temporibus fugiat adipisci eligendi. Accusantium praesentium corporis excepturi quasi autem, possimus laborum eaque cumque? Dolor sequi explicabo, alias laudantium illum odio sapiente cupiditate voluptate expedita ullam, tempore consectetur corporis commodi at inventore quisquam fugit repudiandae excepturi quasi saepe non repellendus. Quia modi consequatur accusantium, quisquam voluptates maxime numquam nostrum atque eveniet. Placeat debitis aut reprehenderit quo aliquid perspiciatis in rem iure eligendi? Assumenda sapiente et ad nihil minus asperiores, iste debitis aperiam delectus, blanditiis ducimus esse voluptatem, nisi sequi error non. Atque perferendis delectus reprehenderit laudantium saepe dolore adipisci quam consequuntur beatae reiciendis repudiandae minima vitae, animi, asperiores voluptatum aperiam velit amet rem ab officiis deserunt eos. Ipsum, illum alias suscipit perspiciatis dolorem possimus nulla soluta ipsam nisi. Harum cupiditate, modi, animi tempore qui reiciendis, placeat soluta dolorum in facere quisquam amet consequatur dolore. Tempore hic provident incidunt ratione. Natus, nisi. Velit ducimus non cumque iste explicabo a veritatis tenetur deleniti autem aliquam culpa hic praesentium voluptatum saepe ullam doloribus labore magni laudantium est, harum dolorum, nam molestiae debitis fuga? Iure cum doloremque neque nesciunt debitis! Qui sequi, blanditiis, illo quae tenetur dolore nesciunt labore nihil maxime atque ut magnam veniam dolorem aperiam ducimus maiores tempore nisi. Quis ipsa quam ad ex id, tempore nam assumenda aperiam eum. Facere quos iste, veniam, ut animi, beatae quam et provident asperiores alias quaerat sed cupiditate facilis ex optio voluptatem nemo necessitatibus. Cupiditate praesentium earum harum sit, doloremque iusto suscipit quia labore modi laborum unde quae, fuga tempora facere neque nisi dolorem tenetur dolorum saepe temporibus voluptatum nesciunt molestiae. Adipisci quibusdam eveniet excepturi dicta, illo cum impedit voluptatibus libero, eius, ipsum doloremque obcaecati perferendis corrupti possimus quae aperiam ducimus ad nesciunt laboriosam! Veritatis magni repellendus deleniti velit esse, voluptate vitae saepe. Nihil natus qui fugiat dolores ipsum pariatur deserunt quae animi perspiciatis modi dignissimos, inventore placeat quasi quod quis voluptatibus consequuntur, numquam sit facilis id quos repellat? Nihil animi, ipsam placeat fugit ad eum mollitia repellat vitae blanditiis sapiente minus exercitationem magni ducimus. Culpa recusandae, accusamus harum molestias, eos suscipit eligendi nulla hic quia consectetur exercitationem ullam nemo. In repellat iusto aliquid amet iste dolores pariatur odio laborum corrupti cumque, aut tempore delectus, ducimus eaque optio consectetur placeat officiis facere. Dolorem, aliquid odit? Vero dicta repellat fugiat quae deserunt inventore assumenda accusamus ullam. Autem quas expedita dolor animi perferendis eaque tenetur aspernatur? Necessitatibus neque provident corrupti vel ipsam, qui accusamus sint iusto tempore consequatur assumenda enim non, ipsa perferendis commodi voluptatibus sunt dignissimos dicta libero! Voluptas, dolore magnam quidem necessitatibus tempora voluptate culpa optio corporis esse laborum veniam cupiditate iusto amet illo voluptates dolores libero natus totam explicabo autem velit ab nulla, voluptatem sapiente! Inventore id nihil, neque pariatur molestias ut nisi voluptatem, omnis voluptas commodi delectus quibusdam aperiam error consectetur, veniam rem quidem blanditiis laborum quo molestiae quam incidunt labore aliquid corrupti! Dolorem iusto quidem fugit quasi illo iste fuga error id. Quas modi autem aliquid, deleniti quidem, quibusdam vero reiciendis debitis amet obcaecati vitae? Ratione repellendus quos obcaecati tempora sunt vero impedit. Libero, distinctio. Culpa officiis, nobis voluptas nihil doloribus laudantium, id, aliquam tempora sequi recusandae reiciendis est ea quam hic repudiandae perspiciatis eaque? Maxime corporis repudiandae excepturi deleniti delectus labore tempore, asperiores iure dolore vel ipsam magnam voluptatum quibusdam dolorem quas necessitatibus modi nemo praesentium. Est earum debitis omnis, nisi excepturi dolor ipsa molestiae reprehenderit consequatur, aliquid in dolores autem dolore! Laboriosam aliquid impedit nesciunt totam, officiis expedita sit autem error accusantium iure temporibus provident esse? Rerum iusto deleniti consequatur autem dolores? Blanditiis itaque, vitae, ad facere recusandae incidunt omnis impedit mollitia, est sed minima magnam odio dolorem ea. Beatae incidunt nisi corrupti veritatis error recusandae possimus enim quos mollitia ducimus nesciunt quod vero minima quisquam sequi ea, eius accusamus cumque ipsa magni? Consectetur, quod ea? Quam velit recusandae perferendis nostrum enim, repellat cumque, nulla aliquam iusto omnis id dignissimos tenetur sint autem architecto rerum atque veritatis placeat laudantium voluptates fugiat, ullam est ipsam? Maxime aliquam eos fuga officiis praesentium ab minus, explicabo dolorem aut quo eum error, minima tempora asperiores. Pariatur, necessitatibus minima eos eligendi eveniet cumque temporibus culpa nemo tempore? Doloribus minima enim quo quasi cum voluptate officia quisquam quibusdam, accusamus sit adipisci. In dolor consectetur natus inventore commodi accusantium quos voluptatem eos expedita, maxime veniam molestiae ut iure quod illum consequatur? Omnis fugit tempora deleniti suscipit veritatis aperiam rerum, expedita, officia obcaecati ad autem. Nihil ipsa veniam labore nostrum delectus iusto eos adipisci, consequuntur exercitationem quae tenetur vero explicabo consectetur impedit. Quos ducimus perferendis minus exercitationem voluptate sunt tenetur possimus officia esse distinctio laborum, vitae eos voluptas. Facilis quos expedita cum quasi tempore magnam, repellat consequatur ex necessitatibus non. Et consequatur repellendus quis architecto, provident animi est mollitia vero ut similique iusto voluptates omnis facere nulla. Incidunt ipsum perferendis error totam corrupti! Quod esse obcaecati voluptatum enim quibusdam, debitis quos veritatis veniam cumque odit omnis beatae nam natus a sint explicabo. Hic sint debitis dignissimos deserunt ab placeat assumenda alias sit ipsa pariatur sunt eligendi non odio quisquam molestiae, reiciendis incidunt enim quas obcaecati cupiditate ipsum eum cum ea? Sapiente quo minus aperiam delectus rerum vero provident vitae quasi saepe voluptatem laudantium fuga, optio eaque, veniam aut recusandae consequuntur dolorum fugit sunt possimus dolores quia quae? Eveniet cum necessitatibus repellendus asperiores iure aliquam consequuntur odit eos fugiat, vel ex accusantium praesentium maiores nesciunt totam ad molestiae quaerat? Provident corrupti ex repellat doloribus neque sint nisi asperiores totam soluta quam aliquam commodi, ullam minima adipisci mollitia officiis hic modi. Necessitatibus veritatis temporibus rem asperiores saepe. Possimus ex quasi quae corrupti autem, dolorem, placeat nulla aperiam nobis praesentium, voluptate quo assumenda rem? Quibusdam, quae ullam necessitatibus repudiandae cum accusamus aliquid. Rem odio repudiandae laudantium nisi ex temporibus cupiditate nam? Minima, saepe quae necessitatibus vero ipsum aspernatur aliquam, itaque, excepturi explicabo earum laboriosam? Aliquid vero accusamus explicabo illo consequatur repellat obcaecati culpa, sit voluptate! Eius vitae tenetur fugiat ea quae magni, minima maiores possimus sunt asperiores voluptatum voluptatem labore consequuntur unde quidem sed architecto fugit! Dicta officiis tenetur ipsam dolor ad nam quam at vitae voluptates tempore, voluptate eaque harum ipsum! Eaque veritatis quibusdam debitis. At deserunt, libero ducimus, beatae dolorum itaque obcaecati ea quam reiciendis, alias illum aspernatur quibusdam laboriosam ut cum architecto! Magnam aut illum ipsa qui labore eligendi ab. Et sint animi numquam necessitatibus cum sunt id ullam, hic totam expedita odio dignissimos mollitia quas consequuntur saepe praesentium, fuga voluptates maxime ipsam. Unde, quia dicta! Tempore sapiente sed dolorum nulla, incidunt quisquam esse adipisci eos sunt hic soluta quia, sint perspiciatis culpa officiis maxime quos? Numquam consequuntur ab quisquam fugiat, accusamus eius? Magni mollitia corrupti ex commodi qui dolores eveniet maxime odio placeat tempora iusto quo reprehenderit, veritatis animi quod laboriosam voluptatum, ut, nobis reiciendis atque minima quidem nisi cum! Rem, provident veniam, porro ut harum molestiae tenetur eligendi labore excepturi id, explicabo dignissimos quo? Eaque necessitatibus officiis, laudantium laboriosam labore voluptatem repellat quia, ea ipsa odit odio vel beatae. Atque architecto repudiandae veniam exercitationem molestiae nulla quo ab nihil, in ullam placeat nostrum aperiam eveniet? Impedit similique quibusdam ut quidem magnam dolore a necessitatibus, excepturi ipsam pariatur temporibus, itaque cupiditate non distinctio! Suscipit voluptatum magnam repellendus ipsa totam nesciunt praesentium quasi ipsum iste, repellat minima dolore nostrum? Odio veritatis magnam quos laboriosam asperiores eligendi non reprehenderit, vel blanditiis repudiandae at minima temporibus, eveniet nam ullam id placeat quia, esse iusto. Aperiam voluptatibus suscipit doloremque nihil omnis assumenda minima, necessitatibus eum unde aliquam, quam ea fugiat nisi? Inventore ab quia quam provident hic. Nulla deleniti asperiores dolorem quia sint tempore pariatur amet voluptatibus, blanditiis itaque, omnis labore, voluptates facere quos cupiditate temporibus adipisci sed quaerat sapiente tenetur consequuntur numquam rem totam modi. Eaque quisquam labore eius aut quaerat esse molestias, nostrum cupiditate veritatis fugit, similique autem, facere explicabo. Provident voluptatum, similique porro deserunt mollitia commodi dicta, minus blanditiis nam placeat corporis cum neque cupiditate sequi ratione accusantium nulla! Unde nobis ipsam commodi amet quaerat quis odio assumenda officiis ullam ea? Hic harum labore numquam saepe laboriosam eaque voluptatem necessitatibus ad mollitia, minima maiores atque sequi excepturi exercitationem iste voluptatum error fugit sunt dicta ullam quas et quam blanditiis aliquid! Iste cumque eveniet fugit, obcaecati molestiae minima officia odio corrupti, porro saepe, maiores repellendus temporibus voluptates. Possimus fugiat ratione ipsum dolorem tempore ea consequatur blanditiis nihil ipsam sunt quam, doloremque fuga tempora quidem corporis sit debitis hic eum, aperiam molestiae commodi praesentium porro ullam. Dicta odit suscipit, dolorum nobis in cupiditate inventore eveniet impedit fugiat similique iusto aut! Hic beatae sunt esse velit voluptates eos a autem sed voluptatem dignissimos aspernatur libero fugiat ea aliquid nostrum, porro iste tenetur impedit officia iusto! Et, necessitatibus aperiam! Tenetur illum amet voluptatum enim, quasi accusantium aliquid illo nihil natus, odio quod repudiandae maxime quae veniam iure, a aspernatur eaque adipisci officia ad? Nemo veniam voluptatem, sit dolorem consequatur maxime dolore in corporis ab soluta, aspernatur omnis accusantium unde, eos nostrum. Eos dolore consequatur est eveniet animi impedit nihil itaque voluptatum, harum doloremque laborum quae, dolor iure ut voluptatibus inventore aspernatur sapiente illo perspiciatis incidunt velit alias hic! Quo laudantium consequuntur quaerat error eligendi ipsa illo, adipisci ab vitae asperiores, sunt placeat expedita delectus cum veniam libero laborum! Nesciunt laborum reprehenderit, consequatur eaque corrupti dolores temporibus tempore ipsa autem atque. Perspiciatis velit eum quaerat sequi similique repellendus enim totam quisquam, corrupti optio aspernatur deleniti quasi, placeat fuga modi, est vero excepturi hic ipsum omnis. Optio distinctio facere dignissimos! Inventore laborum magni, asperiores ea ipsum, optio id voluptatum quasi necessitatibus suscipit ducimus? Nulla dolor dolore reprehenderit vero aut repudiandae quae voluptate corporis doloremque corrupti neque amet, autem reiciendis omnis iste minus fuga ad quod veniam! Sequi accusamus qui inventore commodi nemo dolorum quibusdam quod, molestias, vero laudantium cumque ab vitae assumenda neque ad aut amet nobis repellat ea? Beatae perspiciatis veritatis optio! Ipsum voluptates a accusamus culpa repudiandae dicta. Ipsam aut voluptas iure eligendi quaerat itaque possimus? Ullam, facilis rerum! Architecto ipsa, aut officiis necessitatibus repellat impedit ipsum qui maiores tenetur quaerat ab mollitia laudantium tempore dignissimos possimus hic suscipit incidunt provident consequatur! Laboriosam nostrum quis autem quasi hic. Veritatis neque suscipit laudantium magni quo officia, nulla et nobis culpa pariatur quisquam exercitationem, corrupti rem iusto, enim ad tenetur a dolore quibusdam provident consequuntur. Neque sunt exercitationem assumenda quia qui delectus doloremque quis quod, ab, labore doloribus natus aliquam cupiditate, fuga ipsam sed voluptatibus saepe illum? Facilis natus quae, earum iste, voluptatibus soluta et saepe, dolor sapiente distinctio nobis? Facilis ducimus placeat accusamus consequatur, facere ullam, et temporibus esse modi accusantium numquam fuga id enim alias consectetur veritatis nam eveniet vero ea molestias soluta consequuntur nulla quam. Eum corrupti expedita vero repellendus ad sunt deserunt adipisci tenetur dolor molestiae alias, similique ducimus temporibus. In adipisci officiis, cumque voluptas id illo iusto expedita ratione vero, dignissimos necessitatibus est labore quaerat omnis odio illum numquam enim soluta! Odio expedita id impedit doloribus repellat odit cum soluta voluptate doloremque ullam nobis commodi, assumenda velit deserunt pariatur amet non nihil molestiae minus atque molestias blanditiis in ipsam est? Aspernatur, impedit. Animi ratione nulla ut, debitis tempore velit voluptates odit. Eveniet illo est exercitationem numquam corrupti eius vel dolores, quod placeat deleniti impedit voluptatem dolorem doloribus? Voluptatum natus numquam dicta sint eius. Iste asperiores sapiente pariatur atque hic, commodi tenetur enim voluptatibus illo possimus, doloremque placeat quod nam temporibus omnis autem eligendi numquam culpa? Nostrum perferendis expedita harum, natus quo culpa ut facilis assumenda magnam sed aperiam esse dolorum eius alias illum minus consequuntur, delectus odit consequatur commodi, beatae ipsum accusamus vitae temporibus. Deleniti nihil ipsam, debitis, architecto pariatur doloribus iste molestias omnis exercitationem asperiores illum veniam amet minima labore praesentium aut fugit corporis modi et dolores adipisci. Eos aspernatur sunt possimus, dolor commodi est, architecto enim hic fuga ipsa expedita nobis pariatur voluptatem maiores doloribus nihil id! Aperiam eos quos, porro consequuntur dicta ipsam ipsa modi laborum nam excepturi magnam fugit doloribus doloremque non? Inventore blanditiis vitae quidem at esse veritatis provident? Itaque laborum molestiae fuga numquam eaque corrupti accusantium sapiente dolore totam? Porro beatae asperiores amet velit architecto debitis impedit quae repellat. Fugit consequatur cumque ratione, omnis ducimus corrupti repudiandae culpa illo iure, porro exercitationem sit amet fuga. Modi doloremque assumenda eius, inventore minima repellat debitis, architecto quasi fugit est accusamus, provident cupiditate quia dolores? Vero aspernatur nulla reprehenderit totam at, in, perferendis ex rem natus mollitia ipsam alias aut, beatae voluptates similique tempora. Expedita alias ipsam illum fugiat non dolorem iure debitis quibusdam? Obcaecati in repellendus at incidunt sit blanditiis voluptatibus, iure expedita, modi explicabo quasi nisi asperiores! Illum unde voluptatum dolore, repudiandae mollitia impedit et quas quia, ex magnam earum non accusantium quasi fugit quod perferendis deleniti cupiditate dolor blanditiis quae culpa modi. Ex, libero sed! Deserunt beatae, nisi sapiente vero temporibus illo tempore ab vitae quibusdam est qui tempora itaque nesciunt, sequi atque ipsum reiciendis molestias dolore voluptate officia saepe impedit. Laudantium corrupti velit quaerat quasi delectus repellendus quas optio animi natus. Pariatur minus ut iste perspiciatis facilis in aliquid inventore delectus! Voluptatem cum distinctio voluptas ad amet aspernatur sequi soluta et ratione dolorum facilis, excepturi saepe dolorem iure ducimus nam porro neque. Voluptate culpa, sit iste architecto quia reprehenderit sequi, nisi explicabo quis voluptatem exercitationem et consectetur omnis atque obcaecati aspernatur natus commodi soluta, totam asperiores veritatis expedita? Non architecto ad doloribus, temporibus sit, fuga autem magni molestiae, nemo labore eos. Obcaecati praesentium molestiae nobis blanditiis. Reiciendis assumenda incidunt, quia error unde ipsa hic pariatur nostrum minus perspiciatis adipisci laborum odit maiores, animi praesentium dignissimos atque voluptatum. Aut, earum quos, sit fugiat distinctio asperiores voluptatibus sed nihil veritatis quia eum suscipit fuga adipisci atque in eveniet doloremque, facilis consequatur magnam! Quo hic voluptas qui inventore quia quae vel laboriosam magni, consectetur cumque voluptatibus sapiente beatae obcaecati aliquid repudiandae ea impedit error ullam eos maiores officia debitis! Natus illo delectus neque hic vitae aperiam nobis vero, voluptas qui, totam animi officiis sit nulla nostrum inventore, deserunt eius accusantium pariatur cum porro eligendi? Nesciunt delectus maxime provident neque veniam, harum debitis ea, eius amet minus labore. Quia repellat totam commodi cumque voluptatibus explicabo repudiandae esse id, possimus mollitia, exercitationem eveniet! Nam voluptate sint quis doloribus, pariatur officia saepe ad error cum quibusdam libero commodi dignissimos recusandae optio consequuntur voluptates natus praesentium aperiam qui, reprehenderit ullam quidem? Repudiandae ab, consequatur, tempora ratione eius minus nulla inventore fuga nisi saepe facilis ducimus quidem autem, sequi neque. Facere a voluptate, necessitatibus ipsa deserunt esse voluptatibus modi soluta ut temporibus nobis et dignissimos nihil, molestiae sapiente nemo, eos ipsam minus optio dolore similique velit! Nisi praesentium dolore velit quibusdam rerum dolores fuga accusantium animi odio! Eveniet expedita sed consequuntur tempora at sapiente error repudiandae eligendi numquam harum quia consequatur ipsa maxime, porro dolorum similique voluptatibus. Omnis voluptate perspiciatis eaque consequatur facilis, nostrum ducimus repellat tempora tenetur maxime in ratione eius incidunt corporis dolores amet animi cum alias. Vero enim officiis quod vel reprehenderit totam! Cumque officia minus et maiores est placeat, quaerat temporibus sed illum recusandae quia itaque. Cumque officia aliquid debitis ea natus maiores voluptatum non culpa doloribus, totam praesentium eaque sapiente minima quam ab, accusantium reprehenderit veritatis dolorum. Et hic consequuntur vitae nostrum odio quisquam ipsa? Corporis quidem distinctio nisi obcaecati non itaque temporibus voluptatibus, perspiciatis neque quo voluptatum fugit, reprehenderit iusto eum ex a dicta eius sequi perferendis. Corrupti dolorem, voluptate odio beatae minima earum, totam itaque velit voluptatem quo aliquid id possimus modi. Non cumque voluptatibus corporis veniam ex ipsam dolor recusandae eos velit, exercitationem delectus quam obcaecati hic accusamus vero? Accusantium sint optio quidem dolore cumque expedita dicta, quod voluptates sequi animi. Maxime numquam quaerat, accusantium id debitis recusandae quas doloremque iure nihil dicta deleniti laboriosam perferendis inventore sint, necessitatibus obcaecati? Consequatur nesciunt alias quia hic unde! Sapiente nam accusamus eligendi facere reprehenderit sed. Corrupti, quas quia iste similique adipisci quasi? Deleniti reiciendis excepturi explicabo dolor voluptas sequi accusantium odit soluta magnam perspiciatis commodi beatae sit esse, exercitationem rerum vero laudantium hic. Tempora ullam quas quam cum atque fugit quos modi provident aliquid eos illum reiciendis deleniti natus adipisci, accusantium labore? Deserunt recusandae architecto quam at nostrum, deleniti nam voluptatibus. Quidem, consectetur? Earum, aliquam animi! Tempora quidem asperiores consectetur. Corrupti autem ea sed non ab blanditiis, qui quos ut voluptatem magni quaerat ipsum sunt est velit reprehenderit eum eligendi harum labore! Iusto, voluptatibus voluptate animi culpa sit hic quam esse dolor repudiandae assumenda ratione commodi, doloremque enim modi corrupti delectus. Aperiam assumenda consequuntur iure, corporis in itaque. Veniam ut ipsa aspernatur quibusdam suscipit ea, a id quisquam odit culpa error excepturi! Pariatur voluptatum fugiat reiciendis ipsam earum at vel quia aliquid cumque numquam, officiis culpa eius doloribus consectetur iusto quam quis provident, repudiandae quod nostrum, unde animi. Dicta sit maxime modi, vitae eaque amet! Debitis vel vero ea perferendis, pariatur nesciunt consequatur maiores impedit ducimus culpa facere sequi incidunt saepe aliquid eius cum unde tempora adipisci laboriosam ad nulla necessitatibus doloremque placeat dolores. Possimus ea velit iure impedit ipsum alias eos sint voluptas soluta quas! Amet quo, illum quia quam beatae fuga accusamus provident error ipsa asperiores recusandae! Cumque hic numquam quae odio voluptas enim nesciunt fugiat quos saepe neque. Illum et perferendis odit, quo assumenda odio quasi dolorem culpa fugiat tempore, aperiam voluptatem officia unde repellendus laudantium dolores cupiditate animi. Officiis quaerat nemo dignissimos, maxime repellendus beatae atque delectus iusto aut. Delectus hic voluptatum consequuntur, voluptas nulla quisquam asperiores? Nostrum culpa deleniti quidem? Corporis, recusandae mollitia facilis quidem dolores ad deserunt cum qui facere eum officia inventore. Deserunt ipsam excepturi nulla non quas ad autem maxime. Incidunt illum maxime dolores, dolor aut neque fugiat tenetur eum id rem dicta iste consectetur. Nihil quam accusantium consequatur voluptatibus quo numquam maiores perferendis, necessitatibus iusto aliquam ipsum consectetur sed id. Odit molestias aperiam, tempora eaque dicta illo deserunt quisquam! Nesciunt, in. At fugit inventore ullam iusto hic doloremque nostrum sapiente quod natus? Deserunt consequatur magnam voluptates! Quam, quidem vitae tempore quas saepe at exercitationem delectus id officia quia debitis error similique distinctio quasi incidunt, dolorem dolores quis. Debitis numquam quam assumenda, hic optio quae sit iure velit sequi facere aliquid adipisci earum autem repellat magnam odio quisquam sunt doloribus? Iste saepe reiciendis est dolores quia sapiente, quae laudantium neque reprehenderit, distinctio ipsam, veritatis atque. Delectus ratione explicabo in dolorem impedit, ut accusantium, ad vel maiores mollitia voluptate eaque dignissimos, ipsam nemo modi aperiam? Ratione, sed itaque! Veritatis, ducimus voluptatem. Voluptatibus dignissimos maxime ducimus eius odit? Consequuntur corrupti doloremque eum? Et illo cum cupiditate beatae ducimus corrupti eum dicta officiis nemo, quisquam, qui a fuga ab amet, tempore necessitatibus non veritatis doloremque libero dolore. Omnis ea vero earum at quod aspernatur repellendus quasi autem molestiae aliquid, sapiente amet ex rerum quaerat debitis molestias delectus et! Id veniam eligendi illum accusamus. Fugiat, ut quos cupiditate dolores velit ea dolor neque ipsum provident ad quisquam quasi enim voluptates natus obcaecati perferendis iure voluptatum rem culpa, unde expedita magni excepturi autem? Autem, et! Corrupti eaque dolorum inventore iste, fugit laudantium praesentium necessitatibus labore ducimus totam magnam ab odit libero. Unde molestias, quasi veniam suscipit corrupti aut aspernatur, ad numquam consequuntur, alias veritatis? Dolor accusantium, cumque voluptate esse veritatis libero perspiciatis vero optio itaque? Nisi quas blanditiis repellat suscipit distinctio dignissimos magnam?</div>
</div>
              
            
!

CSS

              
                * {
  margin: 0;
  padding: 0;
}

.container {
  padding: 75px;
  line-height: 23px;
}

.progress {
  background: linear-gradient(to right, #3863a0 var(--scroll), transparent 0);
  background-repeat: no-repeat;
  position: fixed;
  width: 100%;
  height: 8px;
  z-index: 2;
}
              
            
!

JS

              
                const progress = document.querySelector('.progress');
const body = document.body;
const page = document.documentElement;
let scroll;

document.addEventListener('scroll', function() {
  scroll = (body.scrollTop) / ((body.scrollHeight) - page.clientHeight) * 100;
  progress.style.setProperty('--scroll', scroll + '%');
});
              
            
!
999px

Console