Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

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

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Auto Save

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

              
                <body>
  <div class="container">
    <div>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac dui egestas felis posuere rhoncus. Suspendisse eu volutpat augue. Maecenas sed augue nunc. Proin volutpat sem cursus vestibulum pellentesque. Nulla dapibus erat at tempor accumsan. Quisque libero ipsum, elementum in consectetur id, congue id nunc. Cras feugiat neque dui, non faucibus eros posuere a. Suspendisse efficitur leo in tempus semper. Morbi a odio dignissim, vehicula mi a, tristique nisi.
<br /><br />
      Curabitur vehicula mi sem. Sed lacinia, lacus id feugiat egestas, lorem felis aliquam libero, ac facilisis eros lectus vitae nibh. Aliquam eros nisi, scelerisque vitae congue eu, luctus a neque. Duis ultricies, nisl a feugiat tincidunt, sem sem dapibus turpis, vel volutpat metus enim sit amet nunc. Nam commodo sit amet nisl sit amet commodo. Vivamus nulla justo, efficitur quis feugiat at, sagittis et erat. Sed vel posuere nisi, et faucibus sem. Nam aliquet nibh nulla, quis hendrerit lectus mattis eu. Nullam pulvinar lectus risus, non venenatis nulla posuere in. Maecenas posuere non quam a posuere.
<br /><br />
      Aliquam erat volutpat. Nunc turpis leo, placerat ut lacus at, elementum placerat odio. Aliquam sed ante lectus. Donec posuere posuere sodales. Etiam vel pulvinar lacus, ac facilisis diam. Morbi nec felis interdum, porttitor est et, accumsan tortor. Pellentesque iaculis ex nec malesuada tempor.
<br /><br />
      Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum ultrices massa mi, vitae mollis metus fermentum sit amet. Curabitur rhoncus eleifend pulvinar. Donec aliquet magna non volutpat laoreet. Nunc tristique sed ante id interdum. Fusce non facilisis dui, a vehicula libero. Quisque et nulla erat. Morbi non tincidunt elit, et ornare velit. Suspendisse varius elit dui, eget tristique metus suscipit sit amet. Duis magna urna, semper consequat faucibus in, placerat non tortor. Quisque sed metus est. Duis id nibh metus. Donec congue vel dui et vehicula. Nam nunc lectus, bibendum in elit eget, luctus porta sem. Mauris nec dui sit amet purus accumsan placerat. Nam sit amet eros sit amet nisi placerat sollicitudin a vel turpis.
<br /><br />
      Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec feugiat pellentesque odio, tristique facilisis nisl. Cras vitae risus dapibus, imperdiet purus id, tempus nisl. Etiam aliquam nulla tellus, in molestie erat pretium et. Sed et condimentum tortor. Aliquam euismod urna massa, blandit fringilla velit ultrices eget. Nulla facilisi. Aliquam consectetur nunc et mauris accumsan dapibus. Pellentesque pharetra libero venenatis ex eleifend ultricies. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur eget metus bibendum, vulputate augue quis, condimentum libero. Cras vulputate ligula luctus metus tempus ornare. Curabitur at magna sit amet velit porta tincidunt vitae vel eros. Proin vitae dignissim lorem. Pellentesque euismod tristique laoreet. Maecenas in orci vitae nibh viverra laoreet nec ac risus.
<br /><br />
      Donec nibh odio, eleifend nec luctus quis, malesuada sit amet massa. Fusce finibus tincidunt elementum. Ut posuere mauris id libero pellentesque fermentum. Maecenas interdum vitae lectus quis fringilla. Nam suscipit consequat placerat. Nullam imperdiet arcu elit, vel ornare nibh facilisis eleifend. Integer in ante vehicula, blandit enim a, tempus tellus.

      Donec non ex efficitur, commodo dui nec, lobortis nisi. Sed in orci neque. Praesent semper odio nunc, eu vestibulum nibh vehicula ut. Nam tempus venenatis urna quis iaculis. Suspendisse tincidunt sagittis bibendum. Donec convallis ex a bibendum placerat. Sed molestie felis sed metus euismod, non posuere sem maximus.
