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.

            
              
<section>
  
  <p>This is Progress Pie. It shows the user's progress through a page or article as they scroll. The progress is displayed in the form of a pie chart that will initially show the visible content relative to the whole article, and will reach a full 360 degress when at the end of the article. Its prupose is to quickly gauge the length of the article (much like the bar 
    length in a scrollbar), as well as the current location within the article.</p>
<p>Phasellus ante imperdiet cras donec justo. Aenean ut congue. Vehicula convallis vestibulum sed sit sollicitudin. Ab nec quis aliquam et lacus. Nullam risus suspendisse quis suspendisse pede sem faucibus integer. Purus amet eu. Est nam adipiscing etiam in fermentum. Sollicitudin sed quisque et aptent justo molestie maecenas senectus. Vitae morbi elit in tristique at. Eu iaculis aliquam tristique euismod congue. Non tincidunt faucibus. Morbi nonummy non ultricies congue etiam rutrum quis ut. Aliquam sit neque turpis proin sapien. Porta id nec. Nisl tristique tempus orci lacus etiam in massa eu.</p>
  
  <article id='article'>
  
  <h1>Article starts here</h1>
  <p>
    Hac molestiae blandit consequat et amet. Quis cras imperdiet. Ante vivamus et sit quaerat sagittis. Eget sagittis mi. Id ante faucibus. In purus vulputate orci iaculis ultricies vitae volutpat eros. Massa urna magna quis arcu mattis. Morbi dui morbi pellentesque consequat wisi risus vel aliquam. Mauris wisi feugiat egestas odio non. Mauris ut nec adipiscing ut eum et ut dui.
    </p>
  	
 <p>Et diam dictumst dignissim tortor massa. Odio quam sollicitudin ipsum mi suspendisse dolor eu ipsum. Ut nulla sed sed magna pede neque a lacus. Temporibus aliquam mauris ipsum sed lectus. Integer erat pede vel duis erat eros orci vestibulum. Interdum praesent amet luctus vitae id. Arcu arcu ipsum urna vel et et eget in. In tristique velit. Orci nunc id. Nascetur mauris suscipit velit pulvinar pede. Tellus augue duis magna ut con. Velit ut nec. Duis morbi commodo eu metus congue. Amet feugiat vivamus mus eu elit. Penatibus sed lacus. Rhoncus eget feugiat cillum ultricies dis ac dis amet. Sapien turpis vulputate ipsum curabitur cras. At elit urna ligula augue ultrices. Interdum bibendum dolor mi integer mi cursus ipsum erat mattis integer lectus. Aliquam tristique leo. Neque ut euismod et risus scelerisque. In quisque iaculis eius bibendum commodo. Massa suspendisse ac. Sit cras sed. Faucibus massa pulvinar nam sed sem.</p>
