Skip to content
Primer/ViewComponents
What's new
Design
Interface guidelinesOcticonsPresentationsCommand lineMobileDesktop
Build
CSSReactViewComponents
ContributeAbout
Getting started
ContributingSystem argumentsLintingMigrationComponent status
Components
AutoCompleteAutoCompleteItemAvatarAvatarStackBlankslateBorderBoxBoxBreadcrumbsButtonButtonGroupButtonMarketingClipboardCopyCloseButtonCounterDetailsDropdownDropdownMenuFlashFlexFlexItemHeadingHiddenTextExpanderIconButtonImageImageCropLabelLayoutLinkLocalTimeMarkdownMenuOcticonOcticonSymbolsPopoverProgressBarSpinnerStateSubheadTabContainerTabNavTabPanelsTextTimeAgoTimelineItemTruncateUnderlineNavUnderlinePanels
Architecture decisions
Developing and publishing client-side behaviours251. Use Catalyst for client-side behaviours
GitHub
On this page
  • Arguments
  • Examples

Spinner

Beta
View sourceView storybook
On this page
  • Arguments
  • Examples

Use Spinner to let users know that content is being loaded.

Arguments

NameTypeDefaultDescription
sizeSymbol:mediumOne of [:large, 64], [:medium, 32], or [:small, 16].
styleStringbox-sizing: content-box; color: var(--color-icon-primary);Custom element styles.
system_argumentsHashN/ASystem arguments

Examples

Default

<%= render(Primer::SpinnerComponent.new) %>

Small

<%= render(Primer::SpinnerComponent.new(size: :small)) %>

Large

<%= render(Primer::SpinnerComponent.new(size: :large)) %>
Edit this page on GitHub