<br /><br />
      Aliquam lorem sapien, viverra et nibh vitae, convallis dictum enim. Donec rhoncus, nisl et elementum aliquet, mauris tortor elementum massa, porta cursus neque tellus sit amet ex. Curabitur a mi ornare, sodales arcu nec, ornare nisi. Nullam semper, elit non bibendum interdum, sapien turpis semper felis, eget pretium eros enim vitae augue. Nullam facilisis scelerisque turpis, semper porta elit ullamcorper a. Ut sollicitudin tortor laoreet, placerat metus ut, fringilla felis. Integer sed commodo tellus, quis malesuada sem. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent ac vulputate diam, nec dignissim elit. Duis ut mi ut odio tincidunt vulputate. Donec in augue sed ex tempor ullamcorper. Nam vel eros rutrum, pretium odio nec, vulputate mi. Sed ut felis ac odio gravida pellentesque eget et erat.

      Nulla fringilla commodo bibendum. Ut facilisis dolor quis erat rhoncus vehicula. Phasellus nisi nibh, gravida nec lectus vel, dignissim accumsan purus. Suspendisse et orci eu nibh rhoncus luctus. Quisque in vulputate lacus, sit amet varius enim. Maecenas pellentesque lectus sed justo venenatis iaculis. Maecenas mattis nibh sed volutpat mollis. Maecenas condimentum vel lacus vitae elementum. Ut in dui eu velit auctor efficitur sit amet id ipsum. In hac habitasse platea dictumst. Vivamus sit amet sem eget libero molestie tempor. Sed ultricies, purus non pellentesque suscipit, mauris nisl pretium eros, id pulvinar ex lectus ac nunc. Nullam lobortis erat et arcu consequat, nec tempor justo faucibus.