<p>Phasellus ante imperdiet cras donec justo. Aenean ut congue. Vehicula convallis vestibulum sed sit sollicitudin. Ab nec quis aliquam et lacus. Nullam risus suspendisse quis suspendisse pede sem faucibus integer. Purus amet eu. Est nam adipiscing etiam in fermentum. Sollicitudin sed quisque et aptent justo molestie maecenas senectus. Vitae morbi elit in tristique at. Eu iaculis aliquam tristique euismod congue. Non tincidunt faucibus. Morbi nonummy non ultricies congue etiam rutrum quis ut. Aliquam sit neque turpis proin sapien. Porta id nec. Nisl tristique tempus orci lacus etiam in massa eu.</p>
<p>Hac molestiae blandit consequat et amet. Quis cras imperdiet. Ante vivamus et sit quaerat sagittis. Eget sagittis mi. Id ante faucibus. In purus vulputate orci iaculis ultricies vitae volutpat eros. Massa urna magna quis arcu mattis. Morbi dui morbi pellentesque consequat wisi risus vel aliquam. Mauris wisi feugiat egestas odio non. Mauris ut nec adipiscing ut eum et ut dui.</p>
<p>Et diam dictumst dignissim tortor massa. Odio quam sollicitudin ipsum mi suspendisse dolor eu ipsum. Ut nulla sed sed magna pede neque a lacus. Temporibus aliquam mauris ipsum sed lectus. Integer erat pede vel duis erat eros orci vestibulum. Interdum praesent amet luctus vitae id. Arcu arcu ipsum urna vel et et eget in. In tristique velit. Orci nunc id. Nascetur mauris suscipit velit pulvinar pede. Tellus augue duis magna ut con. Velit ut nec. Duis morbi commodo eu metus congue. Amet feugiat vivamus mus eu elit. Penatibus sed lacus. Rhoncus eget feugiat cillum ultricies dis ac dis amet. Sapien turpis vulputate ipsum curabitur cras. At elit urna ligula augue ultrices. Interdum bibendum dolor mi integer mi cursus ipsum erat mattis integer lectus. Aliquam tristique leo. Neque ut euismod et risus scelerisque. In quisque iaculis eius bibendum commodo. Massa suspendisse ac. Sit cras sed. Faucibus massa pulvinar nam sed sem.</p>
<p>Phasellus ante imperdiet cras donec justo. Aenean ut congue. Vehicula convallis vestibulum sed sit sollicitudin. Ab nec quis aliquam et lacus. Nullam risus suspendisse quis suspendisse pede sem faucibus integer. Purus amet eu. Est nam adipiscing etiam in fermentum. Sollicitudin sed quisque et aptent justo molestie maecenas senectus. Vitae morbi elit in tristique at. Eu iaculis aliquam tristique euismod congue. Non tincidunt faucibus. Morbi nonummy non ultricies congue etiam rutrum quis ut. Aliquam sit neque turpis proin sapien. Porta id nec. Nisl tristique tempus orci lacus etiam in massa eu.</p>
<p>Hac molestiae blandit consequat et amet. Quis cras imperdiet. Ante vivamus et sit quaerat sagittis. Eget sagittis mi. Id ante faucibus. In purus vulputate orci iaculis ultricies vitae volutpat eros. Massa urna magna quis arcu mattis. Morbi dui morbi pellentesque consequat wisi risus vel aliquam. Mauris wisi feugiat egestas odio non. Mauris ut nec adipiscing ut eum et ut dui.</p>
<p>Et diam dictumst dignissim tortor massa. Odio quam sollicitudin ipsum mi suspendisse dolor eu ipsum. Ut nulla sed sed magna pede neque a lacus. Temporibus aliquam mauris ipsum sed lectus. Integer erat pede vel duis erat eros orci vestibulum. Interdum praesent amet luctus vitae id. Arcu arcu ipsum urna vel et et eget in. In tristique velit. Orci nunc id. Nascetur mauris suscipit velit pulvinar pede. Tellus augue duis magna ut con. Velit ut nec. Duis morbi commodo eu metus congue. Amet feugiat vivamus mus eu elit. Penatibus sed lacus. Rhoncus eget feugiat cillum ultricies dis ac dis amet. Sapien turpis vulputate ipsum curabitur cras. At elit urna ligula augue ultrices. Interdum bibendum dolor mi integer mi cursus ipsum erat mattis integer lectus. Aliquam tristique leo. Neque ut euismod et risus scelerisque. In quisque iaculis eius bibendum commodo. Massa suspendisse ac. Sit cras sed. Faucibus massa pulvinar nam sed sem.</p>
<p>Phasellus ante imperdiet cras donec justo. Aenean ut congue. Vehicula convallis vestibulum sed sit sollicitudin. Ab nec quis aliquam et lacus. Nullam risus suspendisse quis suspendisse pede sem faucibus integer. Purus amet eu. Est nam adipiscing etiam in fermentum. Sollicitudin sed quisque et aptent justo molestie maecenas senectus. Vitae morbi elit in tristique at. Eu iaculis aliquam tristique euismod congue. Non tincidunt faucibus. Morbi nonummy non ultricies congue etiam rutrum quis ut. Aliquam sit neque turpis proin sapien. Porta id nec. Nisl tristique tempus orci lacus etiam in massa eu.</p>
<p>Hac molestiae blandit consequat et amet. Quis cras imperdiet. Ante vivamus et sit quaerat sagittis. Eget sagittis mi. Id ante faucibus. In purus vulputate orci iaculis ultricies vitae volutpat eros. Massa urna magna quis arcu mattis. Morbi dui morbi pellentesque consequat wisi risus vel aliquam. Mauris wisi feugiat egestas odio non. Mauris ut nec adipiscing ut eum et ut dui.</p>
<p>Et diam dictumst dignissim tortor massa. Odio quam sollicitudin ipsum mi suspendisse dolor eu ipsum. Ut nulla sed sed magna pede neque a lacus. Temporibus aliquam mauris ipsum sed lectus. Integer erat pede vel duis erat eros orci vestibulum. Interdum praesent amet luctus vitae id. Arcu arcu ipsum urna vel et et eget in. In tristique velit. Orci nunc id. Nascetur mauris suscipit velit pulvinar pede. Tellus augue duis magna ut con. Velit ut nec. Duis morbi commodo eu metus congue. Amet feugiat vivamus mus eu elit. Penatibus sed lacus. Rhoncus eget feugiat cillum ultricies dis ac dis amet. Sapien turpis vulputate ipsum curabitur cras. At elit urna ligula augue ultrices. Interdum bibendum dolor mi integer mi cursus ipsum erat mattis integer lectus. Aliquam tristique leo. Neque ut euismod et risus scelerisque. In quisque iaculis eius bibendum commodo. Massa suspendisse ac. Sit cras sed. Faucibus massa pulvinar nam sed sem.</p>
<p>Phasellus ante imperdiet cras donec justo. Aenean ut congue. Vehicula convallis vestibulum sed sit sollicitudin. Ab nec quis aliquam et lacus. Nullam risus suspendisse quis suspendisse pede sem faucibus integer. Purus amet eu. Est nam adipiscing etiam in fermentum. Sollicitudin sed quisque et aptent justo molestie maecenas senectus. Vitae morbi elit in tristique at. Eu iaculis aliquam tristique euismod congue. Non tincidunt faucibus. Morbi nonummy non ultricies congue etiam rutrum quis ut. Aliquam sit neque turpis proin sapien. Porta id nec. Nisl tristique tempus orci lacus etiam in massa eu.</p>
<p>Hac molestiae blandit consequat et amet. Quis cras imperdiet. Ante vivamus et sit quaerat sagittis. Eget sagittis mi. Id ante faucibus. In purus vulputate orci iaculis ultricies vitae volutpat eros. Massa urna magna quis arcu mattis. Morbi dui morbi pellentesque consequat wisi risus vel aliquam. Mauris wisi feugiat egestas odio non. Mauris ut nec adipiscing ut eum et ut dui.</p>
<p>Et diam dictumst dignissim tortor massa. Odio quam sollicitudin ipsum mi suspendisse dolor eu ipsum. Ut nulla sed sed magna pede neque a lacus. Temporibus aliquam mauris ipsum sed lectus. Integer erat pede vel duis erat eros orci vestibulum. Interdum praesent amet luctus vitae id. Arcu arcu ipsum urna vel et et eget in. In tristique velit. Orci nunc id. Nascetur mauris suscipit velit pulvinar pede. Tellus augue duis magna ut con. Velit ut nec. Duis morbi commodo eu metus congue. Amet feugiat vivamus mus eu elit. Penatibus sed lacus. Rhoncus eget feugiat cillum ultricies dis ac dis amet. Sapien turpis vulputate ipsum curabitur cras. At elit urna ligula augue ultrices. Interdum bibendum dolor mi integer mi cursus ipsum erat mattis integer lectus. Aliquam tristique leo. Neque ut euismod et risus scelerisque. In quisque iaculis eius bibendum commodo. Massa suspendisse ac. Sit cras sed. Faucibus massa pulvinar nam sed sem.</p>
<p>Phasellus ante imperdiet cras donec justo. Aenean ut congue. Vehicula convallis vestibulum sed sit sollicitudin. Ab nec quis aliquam et lacus. Nullam risus suspendisse quis suspendisse pede sem faucibus integer. Purus amet eu. Est nam adipiscing etiam in fermentum. Sollicitudin sed quisque et aptent justo molestie maecenas senectus. Vitae morbi elit in tristique at. Eu iaculis aliquam tristique euismod congue. Non tincidunt faucibus. Morbi nonummy non ultricies congue etiam rutrum quis ut. Aliquam sit neque turpis proin sapien. Porta id nec. Nisl tristique tempus orci lacus etiam in massa eu.</p>
<p>Hac molestiae blandit consequat et amet. Quis cras imperdiet. Ante vivamus et sit quaerat sagittis. Eget sagittis mi. Id ante faucibus. In purus vulputate orci iaculis ultricies vitae volutpat eros. Massa urna magna quis arcu mattis. Morbi dui morbi pellentesque consequat wisi risus vel aliquam. Mauris wisi feugiat egestas odio non. Mauris ut nec adipiscing ut eum et ut dui.</p>
<p>Et diam dictumst dignissim tortor massa. Odio quam sollicitudin ipsum mi suspendisse dolor eu ipsum. Ut nulla sed sed magna pede neque a lacus. Temporibus aliquam mauris ipsum sed lectus. Integer erat pede vel duis erat eros orci vestibulum. Interdum praesent amet luctus vitae id. Arcu arcu ipsum urna vel et et eget in. In tristique velit. Orci nunc id. Nascetur mauris suscipit velit pulvinar pede. Tellus augue duis magna ut con. Velit ut nec. Duis morbi commodo eu metus congue. Amet feugiat vivamus mus eu elit. Penatibus sed lacus. Rhoncus eget feugiat cillum ultricies dis ac dis amet. Sapien turpis vulputate ipsum curabitur cras. At elit urna ligula augue ultrices. Interdum bibendum dolor mi integer mi cursus ipsum erat mattis integer lectus. Aliquam tristique leo. Neque ut euismod et risus scelerisque. In quisque iaculis eius bibendum commodo. Massa suspendisse ac. Sit cras sed. Faucibus massa pulvinar nam sed sem.</p>
<p>Phasellus ante imperdiet cras donec justo. Aenean ut congue. Vehicula convallis vestibulum sed sit sollicitudin. Ab nec quis aliquam et lacus. Nullam risus suspendisse quis suspendisse pede sem faucibus integer. Purus amet eu. Est nam adipiscing etiam in fermentum. Sollicitudin sed quisque et aptent justo molestie maecenas senectus. Vitae morbi elit in tristique at. Eu iaculis aliquam tristique euismod congue. Non tincidunt faucibus. Morbi nonummy non ultricies congue etiam rutrum quis ut. Aliquam sit neque turpis proin sapien. Porta id nec. Nisl tristique tempus orci lacus etiam in massa eu.</p>
    
