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

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

              
                <div>
  <!-- start ng-busy custom component template -->
  <div custom-busy>
      <div loader-container>
          <span class="l1"></span>
          <span class="l2"></span>
          <span class="l3"></span>
          <span class="l4"></span>
      </div>
      <div loader-msg>
          Don't Panic
      </div>
  </div>
  <!-- end ng-busy custom component template -->
  
  <!-- testing content start here -->
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec quam ac nisl efficitur tincidunt. Vivamus semper libero vitae metus dictum, eget eleifend dolor congue. Nunc lacus ex, venenatis vel accumsan quis, placerat sit amet ex. Sed at justo sed tortor sagittis luctus non tincidunt augue. Pellentesque in nulla ut leo mollis venenatis et ut orci. Nunc volutpat id ante a vulputate. Donec eu velit id augue condimentum aliquam. Aenean commodo diam id diam venenatis pretium. Vestibulum fringilla faucibus arcu. Phasellus suscipit id sem sed pulvinar. Aenean fringilla ante ac cursus pharetra. In euismod libero vel est pulvinar rutrum. Aenean laoreet, augue eget imperdiet molestie, quam magna venenatis purus, a bibendum purus magna eget purus. Pellentesque ultrices scelerisque magna, eget consequat felis tincidunt eget. Vivamus et leo sed magna scelerisque suscipit.</p>

Sed lacinia enim magna, ut ornare arcu rhoncus quis. Fusce augue massa, porta vitae dui sed, accumsan aliquam odio. Nulla ut ultricies eros. Duis pulvinar porta tellus eget ultricies. Integer vel feugiat ipsum. Phasellus pharetra sodales felis, ac sagittis felis congue quis. Nunc vitae est purus. Integer ullamcorper odio nec felis gravida, ut rhoncus urna malesuada. Vestibulum porttitor metus ligula, vitae elementum ipsum iaculis in. Praesent hendrerit nec massa at dapibus. Nam tempus elementum egestas. Aenean at diam elit. In vel urna metus. Curabitur in odio libero. Nulla blandit, nibh ut iaculis congue, nibh leo cursus velit, sed ornare libero dolor et mauris. Sed scelerisque, leo in cursus volutpat, magna turpis pulvinar velit, ac pellentesque tortor quam non dolor.

<p>Sed eu ligula aliquet, fringilla enim et, mollis sapien. Praesent vel dolor eros. Donec id condimentum odio. Etiam vitae massa non nibh ultricies hendrerit. Cras fringilla molestie molestie. Suspendisse interdum leo vulputate metus congue accumsan. Etiam sed diam sit amet elit euismod viverra. Maecenas ultricies, neque vel facilisis suscipit, massa dolor viverra est, et tincidunt arcu lorem in sapien. Nullam commodo orci et euismod maximus. Duis mauris augue, mattis tincidunt condimentum vitae, faucibus nec velit. Ut sodales, leo sit amet pretium lacinia, leo metus cursus urna, a luctus mi arcu ac tortor. Quisque a condimentum metus, vel hendrerit ante. Vestibulum eget lobortis neque. Phasellus euismod magna et ligula facilisis, vel vehicula nisl vehicula. Donec dignissim in sem sit amet mattis. Aenean hendrerit cursus eros eu consectetur.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec quam ac nisl efficitur tincidunt. Vivamus semper libero vitae metus dictum, eget eleifend dolor congue. Nunc lacus ex, venenatis vel accumsan quis, placerat sit amet ex. Sed at justo sed tortor sagittis luctus non tincidunt augue. Pellentesque in nulla ut leo mollis venenatis et ut orci. Nunc volutpat id ante a vulputate. Donec eu velit id augue condimentum aliquam. Aenean commodo diam id diam venenatis pretium. Vestibulum fringilla faucibus arcu. Phasellus suscipit id sem sed pulvinar. Aenean fringilla ante ac cursus pharetra. In euismod libero vel est pulvinar rutrum. Aenean laoreet, augue eget imperdiet molestie, quam magna venenatis purus, a bibendum purus magna eget purus. Pellentesque ultrices scelerisque magna, eget consequat felis tincidunt eget. Vivamus et leo sed magna scelerisque suscipit.</p>

Sed lacinia enim magna, ut ornare arcu rhoncus quis. Fusce augue massa, porta vitae dui sed, accumsan aliquam odio. Nulla ut ultricies eros. Duis pulvinar porta tellus eget ultricies. Integer vel feugiat ipsum. Phasellus pharetra sodales felis, ac sagittis felis congue quis. Nunc vitae est purus. Integer ullamcorper odio nec felis gravida, ut rhoncus urna malesuada. Vestibulum porttitor metus ligula, vitae elementum ipsum iaculis in. Praesent hendrerit nec massa at dapibus. Nam tempus elementum egestas. Aenean at diam elit. In vel urna metus. Curabitur in odio libero. Nulla blandit, nibh ut iaculis congue, nibh leo cursus velit, sed ornare libero dolor et mauris. Sed scelerisque, leo in cursus volutpat, magna turpis pulvinar velit, ac pellentesque tortor quam non dolor.

