Lexicon
LexiconLexicon
v 2.0v 1.0
  • Get Started
  • Foundations
    • Animations
    • Color
    • Grid
    • Layout
      • Full Box
      • Cards Layout
      • Form Box
      • Sidebar + Box
    • Typography
    • Writing Style
  • Core Components
    • Actions Definition
    • Alerts
    • Badges
    • Buttons
    • Cards
    • Charts
      • Charts
      • Colors
      • Interaction
      • Bar Chart
      • Donut Chart
      • Heatmap Chart
      • Line Chart
      • Pie Chart
      • Predictive Forecast Chart
      • Stacked Bar Chart
    • Confirmation Message
    • Dataset Display
    • Drag and Drop
    • Dropdown Menu
    • Empty States
    • Forms
      • Forms
      • Forms Hierarchy
      • Forms Navigation
      • Forms Rules
      • Forms Validation
      • Checkbox, Radio, Toggle
      • Color Picker
      • Date & Time Pickers
      • Multi Step Form
      • Multi Step Form Simplified
      • Selectors
      • Slider
      • Text Input
      • Text Input Group
      • Text Input Localizable
      • Text Input Variations
    • Icons
    • Labels
    • Link
    • List
    • Loading Indicator
    • Modals
    • Navigation
      • Breadcrumb
      • Navbar
      • Vertical Navigation
    • Pagination
    • Popovers and Tooltips
    • Progress Bar
    • Sidebar
    • Stickers
    • Table
      • Table
      • Inline Edit Table
    • Tabs
    • Toolbars
      • Toolbar
      • Management Toolbar
      • Upper Toolbar
  • Satellite Components
    • File Upload
    • Image Selector
    • Miller Columns
    • Navigation
      • Navigation
      • Header
    • Sidebar
      • Info Panel
      • Product Menu
    • Sites
      • Sites
      • Asset Title Bar
      • Asset Toolbar
      • Buttons
      • Profile Info
      • Widget Title Bar
  • Templates
    • Dataset Template
    • Form Template
  • Examples
    • Asset Metrics Dashboard
    • Page Distribution
    • Partner Portal
  • News
    • News
    • Status
  • Resources

Loading Indicator

Portal
The loading indicator shows the user that an external process, like a connection, is being executed.

Usage

Use the loading indicator to inform the user that there is pending content from the server that will load where the indicator is displayed. Without this indicator, the user can feel lost or navigate away from the page prematurely.

Please don’t use loading indicators inside buttons. If you need a loading indicator for an action triggered by a button, place the loading indicator on one of the sides of the button.

Types

Default

loading indicator default size

Size

Use the sizes below to respond to different device sizes:

SizeDescription
Small10px
Default16px
Medium32px
Large64px

Variations

Positive

loading indicator default positive

Negative

loading indicator default negative

Except as otherwise noted, the content of this site is licensed under CC BY-SA 4.0 license.