<br /><br />
      Praesent porttitor nibh risus, sed fermentum libero pretium sit amet. Integer at est varius, pretium ipsum sit amet, rutrum urna. Praesent semper varius est, non cursus odio dignissim a. Nullam ultrices nisl ac felis suscipit gravida. Sed lectus elit, pharetra in massa sed, convallis feugiat nunc. Nam aliquet, nisi non iaculis ultrices, ipsum nunc accumsan sapien, ac commodo nunc leo quis orci. Ut lacus lectus, eleifend vitae pellentesque nec, tristique vitae nunc. Vivamus eros dui, elementum a maximus a, posuere convallis augue. Vivamus at fermentum erat. Nullam a tempor urna. Nulla vel rutrum nibh, in congue odio. Sed iaculis commodo dolor ac aliquam. Nam tempus egestas arcu eget tincidunt. In elementum consectetur hendrerit. Proin dignissim eu lectus quis ultrices.

      Vestibulum quis magna et mauris ultrices tristique viverra et sapien. Aenean vel tortor ut eros semper posuere. Nulla imperdiet, nunc a consectetur sagittis, ipsum libero viverra tortor, vitae molestie magna velit sed lorem. Pellentesque et sem dapibus sapien suscipit interdum sit amet ac velit. Ut molestie lacus id ante efficitur molestie. Fusce facilisis euismod lobortis. Fusce elit dui, pellentesque sit amet facilisis sit amet, bibendum eget quam. Suspendisse venenatis, metus eget accumsan gravida, nisl tortor semper lorem, sed euismod lectus turpis sed sapien. Praesent purus risus, viverra nec ultricies ut, blandit vitae ex. Sed eleifend erat id nibh feugiat consectetur.

      Quisque finibus dictum tristique. Sed faucibus est ut ante accumsan tristique. Nam massa leo, consectetur id mi vel, mattis congue velit. Quisque sit amet laoreet risus. Nullam id sollicitudin nunc. Praesent ut lectus et metus imperdiet porta in vitae augue. Vestibulum bibendum nulla consectetur tempor consequat. Quisque urna leo, lobortis ac neque ut, tempor vehicula tellus. Praesent erat ipsum, mattis vel pellentesque sed, condimentum in tellus. Suspendisse potenti. Mauris ante orci, semper eget massa vitae, maximus tempor enim. Ut sed libero et tellus rhoncus accumsan.

      Nam aliquet nisl vel elit condimentum, sit amet vestibulum nisl venenatis. Duis in dapibus dui. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nullam at laoreet justo. Aliquam fermentum libero a ante placerat, ac varius nisi tempor. Pellentesque at turpis fringilla, vestibulum nibh quis, mattis diam. Suspendisse vel pellentesque tortor.

      Vivamus mollis ligula ligula. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum at massa nisl. Vivamus dapibus mollis dolor, vitae vehicula leo malesuada nec. Nunc in consequat augue, in molestie purus. Nullam bibendum orci dolor, quis congue erat mollis nec. Aliquam erat volutpat. Aenean mollis efficitur semper. Duis eget libero eros. Suspendisse bibendum ac ipsum in sodales. Pellentesque non lectus eu mauris venenatis varius quis vel nisi. Maecenas ut tortor nulla. Fusce scelerisque iaculis porttitor. Nullam eget ligula ullamcorper, facilisis dolor in, mollis lacus. In dignissim tempor sapien, sed egestas est efficitur vitae. Vivamus hendrerit ipsum eget massa faucibus, id sagittis elit aliquam.

      Donec mattis urna a est cursus bibendum. Praesent ac molestie metus, at sagittis velit. Proin posuere libero dolor, et iaculis urna efficitur nec. Fusce tincidunt, lorem sed tempor porttitor, eros ante luctus lacus, eu imperdiet nisl lorem at erat. Phasellus sit amet dapibus ligula. Vestibulum tempor, velit ac maximus iaculis, sem nunc maximus turpis, ut ornare leo odio eu tortor. Praesent volutpat varius magna sed cursus. Quisque nisi tellus, commodo vitae dictum nec, volutpat sed nisl. Aenean ut gravida urna. Phasellus mollis ut mauris ac suscipit. Fusce et ex at mi vulputate porta eget in arcu. Pellentesque eu ligula ex.

      Sed vitae turpis odio. Nunc nec sem sed felis mattis luctus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In luctus, odio sed congue imperdiet, urna sem dictum sem, id faucibus mi lorem at orci. Donec a libero consequat, pretium dolor ac, hendrerit neque. Donec convallis ultricies interdum. Mauris in ipsum vel mi consectetur rhoncus eget sed augue. In nisi nisl, vehicula nec ultricies sed, laoreet ac neque. Nulla suscipit lobortis nisi sit amet ullamcorper. Nunc ac pharetra libero, quis volutpat sem. Integer aliquet tincidunt lectus.

      Sed hendrerit tincidunt feugiat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur eu libero in lectus lobortis ornare et in velit. Quisque vel sollicitudin nisl. Curabitur a sagittis massa, ac rutrum est. Fusce sit amet magna fermentum, feugiat dui sed, viverra libero. Mauris sed libero tortor. Sed sit amet interdum velit, vitae varius erat. Donec sed erat vitae diam eleifend ornare fermentum sed eros.

      Nullam mollis diam volutpat, luctus metus tempus, egestas est. Phasellus eget vulputate arcu, et semper purus. Suspendisse viverra est quam, at vehicula quam malesuada nec. Interdum et malesuada fames ac ante ipsum primis in faucibus. In tincidunt imperdiet tincidunt. Pellentesque dictum, quam sed tempor porttitor, erat orci accumsan metus, ut congue turpis nisi in leo. Donec at blandit odio. Donec diam mi, fermentum vel facilisis eu, condimentum ut purus. Fusce eros mi, tristique at dui eu, euismod sagittis lectus. Mauris tempus tellus tellus, quis venenatis nisi hendrerit id.

      Vivamus eu malesuada nisi. Curabitur dignissim nulla ligula, sed gravida ipsum vehicula in. Donec dignissim eros ligula, vitae semper mi convallis vitae. Cras dignissim magna turpis, id egestas ligula vehicula non. Phasellus ipsum nulla, euismod a lacus non, rutrum efficitur dolor. Integer vestibulum justo nec semper fringilla. Sed sit amet tortor pretium, porttitor libero in, pellentesque lectus. Cras tincidunt est id vulputate egestas. Nunc purus dolor, mattis sed mollis a, molestie a est. Aenean ex tellus, efficitur ac dictum viverra, vehicula nec quam. Praesent sapien quam, tincidunt non mi a, varius egestas ipsum.

      Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec volutpat, magna sed iaculis blandit, tellus sapien gravida nunc, sit amet sodales neque tortor sodales ligula. Nunc lobortis sem in pretium dapibus. Sed nec vulputate arcu. Vestibulum quis laoreet eros. Proin neque ipsum, scelerisque ut pretium a, maximus non elit. Ut id faucibus libero, vitae finibus neque. Suspendisse et hendrerit elit. Etiam a sapien facilisis, congue lorem ac, rutrum eros. Mauris aliquam neque id est fermentum pretium.

      Quisque bibendum commodo porta. Ut ut sem ac lacus commodo ultricies. Cras pretium, eros at pellentesque aliquam, ligula dolor hendrerit eros, ac efficitur arcu nulla vel velit. Etiam commodo massa et dui imperdiet, vel semper neque suscipit. Nulla sit amet tristique elit. Ut ut turpis mauris. Pellentesque volutpat nisi porttitor, pharetra sapien a, bibendum quam. Vestibulum enim risus, rhoncus sit amet lacus id, vehicula consectetur ante. Pellentesque nunc dolor, lacinia a porta vitae, volutpat vitae turpis. Donec massa turpis, convallis id tempor non, viverra vitae ipsum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Curabitur euismod dolor sed vestibulum aliquet. Vivamus tempor malesuada arcu. Pellentesque tellus quam, porttitor in quam eget, tristique consectetur lectus.

      Mauris rutrum nulla a odio consectetur efficitur. Nulla at lacinia odio, vitae interdum augue. Nam urna nisi, ornare ac arcu blandit, interdum tincidunt sem. Proin ultricies eros vel porta ultricies. Praesent vitae facilisis risus. Phasellus malesuada magna id pulvinar consequat. Aenean in purus aliquam, fringilla sem eget, tincidunt arcu.

      Integer ac odio ipsum. Curabitur nec sodales orci, eget cursus dui. Phasellus bibendum quis neque quis vulputate. Vestibulum ex erat, tristique non magna non, imperdiet aliquam est. Suspendisse sed leo nec leo viverra bibendum. Quisque viverra iaculis auctor. Curabitur pulvinar elit in est pharetra, eget convallis tellus ultrices. Morbi vel lorem eu dui feugiat pharetra. Sed diam orci, suscipit a lectus nec, dictum sollicitudin sem. Aenean in mauris lacus. Quisque cursus risus eget pellentesque mollis.

      Vestibulum metus velit, dapibus sed eros quis, blandit auctor enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla accumsan placerat fringilla. Maecenas fermentum, eros eu pharetra ultricies, justo sapien efficitur ante, at eleifend erat velit vel mauris. Vestibulum viverra odio non purus mollis congue. Maecenas accumsan dapibus neque, quis suscipit purus aliquet sed. Nullam laoreet sit amet eros sed sodales. Curabitur efficitur arcu quis tortor placerat, ac porta urna ullamcorper. Sed molestie eros molestie ligula luctus egestas. Praesent imperdiet consequat bibendum. Aenean ut feugiat metus. Suspendisse diam neque, porta eu dignissim eget, lacinia quis odio. Etiam in mauris interdum, fermentum ligula nec, vehicula nunc. Integer facilisis molestie dui, nec semper risus maximus ac.

      Cras blandit, est vel pulvinar semper, nibh nibh malesuada orci, in auctor erat lacus id dui. Integer imperdiet tortor et neque dictum, eu gravida magna feugiat. Donec maximus nunc a dui posuere feugiat. Fusce id molestie mi. Nullam at justo eget dolor interdum porttitor. Maecenas porta auctor purus ac ultrices. Morbi sit amet odio scelerisque, rutrum ligula eu, sollicitudin lorem. Cras lacinia ultrices justo eu viverra. In hac habitasse platea dictumst. Suspendisse luctus tellus vel turpis sagittis lacinia. Pellentesque congue erat vel ultricies dapibus. Etiam eu placerat lorem, in efficitur felis.
    </div>
    <div class="scroll-indicator" id="scroll-indicator"></div>
  </div>
</body>
              
            
!

CSS

              
                @import url('https://fonts.googleapis.com/css2?family=Josefin+Sans&display=swap');

body{
  background: #121212fe
}

.container {
  position: relative;
  width: 100%;
  color: #ded;
  padding: 10px;
  font-family: 'Josefin Sans';
}

.scroll-indicator {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px; /* Height of the scroll indicator */
  background-color: #e715e7; /* Adjust the color to your liking */
  width: 0;
  transition: width 0.3s; /* Smooth width transition */
}

              
            
!

JS

              
                window.onscroll = function () {
  const scrollIndicator = document.getElementById("scroll-indicator");
  const scrollPosition = window.scrollY;
  const windowHeight = window.innerHeight;
  const pageHeight = document.body.clientHeight;

  const scrollPercentage = (scrollPosition / (pageHeight - windowHeight)) * 100;
  scrollIndicator.style.width = scrollPercentage + "%";
};

              
            
!
999px

Console