<p>Sed eu ligula aliquet, fringilla enim et, mollis sapien. Praesent vel dolor eros. Donec id condimentum odio. Etiam vitae massa non nibh ultricies hendrerit. Cras fringilla molestie molestie. Suspendisse interdum leo vulputate metus congue accumsan. Etiam sed diam sit amet elit euismod viverra. Maecenas ultricies, neque vel facilisis suscipit, massa dolor viverra est, et tincidunt arcu lorem in sapien. Nullam commodo orci et euismod maximus. Duis mauris augue, mattis tincidunt condimentum vitae, faucibus nec velit. Ut sodales, leo sit amet pretium lacinia, leo metus cursus urna, a luctus mi arcu ac tortor. Quisque a condimentum metus, vel hendrerit ante. Vestibulum eget lobortis neque. Phasellus euismod magna et ligula facilisis, vel vehicula nisl vehicula. Donec dignissim in sem sit amet mattis. Aenean hendrerit cursus eros eu consectetur.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec quam ac nisl efficitur tincidunt. Vivamus semper libero vitae metus dictum, eget eleifend dolor congue. Nunc lacus ex, venenatis vel accumsan quis, placerat sit amet ex. Sed at justo sed tortor sagittis luctus non tincidunt augue. Pellentesque in nulla ut leo mollis venenatis et ut orci. Nunc volutpat id ante a vulputate. Donec eu velit id augue condimentum aliquam. Aenean commodo diam id diam venenatis pretium. Vestibulum fringilla faucibus arcu. Phasellus suscipit id sem sed pulvinar. Aenean fringilla ante ac cursus pharetra. In euismod libero vel est pulvinar rutrum. Aenean laoreet, augue eget imperdiet molestie, quam magna venenatis purus, a bibendum purus magna eget purus. Pellentesque ultrices scelerisque magna, eget consequat felis tincidunt eget. Vivamus et leo sed magna scelerisque suscipit.</p>

Sed lacinia enim magna, ut ornare arcu rhoncus quis. Fusce augue massa, porta vitae dui sed, accumsan aliquam odio. Nulla ut ultricies eros. Duis pulvinar porta tellus eget ultricies. Integer vel feugiat ipsum. Phasellus pharetra sodales felis, ac sagittis felis congue quis. Nunc vitae est purus. Integer ullamcorper odio nec felis gravida, ut rhoncus urna malesuada. Vestibulum porttitor metus ligula, vitae elementum ipsum iaculis in. Praesent hendrerit nec massa at dapibus. Nam tempus elementum egestas. Aenean at diam elit. In vel urna metus. Curabitur in odio libero. Nulla blandit, nibh ut iaculis congue, nibh leo cursus velit, sed ornare libero dolor et mauris. Sed scelerisque, leo in cursus volutpat, magna turpis pulvinar velit, ac pellentesque tortor quam non dolor.

<p>Sed eu ligula aliquet, fringilla enim et, mollis sapien. Praesent vel dolor eros. Donec id condimentum odio. Etiam vitae massa non nibh ultricies hendrerit. Cras fringilla molestie molestie. Suspendisse interdum leo vulputate metus congue accumsan. Etiam sed diam sit amet elit euismod viverra. Maecenas ultricies, neque vel facilisis suscipit, massa dolor viverra est, et tincidunt arcu lorem in sapien. Nullam commodo orci et euismod maximus. Duis mauris augue, mattis tincidunt condimentum vitae, faucibus nec velit. Ut sodales, leo sit amet pretium lacinia, leo metus cursus urna, a luctus mi arcu ac tortor. Quisque a condimentum metus, vel hendrerit ante. Vestibulum eget lobortis neque. Phasellus euismod magna et ligula facilisis, vel vehicula nisl vehicula. Donec dignissim in sem sit amet mattis. Aenean hendrerit cursus eros eu consectetur.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec quam ac nisl efficitur tincidunt. Vivamus semper libero vitae metus dictum, eget eleifend dolor congue. Nunc lacus ex, venenatis vel accumsan quis, placerat sit amet ex. Sed at justo sed tortor sagittis luctus non tincidunt augue. Pellentesque in nulla ut leo mollis venenatis et ut orci. Nunc volutpat id ante a vulputate. Donec eu velit id augue condimentum aliquam. Aenean commodo diam id diam venenatis pretium. Vestibulum fringilla faucibus arcu. Phasellus suscipit id sem sed pulvinar. Aenean fringilla ante ac cursus pharetra. In euismod libero vel est pulvinar rutrum. Aenean laoreet, augue eget imperdiet molestie, quam magna venenatis purus, a bibendum purus magna eget purus. Pellentesque ultrices scelerisque magna, eget consequat felis tincidunt eget. Vivamus et leo sed magna scelerisque suscipit.</p>

