mvcss-states.md

Modals

Default (not showing)

<div class="modal">
  <!-- modal stuff -->
</div>

Active (showing)

<div class="modal is-showing">
  <!-- modal stuff -->
</div>

Navigation

<nav>
  <li>
    <a class="nav-link is-active">Courses</a>
  </li>
  <li>
    <a class="nav-link">Quizzes</a>
  </li>
</nav>

Content Loading

Default (not loading)

<section class="section">
  <!-- not showing -->
  <div class="spinner"></div>
</section>

Loading

<section class="section is-loading">
  <!-- showing -->
  <div class="spinner"></div>
</section>

Notes

In order for animations to work, the markup should exist on the page already.