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>
  <h2>Suspendisse sit amet magna condimentum</h2>
  <p>Ut hendrerit orci eu diam viverra imperdiet. Sed vehicula et enim at gravida. Sed maximus dui sit amet lacus vestibulum congue. Nunc finibus, ligula vel ultricies aliquam, ligula sem rutrum est, vitae vestibulum purus nisi id dolor. Phasellus vehicula, tortor nec consectetur varius, ante lorem placerat urna, eu euismod elit ligula vulputate nisi. Vivamus non imperdiet dolor. Phasellus vitae dignissim metus. Sed eu risus et massa tristique sollicitudin vel ac sem. Sed sapien justo, viverra quis tortor eget, ornare consequat augue. Suspendisse eu nulla sit amet ipsum ultricies luctus eget mattis massa.</p>

  <p>Aenean at magna vehicula, suscipit diam vel, feugiat justo. Etiam in turpis nec dolor suscipit aliquet at sit amet metus. Sed at libero id urna molestie volutpat a at elit. Donec mattis justo lectus, nec hendrerit metus pharetra sed. Maecenas tortor arcu, viverra ut sodales eu, iaculis vitae lacus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce nec sem urna.</p>

  <p>Integer felis mi, tristique non nibh ac, vestibulum eleifend turpis. Praesent mollis arcu in felis egestas sollicitudin. Sed euismod hendrerit commodo. Phasellus feugiat lobortis lorem, ac accumsan libero pretium id. Aliquam vitae hendrerit augue. Sed porttitor vel turpis eget commodo. Etiam at lacus eget metus iaculis posuere. Fusce non pellentesque velit, nec varius ligula. Morbi aliquet tellus bibendum lectus posuere commodo. Pellentesque vel lacus non elit condimentum rutrum. Quisque vitae commodo nisl, vulputate efficitur ligula. Vestibulum scelerisque in lacus ut aliquet. Duis quis consectetur arcu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer semper vulputate enim. Etiam in facilisis nisl, sed suscipit sem.</p>

  <p>Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce neque nisl, sollicitudin non tortor sit amet, dignissim luctus enim. Duis consequat laoreet enim at mollis. Donec orci mauris, condimentum non scelerisque ut, consequat at urna. Vestibulum commodo malesuada dignissim. Nunc mauris ipsum, tristique ac quam in, iaculis finibus mauris. Praesent in lorem vestibulum, ullamcorper nibh ac, interdum sapien. Pellentesque vestibulum eleifend metus. Donec magna lectus, euismod a enim ut, venenatis imperdiet quam. Nam dictum dui eget metus mollis, sed interdum nunc congue. Mauris sapien enim, condimentum pharetra tristique et, aliquam eget velit. Quisque quis leo nisi. Nunc feugiat aliquet venenatis.</p>

  <p>Vestibulum a tortor ac orci euismod tempus at in massa. Phasellus vel tincidunt enim. Morbi et dui in velit sollicitudin vulputate vel non enim. Vivamus in justo nisl. Etiam tincidunt tempor volutpat. Mauris eget mi nibh. Vivamus ut augue molestie elit venenatis auctor. Aenean in fermentum tortor. Suspendisse finibus congue nisl, nec bibendum arcu bibendum nec. Nam molestie lectus ut luctus accumsan. Nulla ornare posuere est sed hendrerit. Donec sed viverra erat. Duis tempus sollicitudin eros et euismod. Ut eget metus elementum diam aliquam malesuada. Duis fermentum lectus finibus turpis elementum pulvinar. Donec diam dolor, feugiat id rhoncus id, imperdiet ac leo.</p>

  <p>Integer eget faucibus tellus. Suspendisse sit amet magna condimentum, efficitur purus ut, gravida eros. Fusce tempus, leo aliquam rutrum malesuada, sem lectus rhoncus tellus, vel varius arcu nibh id magna. Nulla sed eros orci. Suspendisse finibus volutpat risus. Nam faucibus maximus volutpat. Maecenas tristique augue in odio condimentum luctus. Duis mi eros, fermentum ac scelerisque non, facilisis non nibh. Nullam varius magna at venenatis fermentum. Suspendisse imperdiet nibh vel massa blandit rhoncus. Nunc aliquet ipsum et mauris venenatis porttitor. Vivamus tempor ipsum magna, eu cursus est volutpat non. Sed nec molestie turpis. Duis sit amet tortor viverra, cursus mi placerat, pellentesque ex.</p>

  <p>In tristique nunc massa, et condimentum mauris facilisis quis. Maecenas nec aliquet libero. Mauris tempus enim justo, id posuere quam mattis at. Morbi commodo ligula lobortis, suscipit nisl ac, tempor ligula. Nam fringilla blandit urna et efficitur. Nullam vel ornare turpis. Pellentesque vel faucibus felis, ut sagittis mauris. Sed nulla lacus, pharetra id nunc eu, consequat consequat lorem. Suspendisse dictum, enim a ullamcorper egestas, lacus risus vulputate diam, in dictum nulla nisi vitae eros. Duis turpis mi, pharetra non blandit id, euismod eget velit. Vestibulum libero eros, euismod at sollicitudin nec, dignissim id magna. Duis at finibus neque. Nullam scelerisque eros in quam ultricies rhoncus. Cras laoreet rhoncus leo suscipit congue.</p>

  <p>Mauris nisi lacus, euismod eget luctus vel, sodales eu nunc. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec vulputate urna vitae neque semper tempus. Curabitur ac eleifend eros. Vivamus malesuada, dui ac semper iaculis, ex libero venenatis sem, ac convallis massa arcu sed lectus. Quisque in purus nec ante imperdiet viverra. Maecenas ipsum leo, venenatis eleifend lorem ac, auctor pretium elit. Etiam et quam fringilla eros lobortis finibus. Morbi tincidunt sagittis arcu in faucibus. Nunc suscipit pharetra nisl. Vestibulum placerat, libero at pharetra placerat, nibh velit posuere felis, in venenatis purus leo non orci.</p>

  <p>Donec auctor sed orci a lacinia. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse potenti. In orci diam, luctus vel volutpat et, dignissim id metus. Ut dignissim feugiat urna, id pharetra mauris venenatis non. Vivamus tempus nisl lectus, sed luctus nisi pretium efficitur. Ut semper at leo suscipit eleifend. Phasellus augue felis, mattis non nibh non, egestas aliquet ipsum. Sed rutrum pretium nunc. Sed venenatis dui massa. Curabitur lobortis vulputate mattis. Maecenas eleifend nec enim sed tincidunt. Pellentesque dignissim, nunc vel aliquam lobortis, justo nisl fringilla justo, in pharetra ex purus nec erat.</p>

  <p>Fusce semper purus in eleifend mattis. Aliquam facilisis eu purus id eleifend. Donec tempus, dolor at venenatis luctus, arcu turpis posuere erat, id porttitor massa neque vel metus. Integer pellentesque velit non libero fermentum dignissim. In sodales suscipit vestibulum. Maecenas nisi metus, eleifend scelerisque facilisis quis, semper sit amet sem. Donec auctor tellus a purus dapibus, vitae faucibus dui feugiat. Ut malesuada dapibus dui ut blandit. In id lacus condimentum, venenatis arcu gravida, tincidunt odio. Quisque blandit sagittis blandit. Sed massa velit, laoreet vitae neque id, consequat vulputate lacus. Nullam vulputate magna vel libero tempus dapibus. Aenean placerat euismod scelerisque. Suspendisse sit amet magna tortor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>

  <p>Cras ullamcorper orci eros, eu hendrerit nisl gravida vel. Quisque quis nibh vel velit malesuada ornare ut eu est. Nam pretium mi sed felis porttitor, eget aliquet magna iaculis. Ut venenatis auctor fringilla. In et consectetur tellus, vitae posuere ipsum. Maecenas scelerisque leo in dignissim dignissim. Cras viverra laoreet lacus, non venenatis tellus scelerisque in.</p>

  <p>Cras ut velit eget metus eleifend malesuada. Cras risus leo, malesuada et ante eget, tincidunt rhoncus justo. Nullam condimentum viverra justo, vitae placerat nulla bibendum quis. Proin tempor sodales mattis. Duis scelerisque, risus rutrum convallis finibus, velit odio ultricies magna, eu porta massa sem iaculis augue. Donec et gravida lorem. Vivamus volutpat bibendum libero, sed feugiat nulla. Fusce pellentesque dui ac metus porta, eu finibus nulla posuere.</p>
