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

              
                <div id="reading-progress"><div id="reading-progress-fill"></div></div>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras risus urna, suscipit a lorem et, hendrerit faucibus leo. Sed varius feugiat euismod. Maecenas a erat ut justo feugiat laoreet non et metus. Donec dui odio, iaculis quis dolor sit amet, tempor accumsan nisi. Donec vel ex hendrerit, rutrum mi eu, imperdiet risus. Vivamus rutrum ligula a pretium pellentesque. Maecenas facilisis pharetra venenatis. Ut ut felis egestas, hendrerit justo id, placerat sapien.</p>

<p>Suspendisse quis nunc nec lectus vulputate tempor eleifend vel nunc. Donec sagittis enim risus, ut molestie dolor ultricies commodo. Pellentesque auctor tristique gravida. Nam ornare scelerisque sem nec molestie. Suspendisse sit amet tristique turpis. Etiam eget magna est. Morbi imperdiet augue vel pharetra aliquam. Sed sit amet mattis lacus, eu porttitor lacus.</p>

<p>Nunc ac turpis quis lectus eleifend rhoncus non eleifend lorem. Integer condimentum sagittis diam tempus malesuada. Vestibulum massa leo, finibus a sem et, porta tristique odio. Proin id fringilla risus, vel finibus libero. Phasellus dignissim elit consequat elit pulvinar finibus. Maecenas eget nunc aliquam, dictum lectus in, pharetra nulla. Mauris elementum lorem placerat massa rutrum efficitur. Sed non tortor vitae nunc malesuada posuere quis eu quam. Proin consequat pretium lacus, in condimentum diam interdum sed. Sed et velit sed urna aliquet venenatis eu vitae est. Aliquam efficitur, magna ut accumsan imperdiet, elit neque ultricies nunc, et iaculis ipsum massa vitae tellus.</p>

<p>Vestibulum mollis eu urna et volutpat. Integer quis sollicitudin magna. In tristique aliquet porta. Nulla facilisi. Donec sodales tempus diam, at rutrum enim gravida et. Donec tempus fringilla risus, efficitur auctor lorem tempus id. Vestibulum pellentesque magna dictum erat laoreet, ut sollicitudin nisl semper. Ut eu nibh in eros egestas pulvinar. Curabitur feugiat quam metus, in efficitur lacus aliquet vel. Aliquam elit libero, gravida ac condimentum non, dictum vitae magna.</p>

<p>Integer quis sem et nibh efficitur lobortis sit amet ac sapien. Aliquam vestibulum lectus placerat, mollis justo a, venenatis arcu. Aenean dolor massa, sodales id mauris eget, laoreet porta lorem. Donec bibendum lectus sed purus iaculis, eu finibus lacus vehicula. Donec id orci at risus vestibulum ornare ut in odio. Aenean sit amet nisl facilisis, mattis augue ut, faucibus massa. Morbi efficitur ornare tortor, sed finibus arcu porta eu. Nunc vehicula sagittis diam, sit amet convallis ante iaculis non. Sed semper condimentum nisi vel pharetra. In ut tortor augue. Nam tincidunt, elit hendrerit porta ullamcorper, libero odio auctor augue, id suscipit sem nibh at eros. Vestibulum viverra cursus blandit.</p>
              
            
!

CSS

              
                p {
  width: 100px;
  margin: auto;
}

/* Layout */
#reading-progress {
    position: fixed;
    width: 100%;
    height: 5px;
    z-index: 9999;
    top: 0;
    left: 0;
}

#reading-progress-fill {
    height: 5px;
    width: 0;
}

/* Theme */
#reading-progress-fill {
    -webkit-transition: width 100ms ease;
    -o-transition: width 100ms ease;
    transition: width 100ms ease;
    background-color: #ff0000;
}
              
            
!

JS

              
                // JavaScript native variant.
const readingProgress = document.querySelector('#reading-progress-fill');
const footerHeight = 250;
document.addEventListener('scroll', function(e) {
  let w = (document.body.scrollTop || document.documentElement.scrollTop) / (document.documentElement.scrollHeight - document.documentElement.clientHeight - footerHeight) * 100;
  readingProgress.style.setProperty('width', w + '%');
});


/*
// Query variant.
jQuery(window).scroll((function() {
  const footerHeight = 250;
  let w = (document.body.scrollTop || document.documentElement.scrollTop) / (document.documentElement.scrollHeight - document.documentElement.clientHeight - footerHeight) * 100;
  jQuery("#reading-progress-fill").css({width: w + "%"})
}));
*/
              
            
!
999px

Console