Sed lacinia enim magna, ut ornare arcu rhoncus quis. Fusce augue massa, porta vitae dui sed, accumsan aliquam odio. Nulla ut ultricies eros. Duis pulvinar porta tellus eget ultricies. Integer vel feugiat ipsum. Phasellus pharetra sodales felis, ac sagittis felis congue quis. Nunc vitae est purus. Integer ullamcorper odio nec felis gravida, ut rhoncus urna malesuada. Vestibulum porttitor metus ligula, vitae elementum ipsum iaculis in. Praesent hendrerit nec massa at dapibus. Nam tempus elementum egestas. Aenean at diam elit. In vel urna metus. Curabitur in odio libero. Nulla blandit, nibh ut iaculis congue, nibh leo cursus velit, sed ornare libero dolor et mauris. Sed scelerisque, leo in cursus volutpat, magna turpis pulvinar velit, ac pellentesque tortor quam non dolor.

<p>Sed eu ligula aliquet, fringilla enim et, mollis sapien. Praesent vel dolor eros. Donec id condimentum odio. Etiam vitae massa non nibh ultricies hendrerit. Cras fringilla molestie molestie. Suspendisse interdum leo vulputate metus congue accumsan. Etiam sed diam sit amet elit euismod viverra. Maecenas ultricies, neque vel facilisis suscipit, massa dolor viverra est, et tincidunt arcu lorem in sapien. Nullam commodo orci et euismod maximus. Duis mauris augue, mattis tincidunt condimentum vitae, faucibus nec velit. Ut sodales, leo sit amet pretium lacinia, leo metus cursus urna, a luctus mi arcu ac tortor. Quisque a condimentum metus, vel hendrerit ante. Vestibulum eget lobortis neque. Phasellus euismod magna et ligula facilisis, vel vehicula nisl vehicula. Donec dignissim in sem sit amet mattis. Aenean hendrerit cursus eros eu consectetur.</p>
</div>
              
            
!

CSS

              
                body{
  font-family:arial;
}
/* --------------------- */
/* ---Variables-------- */
/* --------------------*/

$custom-busy-overlay:rgba(255,255,255,0.9);
$custom-busy-speed:0.5;
$custom-busy-align-items:center;
$custom-busy-grid-gap:5px;
$custom-busy-loader-block-size:10px;
$custom-busy-primary-color:#00aeff;
$custom-busy-secondary-color:#343a40;
$custom-busy-msg-color:$custom-busy-secondary-color;
$custom-busy-msg-weight:700;
$custom-busy-msg-spacing:10px;

/* -------------------------- */
/* ---Keyframe Mixin-------- */
/* -------------------------*/

@mixin keyframes($name) {
    @-webkit-keyframes #{$name} {
      @content; 
    }
    @-moz-keyframes #{$name} {
      @content;
    }
    @-ms-keyframes #{$name} {
      @content;
    }
    @keyframes #{$name} {
      @content;
    } 
  }
 
/* ------------------------------ */
/* ---Keyframe Animation-------- */
/* -----------------------------*/

@include keyframes(blink) {
    0% {
        background-color: $custom-busy-primary-color;
    }
    100% {
        background-color: $custom-busy-secondary-color;
    } 
}

/* ------------------------------ */
/* --- ng-busy classes --------- */
/* -----------------------------*/

[custom-busy] {
    display: flex;
    flex-direction: column;
    position: absolute;
    left:0;
    right:0;
    top:0;
    bottom: 0;
    background: $custom-busy-overlay;
    justify-content: center;
    align-items: $custom-busy-align-items;
    & [loader-container]{
        display: grid;
        grid-template: 1fr / auto auto;
        grid-gap: $custom-busy-grid-gap;
        & > span{
            background-color: $custom-busy-primary-color;
            padding: $custom-busy-loader-block-size;
            //animation: name duration timing-function delay iteration-count direction fill-mode;
            &.l1{
                animation: blink #{$custom-busy-speed}s linear #{$custom-busy-speed / 4}s infinite normal forwards;
            }
            &.l2{
                animation: blink #{$custom-busy-speed}s linear #{$custom-busy-speed / 3}s infinite normal forwards;
            }
            &.l3{
                animation: blink #{$custom-busy-speed}s linear #{$custom-busy-speed / 1}s infinite normal forwards;
            }
            &.l4{
                animation: blink #{$custom-busy-speed}s linear #{$custom-busy-speed / 2}s infinite normal forwards;
            }
        }
    }
    & [loader-msg]{
        padding:$custom-busy-msg-spacing;
        color:$custom-busy-msg-color;
        font-weight: $custom-busy-msg-weight;
    }
}
              
            
!

JS

              
                
              
            
!
999px

Console