</article>


<div class="preloader-overlay js-preloader-overlay" >
  <svg data-role="preloader" width="250" height="250" viewBox="0 0 250 250">
    <style type="text/css">
      text,use{
        fill:#333;
      }
      text{
        font-family: 'Medula One', cursive;
        font-size:120px;
      }
      use{
        opacity:0.1;
        transition:0.25s all;
      }
      use.active{
        opacity:0.9;
      }
    </style>
    <defs>
      <symbol id="tick-small"><rect data-name="tick center" x="124" y="110" width="2" height="10" rx="2.2727" ry="2.2727" transform="translate(0, -110)" /></symbol>
      <symbol id="tick-large"><rect data-name="tick center" x="124" y="110" width="2" height="15" rx="2.2727" ry="2.2727" transform="translate(0, -110)" /></symbol>
    </defs>
    <use xlink:href="#tick-large" transform="rotate(0 125 125)"/><use xlink:href="#tick-small" transform="rotate(3.6 125 125)"/><use xlink:href="#tick-small" transform="rotate(7.2 125 125)"/><use xlink:href="#tick-small" transform="rotate(10.8 125 125)"/><use xlink:href="#tick-small" transform="rotate(14.4 125 125)"/><use xlink:href="#tick-large" transform="rotate(18 125 125)"/><use xlink:href="#tick-small" transform="rotate(21.6 125 125)"/><use xlink:href="#tick-small" transform="rotate(25.2 125 125)"/><use xlink:href="#tick-small" transform="rotate(28.8 125 125)"/><use xlink:href="#tick-small" transform="rotate(32.4 125 125)"/><use xlink:href="#tick-large" transform="rotate(36 125 125)"/><use xlink:href="#tick-small" transform="rotate(39.6 125 125)"/><use xlink:href="#tick-small" transform="rotate(43.2 125 125)"/><use xlink:href="#tick-small" transform="rotate(46.8 125 125)"/><use xlink:href="#tick-small" transform="rotate(50.4 125 125)"/><use xlink:href="#tick-large" transform="rotate(54 125 125)"/><use xlink:href="#tick-small" transform="rotate(57.6 125 125)"/><use xlink:href="#tick-small" transform="rotate(61.2 125 125)"/><use xlink:href="#tick-small" transform="rotate(64.8 125 125)"/><use xlink:href="#tick-small" transform="rotate(68.4 125 125)"/><use xlink:href="#tick-large" transform="rotate(72 125 125)"/><use xlink:href="#tick-small" transform="rotate(75.6 125 125)"/><use xlink:href="#tick-small" transform="rotate(79.2 125 125)"/><use xlink:href="#tick-small" transform="rotate(82.8 125 125)"/><use xlink:href="#tick-small" transform="rotate(86.4 125 125)"/><use xlink:href="#tick-large" transform="rotate(90 125 125)"/><use xlink:href="#tick-small" transform="rotate(93.6 125 125)"/><use xlink:href="#tick-small" transform="rotate(97.2 125 125)"/><use xlink:href="#tick-small" transform="rotate(100.8 125 125)"/><use xlink:href="#tick-small" transform="rotate(104.4 125 125)"/><use xlink:href="#tick-large" transform="rotate(108 125 125)"/><use xlink:href="#tick-small" transform="rotate(111.6 125 125)"/><use xlink:href="#tick-small" transform="rotate(115.2 125 125)"/><use xlink:href="#tick-small" transform="rotate(118.8 125 125)"/><use xlink:href="#tick-small" transform="rotate(122.4 125 125)"/><use xlink:href="#tick-large" transform="rotate(126 125 125)"/><use xlink:href="#tick-small" transform="rotate(129.6 125 125)"/><use xlink:href="#tick-small" transform="rotate(133.2 125 125)"/><use xlink:href="#tick-small" transform="rotate(136.8 125 125)"/><use xlink:href="#tick-small" transform="rotate(140.4 125 125)"/><use xlink:href="#tick-large" transform="rotate(144 125 125)"/><use xlink:href="#tick-small" transform="rotate(147.6 125 125)"/><use xlink:href="#tick-small" transform="rotate(151.2 125 125)"/><use xlink:href="#tick-small" transform="rotate(154.8 125 125)"/><use xlink:href="#tick-small" transform="rotate(158.4 125 125)"/><use xlink:href="#tick-large" transform="rotate(162 125 125)"/><use xlink:href="#tick-small" transform="rotate(165.6 125 125)"/><use xlink:href="#tick-small" transform="rotate(169.2 125 125)"/><use xlink:href="#tick-small" transform="rotate(172.8 125 125)"/><use xlink:href="#tick-small" transform="rotate(176.4 125 125)"/><use xlink:href="#tick-large" transform="rotate(180 125 125)"/><use xlink:href="#tick-small" transform="rotate(183.6 125 125)"/><use xlink:href="#tick-small" transform="rotate(187.2 125 125)"/><use xlink:href="#tick-small" transform="rotate(190.8 125 125)"/><use xlink:href="#tick-small" transform="rotate(194.4 125 125)"/><use xlink:href="#tick-large" transform="rotate(198 125 125)"/><use xlink:href="#tick-small" transform="rotate(201.6 125 125)"/><use xlink:href="#tick-small" transform="rotate(205.2 125 125)"/><use xlink:href="#tick-small" transform="rotate(208.8 125 125)"/><use xlink:href="#tick-small" transform="rotate(212.4 125 125)"/><use xlink:href="#tick-large" transform="rotate(216 125 125)"/><use xlink:href="#tick-small" transform="rotate(219.6 125 125)"/><use xlink:href="#tick-small" transform="rotate(223.2 125 125)"/><use xlink:href="#tick-small" transform="rotate(226.8 125 125)"/><use xlink:href="#tick-small" transform="rotate(230.4 125 125)"/><use xlink:href="#tick-large" transform="rotate(234 125 125)"/><use xlink:href="#tick-small" transform="rotate(237.6 125 125)"/><use xlink:href="#tick-small" transform="rotate(241.2 125 125)"/><use xlink:href="#tick-small" transform="rotate(244.8 125 125)"/><use xlink:href="#tick-small" transform="rotate(248.4 125 125)"/><use xlink:href="#tick-large" transform="rotate(252 125 125)"/><use xlink:href="#tick-small" transform="rotate(255.6 125 125)"/><use xlink:href="#tick-small" transform="rotate(259.2 125 125)"/><use xlink:href="#tick-small" transform="rotate(262.8 125 125)"/><use xlink:href="#tick-small" transform="rotate(266.4 125 125)"/><use xlink:href="#tick-large" transform="rotate(270 125 125)"/><use xlink:href="#tick-small" transform="rotate(273.6 125 125)"/><use xlink:href="#tick-small" transform="rotate(277.2 125 125)"/><use xlink:href="#tick-small" transform="rotate(280.8 125 125)"/><use xlink:href="#tick-small" transform="rotate(284.4 125 125)"/><use xlink:href="#tick-large" transform="rotate(288 125 125)"/><use xlink:href="#tick-small" transform="rotate(291.6 125 125)"/><use xlink:href="#tick-small" transform="rotate(295.2 125 125)"/><use xlink:href="#tick-small" transform="rotate(298.8 125 125)"/><use xlink:href="#tick-small" transform="rotate(302.4 125 125)"/><use xlink:href="#tick-large" transform="rotate(306 125 125)"/><use xlink:href="#tick-small" transform="rotate(309.6 125 125)"/><use xlink:href="#tick-small" transform="rotate(313.2 125 125)"/><use xlink:href="#tick-small" transform="rotate(316.8 125 125)"/><use xlink:href="#tick-small" transform="rotate(320.4 125 125)"/><use xlink:href="#tick-large" transform="rotate(324 125 125)"/><use xlink:href="#tick-small" transform="rotate(327.6 125 125)"/><use xlink:href="#tick-small" transform="rotate(331.2 125 125)"/><use xlink:href="#tick-small" transform="rotate(334.8 125 125)"/><use xlink:href="#tick-small" transform="rotate(338.4 125 125)"/><use xlink:href="#tick-large" transform="rotate(342 125 125)"/><use xlink:href="#tick-small" transform="rotate(345.6 125 125)"/><use xlink:href="#tick-small" transform="rotate(349.2 125 125)"/><use xlink:href="#tick-small" transform="rotate(352.8 125 125)"/><use xlink:href="#tick-small" transform="rotate(356.4 125 125)"/>    
    <text text-anchor="middle" id="preloader-progress-text" x="125" y="165"></text>
  </svg>
