.animate

Using the .animate class on an element will enable CSS transitions. We use a duration of .125 seconds and timing function of ease to keep animations quick, subtle and responsive.

<a href='#fakelink' class='btn btn-loud animate'>Buy me</a>

Progress Spinner

Use progress spinner to provide feedback to users while a process is running. The .dark version uses a gray color scheme.

.dark
<svg class='loader'>
  <circle cx='15' cy='15' r='7' />
</svg>

<div class='fill-dark dark'>
  <svg class='loader'>
    <circle cx='15' cy='15' r='7' />
  </svg> 
</div>

Progress Fallbacks

Animated SVG are not supported in IE8 or IE9. If you need to support legacy browsers use the .spinner class instead.

.dark
<span class='spinner'></span>

<div class='fill-dark dark'>
  <span class='spinner'></span> 
</div>

Off-canvas

Off-canvas menus are positioned outside of the viewport and slide in when activated.

.offcanvas-top
Show
.offcanvas-bottom
Show
.offcanvas-left
Show
.offcanvas-right
Show
<div class='col-sm-12 pad4 center clip contain fill-gray'>
  <a href='#fakelink' class='btn btn-primary' data-toggle='offcanvas' data-target='#target1'>Show</a>
  <div id='target1' class='animate offcanvas-top pin-top keyline-bottom fill-light pad2'>
    <a href='#fakelink' class='btn btn-primary' data-dismiss='offcanvas'>
      <i class='icon icon-remove'></i>
    </a>
  </div>
</div>            

<div class='col-sm-12 pad4 center clip contain fill-gray'>
  <a href='#fakelink' class='btn btn-primary' data-toggle='offcanvas' data-target='#target2'>Show</a>
  <div id='target2' class='animate offcanvas-bottom pin-bottom keyline-top fill-light pad2'>
    <a href='#fakelink' class='btn btn-primary' data-dismiss='offcanvas'>
      <i class='icon icon-remove'></i>
    </a>
  </div>
</div>

<div class='col-sm-12 pad4 center clip contain fill-gray'>
  <a href='#fakelink' class='btn btn-primary' data-toggle='offcanvas' data-target='#target3'>Show</a>
  <div id='target3' class='animate offcanvas-left pin-left col-sm-4 keyline-right fill-light pad2 pad4y'>
    <a href='#fakelink' class='btn btn-primary' data-dismiss='offcanvas'>
      <i class='icon icon-remove'></i>
    </a>
  </div>
</div>

<div class='col-sm-12 pad4 center clip contain fill-gray'>
  <a href='#fakelink' class='btn btn-primary' data-toggle='offcanvas' data-target='#target4'>Show</a>
  <div id='target4' class='animate offcanvas-right pin-right col-sm-4 keyline-left fill-light pad2 pad4y'>
    <a href='#fakelink' class='btn btn-primary' data-dismiss='offcanvas'>
      <i class='icon icon-remove'></i>
    </a>
  </div>
</div>

Horizontal sliding

Add swift sliding animations with the .sliding class. Add an .h class for horizontal animation.

Home!
Profile!
Messages!
<div class='clearfix col-sm-12'>
  <div class='btn-group tabs col-sm-8 col-sm-offset-2 space-bottom'>
    <a href='#home' class='btn btn-primary active col-sm-4' data-toggle='tab'>Home</a>
    <a href='#profile' class='btn btn-primary col-sm-4' data-toggle='tab'>Profile</a>
    <a href='#messages' class='btn btn-primary col-sm-4' data-toggle='tab'>Messages</a>
  </div>
  <div class='tab-content sliding h col-sm-12 fill-green dark center clip' style='height: 100px;'>
    <div class='tab-pane active animate col-sm-12 pad4y' id='home'>Home!</div>
    <div class='tab-pane animate col-sm-12 pad4y fill-darken1' id='profile'>Profile!</div>
    <div class='tab-pane animate col-sm-12 pad4y fill-darken2' id='messages'>Messages!</div>
  </div>
</div>

Vertical sliding

Add swift sliding animations with the .sliding class. Add a .v class for vertical animation.

Home!
Profile!
Messages!
<div class='clearfix col-sm-12'>
  <div class='btn-group tabs col-sm-8 col-sm-offset-2 space-bottom'>
    <a href='#home2' class='btn btn-primary active col-sm-4' data-toggle='tab'>Home</a>
    <a href='#profile2' class='btn btn-primary col-sm-4' data-toggle='tab'>Profile</a>
    <a href='#messages2' class='btn btn-primary col-sm-4' data-toggle='tab'>Messages</a>
  </div>
  <div class='tab-content sliding v col-sm-12 fill-green dark center clip' style='height: 100px;'>
    <div class='tab-pane active animate col-sm-12 pad4' id='home2'>Home!</div>
    <div class='tab-pane animate col-sm-12 pad4 fill-darken1' id='profile2'>Profile!</div>
    <div class='tab-pane animate col-sm-12 pad4 fill-darken2' id='messages2'>Messages!</div>
  </div>
</div>
Made with in Norcross by the UX Team.