text: <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="utf-8">
      <meta http-equiv="x-ua-compatible" content="ie=edge">
      <title>
          Ball Scale Multiple » Load Awesome
      </title>
      <meta name="description" content="An awesome collection of — Pure CSS — Loaders and Spinners">
      <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
      <meta property="og:type" content="website" />
      <meta property="og:site_name" content="Ball Scale Multiple » Load Awesome" />
      <meta property="og:url" content="http://github.danielcardoso.net/load-awesome/animations/ball-scale-multiple.html" />
      <meta property="og:title" content="Ball Scale Multiple » Load Awesome" />
      <meta property="og:description" content="An awesome collection of — Pure CSS — Loaders and Spinners" />
      <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
      <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
      <link rel="stylesheet" type="text/css" href="../assets/style.css" />
      <link rel="stylesheet" type="text/css" href="../assets/loaders.css" />
  </head>
  <body>
      <div class="wrapper nano" style="background-color: #9787ea; color: #9787ea;">
          <div class="nano-content">
              <!-- LOADERS_FORK_LINK -->
              <header class="absolute">
                  <div class="la-docs-header-container">
                      <div class="left">
                          <h1 class="title">Load <span>Awesome</span></h1>
                      </div>
                      <div class="right text-right">
                          <!-- REMOVE_VIEW_HOME -->
                          <span class="buttongroup">
                              <a href="../" class="button button-circle">
                                  Home
                              </a>
                              <a href="../animations.html" class="button button-circle active">
                                  Animations
                              </a>
                          </span>
                          <!-- !REMOVE_VIEW_HOME -->
                      </div>
                      <div class="cf"></div>
                  </div>
              </header>
              <main class="la-docs-social-sharing-container">
                  <!-- REMOVE_VIEW_HOME -->
                  <div class="la-docs-info-container text-left" style="margin: 0; padding: 10px 0 0;">
                      <h2 class="title">Ball Scale Multiple <span>Awesome</span></h2>
                  </div>
                  <!-- !REMOVE_VIEW_HOME -->
                  <!-- SOCIAL_BUTTONS -->
                  <div class="social-sharing header__share-buttons" data-permalink="http%3A%2F%2Fgithub.danielcardoso.net%2Fload-awesome%2Fanimations%2Fball-scale-multiple.html" data-permalink-github="danielcardoso/load-awesome">
                      <small class="social-sharing-title">Share: </small>
                      <!-- https://developers.facebook.com/docs/plugins/share-button/ -->
                      <a target="_blank" href="http://www.facebook.com/sharer.php?u=http%3A%2F%2Fgithub.danielcardoso.net%2Fload-awesome%2Fanimations%2Fball-scale-multiple.html" class="share-facebook">
                          <span class="fa fa-facebook"></span>
                          <span class="share-title">Share</span>
                          <span class="share-count">0</span>
                      </a>
                      <!-- https://dev.twitter.com/docs/intents -->
                      <a target="_blank" href="http://twitter.com/share?url=http%3A%2F%2Fgithub.danielcardoso.net%2Fload-awesome%2Fanimations%2Fball-scale-multiple.html&amp;text='Ball%20Scale%20Multiple'%2C%20an%20awesome%20pure%20%23CSS%20%23Loader%20%23Animation" class="share-twitter">
                          <span class="fa fa-twitter"></span>
                          <span class="share-title">Tweet</span>
                          <span class="share-count">0</span>
                      </a>
                      <!-- https://developers.google.com/+/web/share/ -->
                      <a target="_blank" href="http://plus.google.com/share?url=http%3A%2F%2Fgithub.danielcardoso.net%2Fload-awesome%2Fanimations%2Fball-scale-multiple.html" class="share-google">
                          <!-- Cannot get Google+ share count with JS yet -->
                          <span class="fa fa-google-plus"></span>
                          <span class="share-title">+1</span>
                          <span class="share-count">0</span>
                      </a>
                      <span>
                          <a class="twitter-follow-button" href="https://twitter.com/DanielCardoso" data-show-count="true" data-lang="en">
                          Follow @DanielCardoso
                          </a>
                          <script>
                          window.twttr = (function(d, s, id) {
                              var js, fjs = d.getElementsByTagName(s)[0],
                                  t = window.twttr || {};
                              if (d.getElementById(id)) return t;
                              js = d.createElement(s);
                              js.id = id;
                              js.src = "https://platform.twitter.com/widgets.js";
                              fjs.parentNode.insertBefore(js, fjs);
                              t._e = [];
                              t.ready = function(f) {
                                  t._e.push(f);
                              };
                              return t;
                          }(document, "script", "twitter-wjs"));
                          </script>
                      </span>
                  </div>
                  <!-- !SOCIAL_BUTTONS -->
              </main>
              <!-- REMOVE_VIEW_HOME -->
              <main class="no-padding-bottom">
                  <a href="ball-scale.html" class="la-docs-prev-next la-docs-goto-prev">
                      <i class="fa fa-angle-left"></i>
                      <span>Ball Scale</span>
                  </a>
                  <a href="ball-scale-pulse.html" class="la-docs-prev-next la-docs-goto-next">
                      <i class="fa fa-angle-right"></i>
                      <span>Ball Scale Pulse</span>
                  </a>
                  <div class="items showroom auto-height title">
                      <div class="item">
                          &nbsp;
                      </div>
                      <div class="item bg-light">
                          <h2>Dark</h2>
                      </div>
                      <div class="item">
                          <h2>Normal</h2>
                      </div>
                      <div class="item bg-light">
                          <h2>Custom</h2>
                      </div>
                  </div>
                  <div class="items showroom auto-height">
                      <div class="item">
                          <h3>Small</h3>
                      </div>
                      <div class="item bg-light">
                          <div class="item-inner">
                              <div class="item-loader-container">
                                  <div class="la-ball-scale-multiple la-dark la-sm">
                                      <div></div>
                                      <div></div>
                                      <div></div>
                                  </div>
                              </div>
                          </div>
                          <div class="item-title">
                              <button type="button" data-type="la-docs-modal-trigger">
                                  <i class="fa fa-eye"></i>
                                  View Source
                              </button>
                          </div>
                      </div>
                      <div class="item">
                          <div class="item-inner">
                              <div class="item-loader-container">
                                  <div class="la-ball-scale-multiple la-sm">
                                      <div></div>
                                      <div></div>
                                      <div></div>
                                  </div>
                              </div>
                          </div>
                          <div class="item-title">
                              <button type="button" data-type="la-docs-modal-trigger">
                                  <i class="fa fa-eye"></i>
                                  View Source
                              </button>
                          </div>
                      </div>
                      <div class="item bg-light">
                          <div class="item-inner">
                              <div class="item-loader-container">
                                  <div style="color: #9787ea" class="la-ball-scale-multiple la-sm">
                                      <div></div>
                                      <div></div>
                                      <div></div>
                                  </div>
                              </div>
                          </div>
                          <div class="item-title">
                              <button type="button" data-type="la-docs-modal-trigger">
                                  <i class="fa fa-eye"></i>
                                  View Source
                              </button>
                          </div>
                      </div>
                  </div>
                  <div class="items showroom auto-height">
                      <div class="item">
                          <h3>Default</h3>
                      </div>
                      <div class="item bg-light">
                          <div class="item-inner">
                              <div class="item-loader-container">
                                  <div class="la-ball-scale-multiple la-dark">
                                      <div></div>
                                      <div></div>
                                      <div></div>
                                  </div>
                              </div>
                          </div>
                          <div class="item-title">
                              <button type="button" data-type="la-docs-modal-trigger">
                                  <i class="fa fa-eye"></i>
                                  View Source
                              </button>
                          </div>
                      </div>
                      <div class="item">
                          <div class="item-inner">
                              <div class="item-loader-container">
                                  <div class="la-ball-scale-multiple">
                                      <div></div>
                                      <div></div>
                                      <div></div>
                                  </div>
                              </div>
                          </div>
                          <div class="item-title">
                              <button type="button" data-type="la-docs-modal-trigger">
                                  <i class="fa fa-eye"></i>
                                  View Source
                              </button>
                          </div>
                      </div>
                      <div class="item bg-light">
                          <div class="item-inner">
                              <div class="item-loader-container">
                                  <div style="color: #dfbc94" class="la-ball-scale-multiple">
                                      <div></div>
                                      <div></div>
                                      <div></div>
                                  </div>
                              </div>
                          </div>
                          <div class="item-title">
                              <button type="button" data-type="la-docs-modal-trigger">
                                  <i class="fa fa-eye"></i>
                                  View Source
                              </button>
                          </div>
                      </div>
                  </div>
                  <div class="items showroom auto-height">
                      <div class="item">
                          <h3>2X</h3>
                      </div>
                      <div class="item bg-light">
                          <div class="item-inner">
                              <div class="item-loader-container">
                                  <div class="la-ball-scale-multiple la-dark la-2x">
                                      <div></div>
                                      <div></div>
                                      <div></div>
                                  </div>
                              </div>
                          </div>
                          <div class="item-title">
                              <button type="button" data-type="la-docs-modal-trigger">
                                  <i class="fa fa-eye"></i>
                                  View Source
                              </button>
                          </div>
                      </div>
                      <div class="item">
                          <div class="item-inner">
                              <div class="item-loader-container">
                                  <div class="la-ball-scale-multiple la-2x">
                                      <div></div>
                                      <div></div>
                                      <div></div>
                                  </div>
                              </div>
                          </div>
                          <div class="item-title">
                              <button type="button" data-type="la-docs-modal-trigger">
                                  <i class="fa fa-eye"></i>
                                  View Source
                              </button>
                          </div>
                      </div>
                      <div class="item bg-light">
                          <div class="item-inner">
                              <div class="item-loader-container">
                                  <div style="color: #f4696b" class="la-ball-scale-multiple la-2x">
                                      <div></div>
                                      <div></div>
                                      <div></div>
                                  </div>
                              </div>
                          </div>
                          <div class="item-title">
                              <button type="button" data-type="la-docs-modal-trigger">
                                  <i class="fa fa-eye"></i>
                                  View Source
                              </button>
                          </div>
                      </div>
                  </div>
                  <div class="items showroom auto-height">
                      <div class="item">
                          <h3>3X</h3>
                      </div>
                      <div class="item bg-light">
                          <div class="item-inner">
                              <div class="item-loader-container">
                                  <div class="la-ball-scale-multiple la-dark la-3x">
                                      <div></div>
                                      <div></div>
                                      <div></div>
                                  </div>
                              </div>
                          </div>
                          <div class="item-title">
                              <button type="button" data-type="la-docs-modal-trigger">
                                  <i class="fa fa-eye"></i>
                                  View Source
                              </button>
                          </div>
                      </div>
                      <div class="item">
                          <div class="item-inner">
                              <div class="item-loader-container">
                                  <div class="la-ball-scale-multiple la-3x">
                                      <div></div>
                                      <div></div>
                                      <div></div>
                                  </div>
                              </div>
                          </div>
                          <div class="item-title">
                              <button type="button" data-type="la-docs-modal-trigger">
                                  <i class="fa fa-eye"></i>
                                  View Source
                              </button>
                          </div>
                      </div>
                      <div class="item bg-light">
                          <div class="item-inner">
                              <div class="item-loader-container">
                                  <div style="color: #84a5dd" class="la-ball-scale-multiple la-3x">
                                      <div></div>
                                      <div></div>
                                      <div></div>
                                  </div>
                              </div>
                          </div>
                          <div class="item-title">
                              <button type="button" data-type="la-docs-modal-trigger">
                                  <i class="fa fa-eye"></i>
                                  View Source
                              </button>
                          </div>
                      </div>
                  </div>
              </main>
              <main class="configuration">
                  <h2>Usage</h2>
                  <h3>HTML</h3>
                  <pre><code class="language-markup">&lt;div class="la-ball-scale-multiple"&gt;
  	&lt;div&gt;&lt;/div&gt;
  	&lt;div&gt;&lt;/div&gt;
  	&lt;div&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
                  <h3>CSS</h3>
                  <pre><code class="language-css">/*!
   * Load Awesome v1.1.0 (http://github.danielcardoso.net/load-awesome/)
   * Copyright 2015 Daniel Cardoso &lt;@DanielCardoso&gt;
   * Licensed under MIT
   */
  .la-ball-scale-multiple,
  .la-ball-scale-multiple &gt; div {
      position: relative;
      -webkit-box-sizing: border-box;
         -moz-box-sizing: border-box;
              box-sizing: border-box;
  }
  .la-ball-scale-multiple {
      display: block;
      font-size: 0;
      color: #fff;
  }
  .la-ball-scale-multiple.la-dark {
      color: #333;
  }
  .la-ball-scale-multiple &gt; div {
      display: inline-block;
      float: none;
      background-color: currentColor;
      border: 0 solid currentColor;
  }
  .la-ball-scale-multiple {
      width: 32px;
      height: 32px;
  }
  .la-ball-scale-multiple &gt; div {
      position: absolute;
      top: 0;
      left: 0;
      width: 32px;
      height: 32px;
      border-radius: 100%;
      opacity: 0;
      -webkit-animation: ball-scale-multiple 1s 0s linear infinite;
         -moz-animation: ball-scale-multiple 1s 0s linear infinite;
           -o-animation: ball-scale-multiple 1s 0s linear infinite;
              animation: ball-scale-multiple 1s 0s linear infinite;
  }
  .la-ball-scale-multiple &gt; div:nth-child(2) {
      -webkit-animation-delay: .2s;
         -moz-animation-delay: .2s;
           -o-animation-delay: .2s;
              animation-delay: .2s;
  }
  .la-ball-scale-multiple &gt; div:nth-child(3) {
      -webkit-animation-delay: .4s;
         -moz-animation-delay: .4s;
           -o-animation-delay: .4s;
              animation-delay: .4s;
  }
  .la-ball-scale-multiple.la-sm {
      width: 16px;
      height: 16px;
  }
  .la-ball-scale-multiple.la-sm &gt; div {
      width: 16px;
      height: 16px;
  }
  .la-ball-scale-multiple.la-2x {
      width: 64px;
      height: 64px;
  }
  .la-ball-scale-multiple.la-2x &gt; div {
      width: 64px;
      height: 64px;
  }
  .la-ball-scale-multiple.la-3x {
      width: 96px;
      height: 96px;
  }
  .la-ball-scale-multiple.la-3x &gt; div {
      width: 96px;
      height: 96px;
  }
  /*
   * Animation
   */
  @-webkit-keyframes ball-scale-multiple {
      0% {
          opacity: 0;
          -webkit-transform: scale(0);
                  transform: scale(0);
      }
      5% {
          opacity: .75;
      }
      100% {
          opacity: 0;
          -webkit-transform: scale(1);
                  transform: scale(1);
      }
  }
  @-moz-keyframes ball-scale-multiple {
      0% {
          opacity: 0;
          -moz-transform: scale(0);
               transform: scale(0);
      }
      5% {
          opacity: .75;
      }
      100% {
          opacity: 0;
          -moz-transform: scale(1);
               transform: scale(1);
      }
  }
  @-o-keyframes ball-scale-multiple {
      0% {
          opacity: 0;
          -o-transform: scale(0);
             transform: scale(0);
      }
      5% {
          opacity: .75;
      }
      100% {
          opacity: 0;
          -o-transform: scale(1);
             transform: scale(1);
      }
  }
  @keyframes ball-scale-multiple {
      0% {
          opacity: 0;
          -webkit-transform: scale(0);
             -moz-transform: scale(0);
               -o-transform: scale(0);
                  transform: scale(0);
      }
      5% {
          opacity: .75;
      }
      100% {
          opacity: 0;
          -webkit-transform: scale(1);
             -moz-transform: scale(1);
               -o-transform: scale(1);
                  transform: scale(1);
      }
  }
  </code></pre>
              </main>
              <!-- !REMOVE_VIEW_HOME -->
              <main class="la-docs-footer">
                  <footer>
                      <ul class="la-docs-footer-links">
                          <li>
                              Load Awesome 1.1.0
                          </li>
                          <li>·</li>
                          <li>Created by <a href="https://twitter.com/DanielCardoso" target="_blank">@DanielCardoso</a></li>
                          <li>·</li>
                          <li>Licensed under
                              <a rel="license" href="https://github.com/danielcardoso/load-awesome/blob/master/LICENSE" target="_blank">
                                  MIT
                              </a>
                          </li>
                      </ul>
                      <ul class="la-docs-footer-links">
                          <li><a href="https://github.com/danielcardoso/load-awesome" target="_blank">GitHub Project</a></li>
                          <li>·</li>
                          <li><a href="https://github.com/danielcardoso/load-awesome/blob/master/CHANGELOG" target="_blank">Changelog</a></li>
                          <li>·</li>
                          <li><a href="https://github.com/danielcardoso/load-awesome/issues" target="_blank">Issues</a></li>
                          <li>·</li>
                          <li><a href="https://github.com/danielcardoso/load-awesome/releases" target="_blank">Releases</a></li>
                      </ul>
                  </footer>
              </main>
          </div>
      </div>
      <!-- REMOVE_VIEW_HOME -->
      <div class="la-docs-modal">
          <div class="la-docs-modal-body">
              <h3>HTML Markup</h3>
              <div class="la-docs-modal-content"></div>
              <button type="button" class="la-docs-modal-close">Close Me!</button>
          </div>
      </div>
      <div class="la-docs-modal-dropdown"></div>
      <!-- !REMOVE_VIEW_HOME -->
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
      <script src="../assets/plugins.min.js"></script>
      <script src="../assets/script.min.js"></script>
  </body>
  </html>