</div>

<a class="btn js-btn-rerun-animation">Re-run animation</a>
            
          
!
            
              html{
  box-sizing: border-box;
  font-size:16px;
  padding:0;
  margin:0;
}
body{
  background-color:#fff;
  width:100%;
  -webkit-overflow-scrolling:touch;
  padding:0;
  margin:0;
  text-align:center;
  font-family:'Work Sans',sans-serif;
}
body.js-preloader-is-running{
  height:100%;
  overflow:hidden;

  *{      // fix the ios loading in iframes issue
    max-height:100vh;
    overflow:hidden;
  }
}

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

article{
  display:block;
  text-align:left;
  width:100%;
  margin:0 auto;
  max-width:1180px;
  padding:50px 20px;
}

p, h2{
  line-height:1.5;
}

p{
  font-size:0.85rem;
}

a.btn{
  background-color:#0652c1;
  border:1px solid #0652c1;
  display:inline-block;
  position:fixed;
  bottom:-1px;
  right:10px;
  font-weight: 300;
  padding: 10px;
  font-size:1rem;
  color:#fff;
  cursor:pointer;
}

a.btn:hover{
  border:1px solid #0652c1;
  color: #0652c1;
  background-color:#fff;
}
.preloader-overlay{
  width:100%;
  height:100%;
  position:fixed;
  top:0;
  left:0;
  background-color:#fff;
}

