HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html>
tag. If you want to add classes there that can affect the whole document, this is the place to do it.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. If you need things in the <head>
of the document, put that code here.
The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.
CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.
It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.
To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit-
or -moz-
.
We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).
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.
You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.
You can also link to another Pen here (use the .css
URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
JavaScript preprocessors can help make authoring JavaScript easier and more convenient.
Babel includes JSX processing.
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.
You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.
If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.
You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
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.
Using packages here is powered by esm.sh, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ESM usage.
All packages are different, so refer to their docs for how they work.
If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.
If active, Pens will autosave every 30 seconds after being saved once.
If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.
If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.
Visit your global Editor Settings.
<div class="progress-bar-container">
<div class="progress-bar"></div>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dignissim pulvinar nibh, a aliquet massa faucibus sit amet. Ut vitae odio nec risus pulvinar hendrerit. Quisque faucibus ornare sapien tincidunt aliquet. Sed congue, dolor vitae vulputate euismod, arcu urna elementum libero, ac mattis sapien nunc non quam. Cras ac tortor orci. Sed eu magna rhoncus, scelerisque ex vel, convallis orci. Curabitur blandit venenatis sem, nec accumsan orci accumsan quis. Nulla nec eros eleifend, porttitor arcu sed, commodo felis. Praesent lorem elit, ullamcorper sit amet accumsan et, bibendum eleifend tellus. Praesent ultricies massa nisl, nec ullamcorper sapien molestie vitae. Cras tellus lacus, fringilla scelerisque interdum at, faucibus non eros. Sed ex eros, lacinia nec sollicitudin vel, blandit non massa. Etiam pretium interdum elementum.</p>
<p>
Fusce id sapien rhoncus, finibus lectus non, blandit diam. Curabitur ut venenatis urna, a consequat lectus. Pellentesque a massa vel ante euismod maximus. Nullam pretium mauris nisl, a egestas lorem dignissim at. Quisque in sollicitudin lectus, vitae porttitor lorem. Quisque laoreet rutrum fringilla. Fusce mattis velit at enim lacinia, ut sodales risus iaculis. Nulla facilisi. Pellentesque accumsan commodo tellus mollis ultricies. Duis rhoncus elementum risus a volutpat. Nunc tristique scelerisque mi. Curabitur tristique nulla et nisl ultricies blandit. Cras interdum, est at euismod ultrices, nunc massa molestie eros, nec ultricies ligula erat in tortor. Ut semper, turpis non semper placerat, purus sem posuere libero, pretium vulputate ante libero ut ante. Ut semper eros eu vestibulum ultricies. Aliquam venenatis, enim eu dapibus placerat, felis velit rhoncus elit, quis porta metus metus eu est.
</p>
<p>
Quisque dignissim varius porta. Ut fringilla justo nec dui pellentesque, eget venenatis dolor tristique. Duis risus turpis, venenatis vitae arcu in, suscipit cursus nunc. Vestibulum ultrices augue tortor, nec facilisis odio convallis quis. Duis rutrum enim eu faucibus euismod. Nulla aliquam dolor erat, a vehicula lorem accumsan sed. Cras sagittis dui sit amet dui sodales, ut sodales augue congue. Sed a velit quis nibh dapibus rhoncus. Fusce mollis ex scelerisque dui tristique, quis commodo sem varius. Fusce eu iaculis lorem. Nunc vitae leo quis urna dictum sollicitudin. Praesent tincidunt neque a nibh interdum, at tincidunt odio sodales.
</p>
<p>
Integer tristique nisl purus, eu vulputate velit molestie id. Proin lobortis eget urna vitae malesuada. Etiam nisi lorem, tincidunt vel porttitor eu, vestibulum et ante. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Phasellus ultricies sollicitudin porta. Vestibulum vehicula, est ac convallis venenatis, orci est efficitur est, venenatis condimentum odio ex ac ipsum. In risus magna, rutrum vel aliquet ut, convallis auctor orci. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; In ultrices commodo magna cursus cursus. Etiam eget scelerisque neque. Donec eget tincidunt lectus.
</p>
<p>
Vestibulum justo metus, interdum a metus non, efficitur scelerisque enim. Vestibulum egestas justo in bibendum hendrerit. Vestibulum nisi orci, porta in laoreet a, tempus ut leo. Pellentesque consectetur augue a ligula dapibus, ut accumsan lacus tempus. Ut orci justo, dictum non purus eget, rutrum volutpat massa. Maecenas sit amet orci aliquet, rhoncus justo vel, cursus enim. Suspendisse pellentesque purus convallis magna consectetur placerat. In hac habitasse platea dictumst. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec ornare eleifend ex sed interdum. Aenean nec arcu nisi.
</p>
<p>
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Pellentesque porttitor lobortis ullamcorper. Curabitur vel efficitur leo. Etiam vitae pulvinar nulla. Maecenas mattis condimentum molestie. In a diam id erat pharetra pretium sed sit amet justo. Integer sollicitudin pulvinar ex in molestie. Nam fringilla velit quis ante lacinia tincidunt. Etiam molestie eu odio sit amet iaculis. Suspendisse potenti. Nullam blandit sem ut ornare volutpat. Vestibulum sit amet tristique risus. Curabitur laoreet porta orci, ac tristique ipsum elementum vel. Nam vulputate, eros id efficitur mattis, est odio hendrerit risus, eu congue metus urna nec libero. Duis facilisis, urna quis interdum molestie, ante neque auctor lacus, ac tincidunt purus enim eu diam.
</p>
<p>
Maecenas id mattis justo. Nam vulputate sapien vel porta molestie. Nunc magna urna, placerat at bibendum et, auctor eu risus. Nullam non dui tempus metus maximus ornare quis sed quam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas eget euismod leo, vitae dignissim velit. Praesent at enim commodo, finibus metus sit amet, efficitur sapien. Mauris feugiat quam at commodo tempus. Sed lacinia arcu quis semper porttitor. Aenean id risus sit amet nibh suscipit interdum non nec nisl. Integer ultricies magna id metus imperdiet, ut dictum quam lobortis.
</p>
<p>
Praesent pretium pharetra lacinia. Proin in sem pharetra tellus condimentum sodales sit amet non augue. Mauris consectetur dignissim dui a ullamcorper. Duis imperdiet interdum eros et congue. Suspendisse congue nisi orci, sit amet pulvinar sem semper vitae. Nulla feugiat erat ornare, pulvinar odio eu, condimentum massa. Proin volutpat sapien consequat ex mollis, at gravida sapien congue.
</p>
<p>
Maecenas eleifend dui sed mauris aliquet imperdiet. Curabitur in ex ut ante euismod tempor in eu lectus. Pellentesque dignissim ullamcorper sem, ut vestibulum mauris placerat eu. Vivamus quam leo, dapibus ullamcorper enim ornare, porta faucibus metus. Praesent rhoncus condimentum dictum. Vivamus vestibulum dolor sed est dapibus, sed tincidunt ipsum fringilla. Proin nec odio quis nulla aliquam aliquet. Integer a venenatis nulla. Pellentesque sollicitudin, tellus quis consectetur sagittis, leo magna luctus odio, at feugiat purus erat semper lacus. Nulla facilisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ac dapibus tellus. Cras mi neque, semper id sem posuere, semper ullamcorper mi. Suspendisse libero odio, tincidunt sed tincidunt in, aliquam in tortor. Praesent tortor nunc, ultricies et eros aliquam, varius pulvinar erat. Phasellus at ligula et neque lacinia sodales.
</p>
<p>
Cras pellentesque est mauris, at malesuada ligula blandit eget. In porttitor eros vitae pellentesque pharetra. Praesent imperdiet porta risus nec viverra. Maecenas eu rutrum urna. Nunc luctus mauris a lorem porttitor, sed commodo augue ornare. Donec aliquam lacus id dignissim tincidunt. Phasellus eget lectus sit amet dolor tincidunt porttitor. Quisque tincidunt tellus vitae luctus egestas. Nam dolor sapien, egestas vel suscipit laoreet, pulvinar a ante. Maecenas varius imperdiet justo, quis consectetur mauris tincidunt tincidunt.
</p>
<p>
Duis egestas placerat lacus ut dapibus. Nullam auctor tortor et dignissim dapibus. Suspendisse pretium placerat egestas. Ut et vehicula ex, in convallis magna. Suspendisse quis tincidunt libero. Maecenas sit amet neque tempus, imperdiet ligula quis, interdum elit. Nullam lacinia arcu in laoreet efficitur. Vestibulum pharetra nunc sit amet sapien eleifend ultricies. Suspendisse sodales, quam luctus faucibus elementum, ex elit viverra urna, et pulvinar ligula libero id magna. Fusce at justo id ex auctor feugiat vitae at ante. Duis venenatis elit eu urna dictum, at pretium turpis imperdiet.
</p>
<p>
Praesent porta, purus blandit tempor vulputate, quam justo vehicula justo, consequat porta lorem felis eget sapien. Integer porttitor felis sed nibh finibus blandit. Nam dignissim hendrerit mi sed iaculis. Suspendisse rutrum vestibulum ex sit amet sagittis. Donec tincidunt lobortis condimentum. Phasellus egestas et libero et sollicitudin. Nullam vitae laoreet arcu. Fusce a lectus bibendum, interdum dolor in, blandit enim. Integer elementum sagittis elit, vel sagittis mauris tincidunt eu. Suspendisse at imperdiet diam, nec auctor eros. Fusce ante felis, imperdiet sit amet ipsum in, cursus interdum ipsum. Nunc eleifend ligula dolor, eu elementum elit tincidunt sollicitudin.
</p>
<p>
In laoreet semper tortor sed sollicitudin. Sed eu eleifend est. Suspendisse at dui nec dolor ultrices iaculis ut ut dolor. Nullam sodales viverra purus et ullamcorper. Integer viverra vestibulum sem sit amet varius. Pellentesque ut lobortis arcu, eu convallis justo. Mauris tristique tellus sed orci consectetur, nec placerat ex posuere. Donec hendrerit lacus quis eros venenatis, sed sollicitudin augue commodo. Integer fringilla dui non ipsum eleifend, ut gravida orci efficitur. Aliquam a orci id nibh iaculis facilisis eget at felis. Donec vestibulum leo sit amet velit consequat, a tempus dui eleifend. Nulla ultrices lorem vel imperdiet feugiat. Etiam quis ante mattis, ornare ante vel, posuere orci. Sed sed suscipit massa, nec bibendum sem. Ut condimentum molestie purus, eget venenatis arcu sagittis ac.
</p>
<p>
Proin molestie imperdiet turpis eget posuere. Praesent faucibus eget felis sit amet iaculis. Nunc viverra a erat vitae tincidunt. In ut neque nulla. Donec tempor metus ut mauris euismod, non scelerisque orci elementum. Fusce maximus mi lectus, fermentum lobortis magna euismod sit amet. Quisque nunc nibh, posuere non enim at, pellentesque tincidunt magna. Donec lacinia pellentesque tincidunt. Proin odio lectus, luctus sed diam vitae, interdum tempus justo. Maecenas in metus lacinia, vehicula metus in, scelerisque quam. Donec efficitur laoreet nibh at fermentum. Etiam eu feugiat nibh, in porttitor libero. Integer eu nisi ut magna mollis hendrerit eget in velit.
</p>
<p>
Nullam ut efficitur diam, ac luctus orci. Cras aliquet sit amet est eu scelerisque. Fusce massa erat, fermentum mollis diam sed, ornare hendrerit risus. Mauris in feugiat sapien, sed congue ligula. Pellentesque lobortis sapien ac dolor gravida scelerisque vel vitae eros. Vestibulum non placerat justo. Mauris sit amet leo odio. Fusce blandit ultricies laoreet. Suspendisse nec dapibus lacus, non sodales quam. Donec consectetur nunc in turpis condimentum tempus. Nulla interdum quam vel urna tristique ultrices. Integer a lectus mauris. Suspendisse in purus rhoncus, tempus lacus ultrices, aliquam orci. Integer in purus eleifend, interdum tellus nec, semper diam. Mauris ut nibh sodales neque vulputate fringilla eget sed sem.</p>
</div>
body {
margin: 0;
height: 100vh;
font-size: 1.5em;
}
.progress-bar-container {
position: fixed;
top: 0px;
width: 100%;
background: #6c2fa2;
z-index: 999;
}
.progress-bar {
height: 7px;
background: #e131ff;
animation-name: width;
/* animation timeline is tied to vertical scroll position */
animation-timeline: scroll(y);
}
@keyframes width {
from { width: 0 }
to { width: 100% }
}
.content {
margin: 40px;
}
Also see: Tab Triggers