Pen Settings

HTML

About HTML Preprocessors

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.

Learn more · Versions

Adding Classes

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.

About the <head>

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.

!
Insecure Resource

The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.

CSS

About CSS Preprocessors

CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.

Learn more · Versions

CSS Base

About CSS Base

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.

Vendor Prefixing

About Vendor Prefixing

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).

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.

Powered by Algolia
About External Resources

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.

Learn more

+ add another resource

JavaScript

About JavaScript Preprocessors

JavaScript preprocessors can help make authoring JavaScript easier and more convenient.

Learn more · Versions

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.

Powered by Algolia
About External Resources

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.

Learn more

+ 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.

Powered by Algolia
About Packages

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.

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 

              
                <link href='https://fonts.googleapis.com/css?family=Open+Sans|Cabin+Sketch' rel='stylesheet' type='text/css'>
  <article>
  <div class="hero">
    <h1>Thus Spake Zarathustra</h1>
  </div>
  <div class="wrap">
    <h2>1</h2>
    <p>When I came to men for the first time, then did I commit the hermit's folly, the great folly: I appeared in the market-place.</p>
    <p>And when I spoke to all, I spoke to none. In the evening, however, rope-dancers were my companions, and corpses; and I myself almost a corpse.</p>
    <p>With the new morning, however, there came to me a new truth: Then did I learn to say "Of what account to me are market-place and crowd and crowd-noise and long crowd-ears!"</p>
    <p>You higher men, learn this from me: In the market-place no one believes in higher men. But if you will speak there, very well! The crowd, however, sputters "We are all equal."</p>
    <p>"You higher men," -- so sputters the crowd -- "there are no higher men, we are all equal; man is man, before God -- we are all equal!"</p>
    <p>Before God! -- Now, however, this God has died. Before the crowd, however, we will not be equal. You higher men, go away from the market-place!</p>
    <hr />
    <small class="explanation">(Psssst... Hover the &#60;hr&#62; element to see your progress)</small>
    <h2>2</h2> 
    <p>Before God! -- Now however this God has died! You higher men, this God was your greatest danger.</p>
    <p>Only since he lay in the grave have you again arisen. Only now comes the great noontide, only now does the higher man become -- master!</p>
    <p>Have you understood this word, O my brothers? You are frightened: Do your hearts turn giddy? Does the abyss here yawn for you? Does the hell-hound here yelp at you?</p>
    <p>Well! Take heart, you higher men! Only now does the mountain of the human future begin to work. God has died: Now we desire that the Superman live!</p>
    <hr />

    <h2>3</h2>
    <p>The most careful ask today "How is man to be maintained?" I, Zarathustra, ask, as the first and only one: "How is man to be surpassed?"</p>
    <p>The Superman I have at heart;-- that is the first and only thing to me -- and not man: Not the neighbour, not the poorest, not the sorriest, not the best.</p>
    <o>O my brothers, what I can love in man is that he is an over-coming and a down-going. And also in you there is much that makes me love and hope.</o>
    <o>In that you have despised, you higher men, that makes me hope. For the great despisers are the great reverers.</o>
    <o>In that you have despaired, there is much to honour. For you have not learned to submit yourselves, you have not learned petty policy.</o>
    <p>For today the petty people have become master: They all preach submission and humility and policy and diligence and consideration and the long et cetera of petty virtues.</p>
    <p>Whatever is of the effeminate type, whatever originates from the servile type, and especially the crowd-mishmash -- that is what wishes now to be master of all human destiny -- O disgust! Disgust! Disgust!</p>
    <p>They ask and ask and never tire of asking: "How is man to maintain himself best, longest, most pleasantly?" Thereby are they the masters of today.</p>
    <p>These masters of today, surpass them, O my brothers:  These petty people, they are the Superman's greatest danger!</p>
    <p>Surpass, you higher men, the petty virtues, the petty policy, the sand-grain considerateness, the ant-hill politeness, the pitiable comfortableness, the "happiness of the greatest number!"</p>
    <p>And rather despair than submit yourselves! And verily, I love you, because you do not know how to live today, you higher men! For thus do you live best!</p>
    <hr />
    <h2>4</h2>
    <p>Have you courage, O my brothers? Are you stout-hearted? Not the courage before witnesses, but hermit courage and eagle courage, which not even a God any longer beholds?</p>
    Cold souls, mules, the blind and the drunken, I do not call stout-hearted. He has heart who knows fear, but conquers it; who sees the abyss, but with pride.
    <p>He who sees the abyss, but with eagle's eyes, he who with eagle's talons grasps the abyss: He has courage.</p>

    <hr />

    <h2>5</h2>
    <p>"Man is evil" -- so all the wisest ones said to me for consolation. Ah, if only it were still true today! For evil is man's best strength.</p>
    <p>"Man must become better and more evil"- so do I teach. The most evil is necessary for the Superman's best.</p>
    <p>It may have been well for the preacher of the petty people to suffer and be burdened by men's sin. I, however, rejoice in great sin as my great consolation!</p>
    <p>Such things, however, are not said for long crowd-ears. Every word, also, is not suited for every mouth. These are fine far-away things: At them sheep's hooves shall not grasp!</p>

    <hr />

    <h2>6</h2>
    <p>You higher men, do you think that I am here to put right what you have put wrong?</p>
    Or that I wish henceforth to make snugger couches for you sufferers? Or show you restless, lost, and confused climbers new and easier footpaths?</p>
    <p>No! No! Three times No! Always more, always better ones of your type shall succumb, for you shall always have it worse and harder.</p>
    <p>Thus only does man grow upwards to the height where the lightning strikes and shatters him: High enough for the lightning!</p>
    <p>Out to the few, the long, the remote go my soul and my seeking: Of what account to me are your many little, short miseries!</p>
    <p>You do not yet suffer enough for me! For you suffer from yourselves, but you have not yet suffered from man. You would lie if you spoke otherwise! None of you suffers from what I have suffered.</p>
  </div>
</article>
!

CSS 

              
                /*---- general stuff ----*/
//column width
$columnWidth:  750px;

//font colors
$primaryTextColor:   #555;
$secondaryTextColor: #000;

//font family
$primaryFontFamily:   'Open Sans', sans-serif;  
$secondaryFontFamily: 'Cabin Sketch', serif;

/*---- hr stuff ----*/
//hr colors
$barColor:      #555;
$barColorHover: #ff9d62;
$barTextColor:  #555;

//hr size
$barHeight:      3px;
$barHeightHover: 5px;

//hr transition
$barTransition: .3s;

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

html, 
body {
  font-family: $primaryFontFamily;
  font-size: 17px;
  color: $primaryTextColor;
  border-top: 5px solid #000;
}

h1 {
  font-family: $secondaryFontFamily;
  font-size: 3.5em;
  color: $secondaryTextColor;
  margin-bottom: .25em;
  &::after {
    content: attr(data-timeToRead);
    font-size: .25em;
    font-weight: normal;
    font-family: 'Open Sans';
    font-style: italic;
    color: #919191;
    display: block;
  }
}

h2 {
  font-size: 1.25em;
  text-transform: uppercase;
  color: #555;
  text-align: center;
  font-family: 'Cabin Sketch';
  &::before, 
  &::after {
    content: '-';
  }
} 

.hero {
  height: 20em;
  width: 100%;
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/40447/760f90e82da444fedc33689ace0d1c9e.jpg);
  margin: 0;
  padding-top: 1px;
  background-size: cover;
  h1 {
    max-width: $columnWidth;
    padding: 20px;
    margin: 0 auto;
    margin-top: .25em;
  }
}

