Loading indicator

Loading…

<p class="loading" style="font-size: 2em;">Loading…</p>

32 pixels

Loading…

<p class="loading" style="font-size: 1.5em;">Loading…</p>

24 pixels

Loading…

<p class="loading" style="font-size: 1.25em;">Loading…</p>

20 pixels

Loading…

<p class="loading" style="font-size: 1.125em;">Loading…</p>

18 pixels

Loading…

<p class="loading" style="font-size: 1em;">Loading…</p>

16 pixels

Loading…

<p class="loading" style="font-size: 0.875em;">Loading…</p>

14 pixels

Loading…

<p class="loading" style="font-size: 0.75em;">Loading…</p>

12 pixels

On post detail pages


<form action="" method="post" class="vote loading">
  <p><button type="submit" title="Promote this">It’s GOOD</button></p>
</form>

In lists of activities

<div class="meta">
  <form action="" method="post" class="vote loading">
    <p><button type="submit" title="Promote this">It’s GOOD</button></p>
  </form>
</div>

Primary Button

<form>
  <p class="submit">
    <button type="submit">
      <span class="loading"></span>
    </button>
  </p>
</form>

Secondary Button

<form>
  <p class="submit">
    <button type="submit">
      <span class="loading"></span>
    </button>
  </p>
</form>

Form Message

<form>
  <p class="loading">Posting Do...</p>
</form>

Invite friends

GOOD is better with friends

Bring awesome people on board.

Invite Facebook friends

Image upload

<form action="" method="post" class="comment-form">
  <ol class="images">
    <li class="progress">
      …
      <progress max="100" value="80">80% Loaded</progress>
    </li>
  </ol>
</form>