.preloader-overlay svg{
  position: absolute;
  top:50%;
  left:50%;
  margin:-125px 0 0 -125px;
}

.preloader-overlay.closed{
  animation: preloaderOverlayClosed 2.5s ease-out forwards;
}

@keyframes preloaderOverlayClosed {
  0% {
    filter: blur(0);
  }
  10%{
    opacity:1;
  }
  90%{
    opacity:0.1;
  }
  100% {
    filter: blur(15px);
    opacity: 0;
    width: 100%;
    height: 100%;
    overflow:hidden;
  }
}
            
          
!
            
              window.requestAnimFrame = function(){
return (
  window.requestAnimationFrame       || 
  window.webkitRequestAnimationFrame || 
  window.mozRequestAnimationFrame    || 
  window.oRequestAnimationFrame      || 
  window.msRequestAnimationFrame     || 
  function(callback){
    window.setTimeout(callback, 1000 / 60);
  }
);
}();


var preloader = {
  animationStart : null,
  animationDuration :5000, // the length of the (simulated) animation
  progressTextContainer : null,
  progressTicks : null,
  preloaderOverlay : null,
  previousProgressCount : -1,

  initialize : function(){
    this.progressTextContainer = document.getElementById('preloader-progress-text');
    this.progressTicks = document.querySelectorAll('[data-role="preloader"] use');
    this.preloaderOverlay = document.getElementsByClassName('js-preloader-overlay');
    this.simulateLoad(); // for demonstration purposes
    document.body.classList.add('js-preloader-is-running'); 
    var btnRerunAnimation = document.querySelectorAll('.js-btn-rerun-animation');
    btnRerunAnimation[0].addEventListener("click", 
      function (event) {
        window.location = location;
      }, 
      false);
  },

  updateProgress : function(progress){
    if(progress > this.previousProgressCount){
      for(var i=0; i<progress; i++){
        var tick = this.progressTicks[i].classList.add('active');
        preloader.previousProgressCount = progress;
      }
      if(progress < 100){
        preloader.progressTextContainer.innerHTML = progress;
      }else{
        // hide the preloader
        preloader.progressTextContainer.innerHTML = 'GO!';
        document.body.classList.remove('js-preloader-is-running'); // let the body scroll
        this.preloaderOverlay[0].classList.add('closed'); // hide the preloader
      }
    }
  },

  simulateLoad : function(timestamp){
    if (!this.animationStart) this.animationStart = timestamp;
    var progress = timestamp - this.animationStart;
    if(isNaN(progress)){
      progress = 0;
    }
    progress = Math.round(progress / preloader.animationDuration * 100);
    preloader.updateProgress(progress);

    if (progress < 100) {
      window.requestAnimFrame(preloader.simulateLoad);
    }else{
      this.animationStart = null;
    }
  },
}

preloader.initialize();
            
          
!
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