</article>
  
  
  
  
    
<h2>Comments</h2>  
  
<p>Hac molestiae blandit consequat et amet. Quis cras imperdiet. Ante vivamus et sit quaerat sagittis. Eget sagittis mi. Id ante faucibus. In purus vulputate orci iaculis ultricies vitae volutpat eros. Massa urna magna quis arcu mattis. Morbi dui morbi pellentesque consequat wisi risus vel aliquam. Mauris wisi feugiat egestas odio non. Mauris ut nec adipiscing ut eum et ut dui.</p>
<p>Et diam dictumst dignissim tortor massa. Odio quam sollicitudin ipsum mi suspendisse dolor eu ipsum. Ut nulla sed sed magna pede neque a lacus. Temporibus aliquam mauris ipsum sed lectus. Integer erat pede vel duis erat eros orci vestibulum. Interdum praesent amet luctus vitae id. Arcu arcu ipsum urna vel et et eget in. In tristique velit. Orci nunc id. Nascetur mauris suscipit velit pulvinar pede. Tellus augue duis magna ut con. Velit ut nec. Duis morbi commodo eu metus congue. Amet feugiat vivamus mus eu elit. Penatibus sed lacus. Rhoncus eget feugiat cillum ultricies dis ac dis amet. Sapien turpis vulputate ipsum curabitur cras. At elit urna ligula augue ultrices. Interdum bibendum dolor mi integer mi cursus ipsum erat mattis integer lectus. Aliquam tristique leo. Neque ut euismod et risus scelerisque. In quisque iaculis eius bibendum commodo. Massa suspendisse ac. Sit cras sed. Faucibus massa pulvinar nam sed sem.</p>
<p>Phasellus ante imperdiet cras donec justo. Aenean ut congue. Vehicula convallis vestibulum sed sit sollicitudin. Ab nec quis aliquam et lacus. Nullam risus suspendisse quis suspendisse pede sem faucibus integer. Purus amet eu. Est nam adipiscing etiam in fermentum. Sollicitudin sed quisque et aptent justo molestie maecenas senectus. Vitae morbi elit in tristique at. Eu iaculis aliquam tristique euismod congue. Non tincidunt faucibus. Morbi nonummy non ultricies congue etiam rutrum quis ut. Aliquam sit neque turpis proin sapien. Porta id nec. Nisl tristique tempus orci lacus etiam in massa eu.</p>
<p>Hac molestiae blandit consequat et amet. Quis cras imperdiet. Ante vivamus et sit quaerat sagittis. Eget sagittis mi. Id ante faucibus. In purus vulputate orci iaculis ultricies vitae volutpat eros. Massa urna magna quis arcu mattis. Morbi dui morbi pellentesque consequat wisi risus vel aliquam. Mauris wisi feugiat egestas odio non. Mauris ut nec adipiscing ut eum et ut dui.</p>
<p>Et diam dictumst dignissim tortor massa. Odio quam sollicitudin ipsum mi suspendisse dolor eu ipsum. Ut nulla sed sed magna pede neque a lacus. Temporibus aliquam mauris ipsum sed lectus. Integer erat pede vel duis erat eros orci vestibulum. Interdum praesent amet luctus vitae id. Arcu arcu ipsum urna vel et et eget in. In tristique velit. Orci nunc id. Nascetur mauris suscipit velit pulvinar pede. Tellus augue duis magna ut con. Velit ut nec. Duis morbi commodo eu metus congue. Amet feugiat vivamus mus eu elit. Penatibus sed lacus. Rhoncus eget feugiat cillum ultricies dis ac dis amet. Sapien turpis vulputate ipsum curabitur cras. At elit urna ligula augue ultrices. Interdum bibendum dolor mi integer mi cursus ipsum erat mattis integer lectus. Aliquam tristique leo. Neque ut euismod et risus scelerisque. In quisque iaculis eius bibendum commodo. Massa suspendisse ac. Sit cras sed. Faucibus massa pulvinar nam sed sem.</p>
<p>Phasellus ante imperdiet cras donec justo. Aenean ut congue. Vehicula convallis vestibulum sed sit sollicitudin. Ab nec quis aliquam et lacus. Nullam risus suspendisse quis suspendisse pede sem faucibus integer. Purus amet eu. Est nam adipiscing etiam in fermentum. Sollicitudin sed quisque et aptent justo molestie maecenas senectus. Vitae morbi elit in tristique at. Eu iaculis aliquam tristique euismod congue. Non tincidunt faucibus. Morbi nonummy non ultricies congue etiam rutrum quis ut. Aliquam sit neque turpis proin sapien. Porta id nec. Nisl tristique tempus orci lacus etiam in massa eu.</p>
<p>Hac molestiae blandit consequat et amet. Quis cras imperdiet. Ante vivamus et sit quaerat sagittis. Eget sagittis mi. Id ante faucibus. In purus vulputate orci iaculis ultricies vitae volutpat eros. Massa urna magna quis arcu mattis. Morbi dui morbi pellentesque consequat wisi risus vel aliquam. Mauris wisi feugiat egestas odio non. Mauris ut nec adipiscing ut eum et ut dui.</p>
	  
