Pen Settings

HTML

CSS

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. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

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.

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

Behavior

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.

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

              
                <nav class="navbar navbar-default navbar-theme">
  <div class="navbar-header">
    <div href="#" class="navbar-brand clearfix">
      <img class="navbar-logo" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/176621/logo.png" alt="Mk-Ui">
      <span class="navbar-details">
						<span>Components / <span class="sg-pagename">Loader</span></span>
      <span class="navbar-quote">A Flexible User Interface Suite Built on Accessibility.</span>
      </span>
    </div>
  </div>
  <ul class="nav navbar-top">
    <li class="active">
      <a href="https://codepen.io/MarkitOnDemand/post/mk-loader">Documentation</a>
    </li>
    <li>
      <a href="https://github.com/markitondemand/mk-ui">Github</a>
    </li>
    <li>
      <a href="https://github.com/markitondemand">Markit Digital</a>
    </li>
  </ul>
</nav>
<div class="container">
  <ol class="list-theme">
    <li>
      <h2 class="h-theme">Basic Loader</h2>
      <p class="font-theme">Load dynamic content, notify screen readers, reset tab focus to new content.</p>
      <div class="panel">
        <div class="panel-heading">
          <h2 class="panel-title">Module Title</h2>
        </div>
        <div class="panel-body">
          <p>Accusamus kale chips yuccie, portland cronut bitters voluptate 90's tempor selvage street art chia occupy mollit. Laboris four dollar toast banjo, polaroid humblebrag shabby chic helvetica 8-bit truffaut chicharrones freegan try-hard asymmetrical
            odio kickstarter. Waistcoat readymade next level ennui yuccie consectetur. You probably haven't heard of them nihil ullamco, nulla gentrify brunch microdosing leggings pickled knausgaard. Et lo-fi minim freegan fashion axe master cleanse.
            Ethical quinoa bushwick asymmetrical tempor. Selfies polaroid wayfarers do consectetur, hoodie occupy forage ullamco tattooed health goth selvage keffiyeh.</p>
          <p>Affogato hella cray et meggings, chambray kale chips hammock kombucha sustainable cronut commodo salvia franzen craft beer. Est velit vinyl intelligentsia. Meggings kickstarter meditation, freegan laborum microdosing affogato chartreuse plaid
            et fap gochujang hashtag. Kale chips chartreuse occaecat street art heirloom biodiesel, anim direct trade blue bottle typewriter gochujang cronut pinterest eiusmod venmo. Pabst tilde dreamcatcher fixie DIY, sint chartreuse biodiesel shoreditch
            YOLO. Locavore small batch 90's pariatur voluptate ea. Consequat bitters thundercats, pinterest gastropub YOLO crucifix cray heirloom austin biodiesel next level man bun.</p>
        </div>
        <div class="panel-footer">
          <button id="bacon" class="btn btn-primary">Load Bacon Text</button>
          <button id="hipster" class="btn btn-primary">Load Hipster Text</button>
        </div>
      </div>
    </li>
  </ol>
</div>
              
            
!

CSS

              
                
.panel-body {
  border: 1px solid #ccc;
  position: relative;
}
              
            
!

JS

              
                $(function() {

  var $panel = $('.panel-body'),
      timer = null;

  function loadContent(cb) {

    if (timer) {
      clearTimeout(timer);
      timer = null;
    }

    $panel.mkloader(true);

    setTimeout(function() { 
      cb(); 
      $panel.mkloader(false, true) 
    }, 2000);
  }

  $('#hipster').on('click', function() {
    loadContent(replaceBacon);
  });

  $('#bacon').on('click', function() {
    loadContent(replaceHipster);
  });
});

function replaceHipster() {
				$('.panel-body').html(
					'<p>' + 'Bacon ipsum dolor amet swine ham hock turkey shank short loin alcatra pork loin meatloaf short ribs shoulder rump flank picanha. Hamburger short loin meatloaf tenderloin cupim jowl. Jowl boudin sausage short loin kielbasa.V enison hamburger filet mignon andouille porchetta chicken short ribs pork loin swine.' + '</p>' +
					'<p>' + 'Andouille strip steak shankle doner. Drumstick venison chuck beef kevin leberkas. Prosciutto frankfurter brisket sausage ball tip, jowl ham short loin andouille shoulder salami tongue bacon pastrami meatloaf. Tenderloin spare ribs jowl, short ribs tongue sirloin ribeye meatball pork loin turkey cupim t-bone pastrami. Turducken beef ribs cupim ground round pork belly brisket filet mignon biltong leberkas swine pig. Pig doner tenderloin spare ribs turkey corned beef sausage brisket pastrami short loin.' + '</p>'
				);
			}

			function replaceBacon() {
				$('.panel-body').html(
					'<p>' + 'Accusamus kale chips yuccie, portland cronut bitters voluptate 90\'s tempor selvage street art chia occupy mollit. Laboris four <a href="https://www.google.com">dollar</a> toast banjo, polaroid humblebrag shabby chic helvetica 8-bit truffaut chicharrones freegan try-hard asymmetrical odio kickstarter. Waistcoat readymade next level ennui yuccie consectetur. You probably haven\'t heard of them nihil ullamco, nulla gentrify brunch microdosing leggings pickled knausgaard. Et lo-fi minim freegan fashion axe master cleanse. Ethical quinoa bushwick asymmetrical tempor. Selfies polaroid wayfarers do consectetur, hoodie occupy forage ullamco tattooed health goth selvage keffiyeh.' + '</p>' + 
					'<p>' + 'Affogato hella cray et meggings, chambray kale chips hammock kombucha sustainable cronut commodo salvia franzen craft beer. Est velit vinyl intelligentsia. Meggings kickstarter meditation, freegan laborum microdosing affogato chartreuse plaid et fap gochujang hashtag. Kale chips chartreuse occaecat street art heirloom biodiesel, anim direct trade blue bottle typewriter gochujang cronut pinterest eiusmod venmo. Pabst tilde dreamcatcher fixie DIY, sint chartreuse biodiesel shoreditch YOLO. Locavore small batch 90\'s pariatur voluptate ea. Consequat bitters thundercats, pinterest gastropub YOLO crucifix cray heirloom austin biodiesel next level man bun.' + '</p>'
				);
			}
              
            
!
999px

Console