.wrap {
  max-width: $columnWidth;
  margin: 0 auto;
  padding: 0 1em;
  font-size: 1.25em;
  position: relative;
  overflow: hidden;
  background: white;
}

hr { 
  border: none;
  height: $barHeight;
  width: 100%;
  background: $barColor;
  margin: 0;
  border-top: 15px solid white;
  border-bottom: 15px solid white;
  transition: $barTransition;
  &::before, 
  &::after {
    opacity: 0;
    font-size: .65em;
    margin-top: 12px;
    color: $barTextColor;
    position: absolute;
    transition: $barTransition;
  }
  &::before {
    content: attr(data-percent);
    left: 20px;
    width: 100%;
    border-top: 30px solid transparent;
    margin-top: -18px;
    transform: translateY(5px);
  } 
  &::after {
    content: attr(data-readtime);
    right: 20px;
    transform: translateY(5px);
  }
  
  &:hover {
    &::before, 
    &::after {
      opacity: 1;
      transition: $barTransition;
    }
    &::before {
      transform: translateY(-5px);
    }
    &::after {
      transform: translateY(-5px);
    }
  }
  
  &.active {
    height: $barHeightHover;
    background: $barColorHover;
    margin-top: -2px;
  }
} 
 
.explanation {
  position: absolute;
  font-size: .6em;
  color: #919191;
}

@media screen and (max-width: 768px) {
  html, 
  body {
    font-size: 14px;
  }
  .hero {
    background-size: auto;
    background-position-y: 15%;
  }
}

@media screen and (max-width: 600px) {
  .hero {
    background-position-y: 10%;
  }
}
!

JS 

              
                /* 

Hover over the <hr /> tag to see the effect.

TO DO:
======

1. Add the option to make the <hr> element show progress automatically when the user scrolls past it.

2. Make the "time remaining" based on word count rather than % scrolled.

3. Clean up/organize the code. 

*/

var $el = $('.wrap'),
    wordCount = $el.text().trim().replace(/\s+/gi, ' ').split(' ').length,
    avgSpeed = 150,
    readTime = Math.round(wordCount/avgSpeed); 

// sets 
function hrHover(scrollPercent, currentReadTime){
  var scrollPercent = scrollPercent < 0 
    ? 0 
    : scrollPercent;
  $('hr.active')
    .css({
      'width': scrollPercent + '%'
    })
    .attr('data-percent', Math.round(scrollPercent) + '% complete')
    .attr('data-readtime', currentReadTime);
}

function hrVals() {
  var currY = $(this).scrollTop() - $('.hero').height(),
      postHeight = $(this).height(),
      scrollHeight = $el.height(),
      scrollPercent = (currY / (scrollHeight - postHeight)) * 100 < 100 
        ? (currY / (scrollHeight - postHeight)) * 100
        : 100,
      currentReadTime = Math.round(readTime - (readTime*(scrollPercent/100))) < 1
        ? 'Less than a minute remaining'
        : 'About ' + Math.round(readTime - (readTime*(scrollPercent/100))) + 'min remaining';
  
  hrHover(scrollPercent, currentReadTime);
}

$(window).on('scroll', hrVals);

$('hr')
  .on('mouseenter', function(){
    $(this).addClass('active');
    $('.explanation').hide();hrVals();
  }) 
  .on('mouseleave', function(){
    $(this)
      .removeClass('active')
      .css('width', '100%')
  })

$('h1').attr('data-timeToRead', 'By Friedrich Nietzsche • '+ Math.round(readTime) + ' min read');
!
999px

Console