</section>
            
          
!
            
              body {
padding: 50px;	
height: 100%;
}

section {
width: 800px;
max-width: 90%;
margin: 0 auto;	
}

article {
background: #f6f6f6;
padding: 30px;
margin: 70px 0;
}

h1 {
  font-size: 36px;
  text-align: center;
  margin-bottom: 30px;
}

h2 {
  font-size: 24px;
  text-align: center;
  margin-bottom: 50px;
}

p {
font-size: 22px;
line-height: 1.4;
margin-bottom: 30px;	
}

#pie {
position: fixed;
bottom: 50px;
right: 50px;
width: 70px;
height: 70px;
border-radius: 50%;
background: red;	
overflow: hidden;
opacity: 0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#pie.active {
  opacity: 1;
}

#spinner {
position: absolute;
top: 0;
left: 50%;
width: 50%;
height: 100%;
background: darkred;	
transform-origin: left;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
transform: rotate(0deg);
}

#blocker {
position: absolute;
top: 0;
left: 0%;
width: 50%;
height: 100%;
background: darkred;	
}
#blocker.overhalf {
left: 50%;
background: red;	
}



            
          
!
            
              // Create pie
$('<div />', { 'id': 'pie'  }).appendTo('body');
$('<div />', { 'id': 'spinner'  }).appendTo('#pie');
$('<div />', { 'id': 'blocker'  }).appendTo('#pie');


