css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

Pen Settings

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

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

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

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

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.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              article
  .article-title
    h1 Page Progress Bar Example
    .progress-wrapper
      .progress-label
      progress
    
  img(src="https://images.unsplash.com/photo-1470136849211-2b20d14c97d0?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ%3D%3D%0A&s=941d6dad97a5712151abbe1c5fba6047")
  
  p
    em All images provided at random from Codepen assets. All ipsum text provided by officeipsum.com.
  
  p Face time level the playing field highlights. Bake it in quick win bench mark, or paddle on both sides. Re-inventing the wheel. What do you feel you would bring to the table if you were hired for this position drink from the firehose, but quarterly sales are at an all-time low or can you ballpark the cost per unit for me we are running out of runway.
  
  p At the end of the day we need to have a Come to Jesus meeting with Phil about his attitude, nor drink from the firehose, and clear blue water, loop back, yet beef up, yet data-point. Cross sabers high touch client so vertical integration, nor make sure to include in your wheelhouse. Hammer out brand terrorists high touch client, quick win high touch client, for anti-pattern, programmatically. Beef up shoot me an email nor critical mass, for quick win. Please advise soonest clear blue water touch base horsehead offer. Usabiltiy waste of resources, nor to be inspired is to become creative, innovative and energized we want this philosophy to trickle down to all our stakeholders. In this space synergize productive mindfulness. Those options are already baked in with this model granularity, but new economy, and productize high touch client. Hammer out best practices cloud strategy. Accountable talk drink the Kool-aid, yet quick win.
  
  p Goalposts deliverables goalposts. Thought shower imagineer, for cloud strategy, and not a hill to die on best practices, so innovation is hot right now action item. Personal development going forward, yet due diligence. Going forward table the discussion on your plate, but time vampire, but what do you feel you would bring to the table if you were hired for this position. Into the weeds close the loop yet closer to the metal. Where the metal hits the meat thinking outside the box, nor driving the initiative forward. Personal development beef up, so after I ran into Helen at a restaurant, I realized she was just office pretty upsell yet low-hanging fruit, or overcome key issues to meet key milestones. Execute sacred cow, for i don't want to drain the whole swamp, i just want to shoot some alligators value-added, or touch base yet not the long pole in my tent. We need a paradigm shift this vendor is incompetent , nor red flag, nor run it up the flagpole draw a line in the sand drink from the firehose, and hard stop. Back to the drawing-board horsehead offer on-brand but completeley fresh. 
  
  img(src="https://images.unsplash.com/photo-1477468572316-36979010099d?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&s=d2bf553be3d1a8bb9f6fa3db296de207")

  p Meeting assassin enough to wash your face so after I ran into Helen at a restaurant, I realized she was just office pretty good optics put a record on and see who dances, yet we're ahead of the curve on that one, or personal development. Bench mark beef up helicopter view highlights take five, punch the tree, and come back in here with a clear head, so translating our vision of having a market leading platfrom nor what's the status on the deliverables for eow?.
  
  p I'll book a meeting so we can solution this before the sprint is over table the discussion . Baseline the procedure and samepage your department we need to have a Come to Jesus meeting with Phil about his attitude, and those options are already baked in with this model, for can we take this offline, fire up your browser, or those options are already baked in with this model. Action item no scraps hit the floor, for on-brand but completeley fresh market-facing, for t-shaped individual low-hanging fruit guerrilla marketing. Quarterly sales are at an all-time low good optics. Baseline the procedure and samepage your department.
  
  p We need to harvest synergy effects great plan! let me diarize this, and we can synchronise ourselves at a later timepoint. Put in in a deck for our standup today please advise soonest can you ballpark the cost per unit for me if you want to motivate these clowns, try less carrot and more stick, and i also believe it's important for every member to be involved and invested in our company and this is one way to do so and red flag, or cloud strategy. Hard stop out of the loop. Design thinking quarterly sales are at an all-time low productize, and guerrilla marketing back to the drawing-board. Value-added run it up the flag pole or powerpoint Bunny baseline and get all your ducks in a row. Digitalize. Marketing computer development html roi feedback team website close the loop yet put a record on and see who dances, for locked and loaded high-level.
  
  img(src="https://images.unsplash.com/photo-1504908710373-6a7cdfd269f3?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ%3D%3D%0A&s=98f0f70dc59f53b06929db9054d392bb")

  p Dog and pony show quarterly sales are at an all-time low i don't want to drain the whole swamp, i just want to shoot some alligators pushback. We need to future-proof this this proposal is a win-win situation which will cause a stellar paradigm shift, and produce a multi-fold increase in deliverables and vertical integration, nor where the metal hits the meat, usabiltiy not the long pole in my tent.
  
  p On-brand but completeley fresh imagineer, but hammer out. Push back you better eat a reality sandwich before you walk back in that boardroom, and where the metal hits the meat for let's unpack that later so you better eat a reality sandwich before you walk back in that boardroom. Make sure to include in your wheelhouse. Draw a line in the sand gain traction, yet new economy.
  
  p Pulling teeth are there any leftovers in the kitchen?. Work flows cross functional teams enable out of the box brainstorming pipeline, yet on-brand but completeley fresh win-win. Old boys club good optics. Strategic fit. Feature creep criticality run it up the flag pole nor upsell deploy one-sheet, or quick win. Knowledge process outsourcing.
            
          
!
            
              :root {
  --progress-bar-height: 4px;
  --progress-bar-color: gainsboro;
  --progress-bar-value-color: dodgerblue;
  --progress-bar-value: 20%;
}

article {
  position: relative;
  padding: 24px;
  width: 100%;
  max-width: 700px;
  margin: 60px auto;
}

.article-title {
  position: sticky;
  top: 0;
  padding-bottom: 24px;  
}

h1 { 
  margin-bottom: 0;
  padding: 18px 40px 18px 0;
  font-size: 1.8rem;
  background-color: white;
}

img {
  width: 100%;
  margin-bottom: 18px;
}

.progress-wrapper {
  position: relative;
}

.progress-label {
  position: absolute;
  right: 0; bottom: 0;
  font-size: 14px;
}

progress {
  appearance: none;
  position: absolute;
  width: 100%;
  height: var(--progress-bar-height);
  background-color: var(--progress-bar-color);
  border: none;
  
  &::-moz-progress-bar {
    background-color: var(--progress-bar-value-color);
  }
  
  &::-webkit-progress-bar {
    background-color: var(--progress-bar-color);
  }
  
  &::-webkit-progress-value {
    background-color: var(--progress-bar-value-color);
  }
  
  &::-ms-fill {
    background-color: var(--progress-bar-value-color);
  }
}
            
          
!
            
              $(document).ready(function() {
  const win = $(window);
  const doc = $(document);
  const progressBar = $('progress');
  const progressLabel = $('.progress-label');
  const setValue = () => win.scrollTop();
  const setMax = () => doc.height() - win.height();
  const setPercent = () => Math.round(win.scrollTop() / (doc.height() - win.height()) * 100);
  
  progressLabel.text(setPercent() + '%');
  progressBar.attr({ value: setValue(), max: setMax() });

  doc.on('scroll', () => {
    progressLabel.text(setPercent() + '%');
    progressBar.attr({ value: setValue() });
  });
  
  win.on('resize', () => {
    progressLabel.text(setPercent() + '%');
    progressBar.attr({ value: setValue(), max: setMax() });
  })
});

            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console