Skip to content
Indiana University Logo
Rivet Design System
  • Components Add-ons Content guide
  • What is Rivet? Blog Roadmap Changelog
  1. February 25, 2021

    Rivet 1.8.0 release

    Rivet 1.8.0 is now available. This release adds border removal utility classes and fixes bugs related to the button, dropdown, and collapsible components.

  2. February 15, 2021

    Rivet announcements: Beta timeline, GitHub Discussions, and 1.8.0 release

    Updates about Rivet's development in the spring and beyond.

  3. January 20, 2021

    Rivet featured on Accessible Code Libraries and Design Patterns list

    Rivet was highlighted alongside the U.S. government, GOV.UK, and Salesforce design systems.

More posts Get updates in your inbox
Install via NPM Download CSS & JS Hosted assets
Navigation
    • Components
    • Add-ons
    • Content guide
    • What is Rivet?
    • Blog
    • Roadmap
    • Changelog
  • Use Rivet
Resources
  • User Experience Office
  • Accessibility Evaluations
  • Rivet Software Design System
  • IU Framework for WCMS
Version 1.8.0
  • Information
    • Roadmap
    • Changelog
    • Component status
    • Contributing
  • Getting started
    • Install with NPM
    • Rivet Sass
  • Layout
    • Box
    • Grid
    • Panels
    • Spacing
    • Typography
  • Page content
    • Badges
    • Links
    • Lists
    • Media Object
    • Step Indicator
    • Tables
    • Tabs This component requires JS
    • Timeline
  • Forms
    • Buttons
    • Segmented Buttons
    • Checkboxes
    • File input This component requires JS
    • Input group
    • Radio buttons
    • Select element
    • Text inputs
  • Navigation
    • Breadcrumb
    • Dropdown This component requires JS
    • Footer
    • Header This component requires JS
    • Menu
    • Pagination
  • Overlays & Feedback
    • Alerts This component requires JS
    • Loading indicator
    • Modals This component requires JS
  • Utilities
    • Border
    • Display
    • Flex
    • Text
    • Visibility
    • Width
    • z-index
Ready Added in 1.2.0

Loading indicator

The Rivet loading indicator helps notify users when their action is being processed

New in Rivet 1.2.0

The loading indicator is new as of 1.2.0. If you need help moving to 1.2.0, see our instructions for updating Rivet.

Default

<div class="rvt-loader" aria-label="Content loading"></div>

The loading indicator can be used to indicate the loading of page content, such as when a single page application makes a request for new content. The loading indicator element does not come with any specific positioning styles, so you’ll need to position it appropriately in the container where your content will eventually display once it’s loaded.

Using the loading indicator inside buttons

It can be helpful to indicate that the submit button is in an inactive/loading state, such as when a user submits a form and the data is being sent to the server. The loading indicator can be used inside of buttons by applying the .rvt-button--loading modifier class.

Button loading state

While the button is in the loading state, the aria-busy="true" and disabled attributes should be applied. This helps prevent users from trying to resubmit data while the current form is being submitted.

<button class="rvt-button rvt-button--loading" aria-busy="true" disabled>
  <span class="rvt-button__content">Update settings</span>
  <div class="rvt-loader rvt-loader--xs" aria-label="Content loading"></div>
</button>

Handling button text display while in the loading state

When using the loading indicator inside buttons, the visible button text should be wrapped in a .rvt-button__content class (see above example). This class visually hides the button text when the loading indicator is visible while maintaining the display width of the button. This class also hides any other content inside the button, such as SVG icons.

Class deprecation

In previous versions of Rivet, we used the .rivet-button__text class to wrap a button’s content. However, we realized that the class name implied that non-text button content such as icons did not need to be wrapped to be hidden.

If you are using .rivet-button__text, please update your application to use the new .rivet-button__content class, as the previous class is now deprecated.

Loading indicator sizes

The loading indicator comes in multiple sizes that follow the standard Rivet size naming conventions used for spacing and typography.

  • rvt-loader--xxs
  • rvt-loader--xs - The default size. Same as rvt-loader with no modifier. NOTE: This is the only size usable inside a button.
  • rvt-loader--sm
  • rvt-loader--md
  • rvt-loader--lg
  • rvt-loader--xl
  • rvt-loader--xxl
<div class="rvt-loader rvt-loader--xxs" aria-label="Content loading"></div>
<div class="rvt-loader rvt-loader--xs" aria-label="Content loading"></div>
<div class="rvt-loader rvt-loader--sm" aria-label="Content loading"></div>
<div class="rvt-loader rvt-loader--md" aria-label="Content loading"></div>
<div class="rvt-loader rvt-loader--lg" aria-label="Content loading"></div>
<div class="rvt-loader rvt-loader--xl" aria-label="Content loading"></div>
<div class="rvt-loader rvt-loader--xxl" aria-label="Content loading"></div>

On this page

    • Default
    • Using the loading indicator inside buttons
      • Button loading state
      • Handling button text display while in the loading state
    • Loading indicator sizes
Have a question about Rivet?

We're happy to help! If you've found a bug, typo, or have a request, the best way to get in touch is to create an issue on Github.

For all other questions please feel free to email us at rivet@iu.edu

  • Accessibility
  • Privacy Notice
  • Copyright © The Trustees of Indiana University