function progressPie() {

  var articleHeight = $('#article').outerHeight();
  var articleTop = $('#article').offset().top;
  var articleBottom = articleTop + articleHeight;
  var scrnHeight = $(window).height();
  var scrolled = $(window).scrollTop();
  var pie = $('#pie');
  var spinner = pie.children('#spinner');
  var blocker = pie.children('#blocker');

  // If #article is within screen boundary
  if( (articleTop-scrolled) < scrnHeight && articleBottom > scrolled) {

	  // Pie appears only when scrolling
	  if(pie.hasClass('active')) {
	  	clearTimeout(timer);
	  	pie.removeClass('active');
	  }
	  pie.addClass('active');
	  timer = setTimeout(function(){
		  pie.removeClass('active');
	  }, 1000); // Hold for 1s

	  // Calculate and apply degrees to pie
	  var percentage = ( ((scrnHeight-articleTop)+scrolled) / articleHeight ) * 100;
	  var degrees = (360 / 100) * percentage;
    if (degrees <= 360) {
	     spinner.css('transform', 'rotate(' + degrees + 'deg)');
    }

	  // If over 180deg, flip cover to hide spinner
	  if (degrees > 180) {
		  blocker.addClass('overhalf');
	  } else {
		  blocker.removeClass('overhalf');
	  }

  } // end if

}

$(window).on('load', function(){ progressPie(); });
$(window).scroll ( function() {	progressPie(); });
$(window).resize ( function() {	progressPie(); });
            
          
!
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