• Design
  • Develop
  • Components
  • Branches
  • Resources
    1. Most common searches:
    2. Components
    3. Input Fields
    4. Icons
    5. Changelog
    6. Data Tables
  • About
  • News
    • Contribute
        • Overview
        • Palette
        • Combinations
        • Resources
      • Content
        • Spacing methods
        • Baseline grid
        • Tokens
        • Text modules
        • Responsive layout grid
        • Usage
        • Baseline grid
      • Spacing
        • Versions
        • Clear space and minimum size
        • Placement
        • Examples
        • Assets
        • Typeface overview
        • Font size unit
        • Primary Typeface
        • Principles for headlines and sub-headings
        • Text Weight Principles
        • Readability and typographic rules
        • Fallback typeface
        • Assets
        • Text flow
        • Learn more
        • Colors
        • Types
        • Usage
        • Behaviours
        • Accessibility
        • Anatomy
        • Further reading
        • Style overview
        • Categories
        • Color and background
        • Sizes
        • Usage
        • Palette
      • Data presentation
      • Selection controls
        • Overview
        • Testing
        • Extensions
        • Screen readers
        • Automated
      • States
        • Overview
        • Style
        • Validation
        • Anatomy
        • Related
      • Discovery vs browsing
    • Visual Identity
      • Assets
        • Figma
          • Grid
      • Install Design kits
      • Learn about our foundational gudelines
      • Review our usage guidelines
      • Setup
      • CSS
      • React
      • Other frameworks
      • JavaScript
      • Web Component
      • Set up
      • Dev server
      • Creating a component
      • Styling a component
      • Documenting
      • Add icon
      • Troubleshooting
      • Browser support
      • Globals
      • Links and buttons
      • Semantic components
    • Repositories and Tools
      • Guidelines
      • Usage
          • Usage
          • Usage
        • Overview
        • Variations
        • Usage
        • Default floating action button
        • Primary floating action button
          • Usage
          • Tokens
        • Overview
        • Variations
        • Usage
        • Specs
        • Anatomy
        • States
          • Accessibility
          • Usage
          • Api
          • Usage
          • Accessibility
          • Tokens
        • Usage
        • Behaviours
        • Anatomy
        • Specs
          • Usage
          • Tokens
        • Overview
        • Usage
        • Behaviours
        • Anatomy
        • Specs
          • Usage
          • Tokens
          • Accessibility
        • Overview
        • Variations
        • Usage
        • Behaviours
        • Anatomy
        • Specs
          • Usage
          • Tokens
        • Overview
        • Variations
        • Behaviours
        • Usage
        • Anatomy
        • Specs
          • Usage
          • Usage
          • Accessibility
        • Behaviours
        • Anatomy
        • Specs
          • Usage
          • Accessibility
          • Tokens
        • Overview
        • Usage
        • Behaviours
        • Modifiers
        • Specs
        • Anatomy
        • Accessibility
        • Classnames
        • App development
        • Tokens
        • Implementation
          • Usage
        • Usage
          • Usage
          • Accessibility
        • Overview
        • Usage
        • Anatomy
        • Specs
          • Usage
          • Tokens
          • Usage
          • Api
        • Variations
        • Usage
        • Behaviours
        • Accessibility
        • Anatomy
        • Specs
        • Resources
          • Usage
          • Tokens
        • Usage
        • Anatomy
        • Specs
          • Usage
          • Tokens
        • Overview
        • Variations
        • Usage
        • Indeterminate
        • Determinate
        • Small
          • Usage
          • Modifiers
          • Tokens
        • Overview
        • Usage
        • Behaviours
        • Anatomy
          • Usage
          • Accessibility
          • Tokens
        • Usage
        • Anatomy
        • Specs
          • Usage
        • Overview
        • Usage
        • Behaviours
        • Anatomy
        • Specs
          • Usage
          • Tokens
          • Usage
        • Overview
        • Variations
        • Input
        • Button
        • Drag and drop
        • File list
        • Related links
          • Usage
          • Accessibility
        • Usage
        • Behaviours
        • Anatomy
        • Specs
          • Usage
          • Usage
          • Api
        • Overview
        • Usage
        • Behaviours
        • Anatomy
        • Specs
          • Usage
          • Usage
          • Api
        • Usage
        • Accessibility
        • Anatomy
        • Specs
          • Usage
          • Tokens
        • Overview
        • Usage
        • Behaviours
        • Anatomy
          • Usage
        • Overview
        • Variations
        • Usage
        • Behaviours
        • Anatomy
        • Specs
        • Global header
          • Usage
          • Accessibility
        • Usage
        • Anatomy
        • Specs
          • Usage
        • Overview
        • Usage
        • Behaviours
        • Anatomy
          • Features
          • Usage
          • Api
          • Usage
          • Modifiers
          • Tokens
        • Overview
        • Variations
        • Usage
        • Behaviours
        • Autocomplete string
        • Autocomplete tags
        • Accessibility
        • Anatomy
        • Specs
        • Related links
          • Usage
          • Api
          • Usage
          • Usage
          • Frameworks
          • Accessibility
          • Options
        • Usage
        • Operational states
        • Anatomy
        • Specs
          • Usage
          • Tokens
          • Accessibility
        • Overview
        • Usage
        • Behaviours
        • Anatomy
          • Usage
          • Accessibility
          • Tokens
        • Overview
        • Usage
        • Behaviours
        • Anatomy
        • Specs
          • Usage
          • Tokens
        • Usage
        • Behaviours
        • Anatomy
        • Specs
          • Tokens
          • Mixins
          • App development
          • Usage
          • Tokens
        • Overview
        • Types
        • Options
          • Usage
          • Modifiers
          • Tokens
        • Overview
        • Usage
        • Behaviours
        • Specs
          • Usage
          • Modifiers
          • Tokens
        • Avatar
        • Variations
        • Usage
        • Default
        • Headshot
        • Initials
        • Behaviours
          • Usage
          • Mixins
          • Tokens
          • App development
          • Accessibility
          • Usage
          • Assets
        • Usage
        • Downloads
          • Usage
        • Overview
        • Variations
        • Usage
        • Overlay
        • Controls
        • Transcript
        • States
        • Anatomy
          • Usage
          • Accessibility
          • Features
          • Usage
          • Api
        • Overview
        • Usage
        • Behaviours
        • Accessibility
        • Anatomy
        • Specs
          • Usage
        • Usage
        • Anatomy
          • Usage
          • Accessibility
          • Tokens
          • Features
          • Usage
          • Api
        • Overview
        • Usage
        • Behaviours
        • Anatomy
        • Specs
          • Usage
        • Overview
        • Usage
        • Behaviours
        • Anatomy
        • Specs
          • Usage
          • Accessibility
        • Overview
        • Variations
        • Default
        • Dots
        • Accessibility
          • Usage
          • Tokens
        • Overview
        • Usage
        • Behaviour
        • Anatomy
        • Specs
          • Usage
          • Accessibility
        • Overview
        • Usage
        • Behaviours
        • Anatomy
        • Specs
          • Modifiers
          • Truncation
          • Features
          • Usage
          • Api
        • Variations
        • Usage
        • Behaviours
        • Anatomy
        • Specs
        • Resources
          • Usage
          • Accessibility
          • Tokens
        • Overview
        • Usage
        • Behaviours
        • Anatomy
        • Specs
          • Usage
          • Tokens
        • Usage
        • Accessible download links
        • States
          • Usage
        • Overview
        • Usage
        • Behaviours
        • Accessibility
        • Anatomy
          • Usage
          • Tokens
          • Usage
        • Overview
        • Usage
        • Accessibility
        • Anatomy
          • Usage
          • Usage
          • Usage
          • Tokens
        • Usage
        • Anatomy
        • Accessibility
        • Specs
          • Usage
          • Api
          • Usage
          • Usage
          • Accessibility
          • Tokens
        • Overview
        • Usage
        • Behaviours
        • Anatomy
        • Specs
        • Accessibility
          • Usage
        • Usage
        • Anatomy
        • Specs
          • Usage
        • Usage
        • Anatomy
        • Specs
          • Usage
          • Accessibility
        • Overview
        • Usage
        • Anatomy
        • Specs
          • Usage
          • Usage
        • Overview
        • Usage
        • Behaviours
        • Anatomy
        • Implementation
          • Usage
        • Overview
        • Usage
        • Modifiers
        • Anatomy
        • Specs
          • Usage
          • Tokens
          • Accessibility
          • Usage
          • Api
        • Overview
        • Variations
        • Usage
        • Behaviours
        • Anatomy
        • Specs
          • Usage
        • Overview
        • Usage
        • Behaviours
        • Anatomy
        • Specs
          • Usage
          • Tokens
        • Overview
        • Usage
        • Behaviours
        • Anatomy
        • Specs
          • Usage
        • Overview
        • Variations
        • Usage
        • Anatomy
        • Specs
          • Usage
          • Usage
          • Usage
          • Tokens
          • Accessibility
        • Usage
        • Behaviours
        • Anatomy
        • Specs
          • Usage
          • Accessibility
          • Tokens
        • Overview
        • Variations
        • Usage
        • Open pages
        • My pages
        • My Business
        • Co-branding
        • Search
          • Usage
          • Tokens
        • Overview
        • Usage
        • Anatomy
        • Specs
          • Usage
          • Accessibility
          • Tokens
          • Features
          • Usage
        • Overview
        • Usage
          • Usage
        • Usage
        • States
        • Anatomy
        • Responsive
        • Specs
          • Features
          • Usage
          • Usage
          • Behaviours
          • Accessibility
          • Responsive
          • Tokens
        • Overview
        • Principles
        • Variations
        • Usage
        • Behaviours
        • Responsive
        • Anatomy
        • Specs
          • Usage
          • Accessibility
          • Resources
        • Usage
        • Anatomy
        • Specs
          • Usage
          • Mixins
          • Classnames
          • Tokens
          • App development
          • API
          • Usage
          • Tokens
        • Overview
        • Variations
        • Usage
        • Category tags
        • Filter tags
        • Input tags
        • Status tags
        • Responsive
        • Spacing
        • Hidden
        • Tokens
        • App development
        • Text alignment
        • Code
        • Api
        • Usage
        • Tokens
      • Overview
      • Legend
      • Infographics
      • Charting libraries
        • Tokens
        • Usage
        • Tokens
      • Overview
      • Usage
      • Anatomy
    • Downloads
  • Changelog
  • Components
      • Button
        • CSS
      • Contextual Menu
        • JavaScript
        • CSS
      • Floating Action Button
        • CSS
        • JavaScript
      • Icon Button
        • CSS
      • Disclosure Card
        • JavaScript
        • CSS
      • Editorial Card
        • CSS
      • Info card
        • CSS
      • Navigational Card
        • CSS
      • CSS
    • Data Visualization
      • CSS
      • Alert Banner
        • CSS
      • Consent Banner
      • Loader
        • CSS
      • Progress Tracker
        • CSS
      • Status Indicator
        • CSS
      • Toast
        • CSS
        • Web Component
      • Autocomplete
        • JavaScript
        • CSS
      • Checkbox
        • CSS
      • Datepicker
        • JavaScript
        • Web Component
        • CSS
      • Dropdown Filter
        • CSS
      • Dropdown Select
        • CSS
      • File Upload
        • CSS
        • JavaScript
      • Input Fields
        • CSS
      • Input Label
        • CSS
      • Numeric Stepper
        • CSS
        • JavaScript
      • Phonenumber
        • CSS
        • Web Component
      • Radio Buttons
        • CSS
      • Search Field
        • CSS
      • Segmented Control
        • CSS
      • Slider
        • CSS
      • Textarea
        • CSS
      • Toggle
        • CSS
        • CSS
      • Grid
        • CSS
      • Section
        • CSS
      • Avatar
        • CSS
      • Icons
        • CSS
      • Logo
        • CSS
      • Video
        • CSS
      • Accordion Menu
        • CSS
        • JavaScript
      • Breadcrumbs
        • CSS
      • Dropdown Menu
        • CSS
        • JavaScript
      • Link
        • CSS
      • Link List
        • CSS
      • Pagination
        • CSS
      • Shortcuts
        • CSS
      • Sidebar Menu
        • CSS
      • Tabs
        • CSS
        • JavaScript
      • Tooltip Menu
        • CSS
      • Help Tooltip
        • CSS
      • Modal
        • JavaScript
        • Web Component
        • CSS
      • Popover
        • JavaScript
        • Web Component
        • CSS
      • Tooltip
        • CSS
        • JavaScript
      • Banner
        • CSS
      • FAQ
        • JavaScript
        • Web Component
        • CSS
      • Global Footer
        • CSS
      • Global Header
        • CSS
      • Global Minimal Header
        • CSS
      • Header
        • CSS
      • Hero
        • CSS
      • Hero Navigation
        • CSS
        • JavaScript
      • Panel
        • CSS
        • JavaScript
      • Quick Facts
        • CSS
      • Split
        • CSS
      • Timeline
        • CSS
      • Comparison Table
        • CSS
        • JavaScript
      • Data Tables
        • JavaScript
        • CSS
      • Product Matrix Table
        • CSS
      • Blockquote
        • CSS
      • Tag
        • JavaScript
        • CSS
        • CSS
      • CSS
      • JavaScript
  • Design
    • Contribute
    • Foundation
      • Color
      • Content
      • Data Visualization
      • Icons
      • Layout
      • Logotype
      • Spacing
      • Typography
    • Getting started
      • Assets
      • Design kits
        • Figma
        • XD
    • Guidelines
      • Accessibility
      • Data presentation
      • Discovery vs browsing
      • Forms
      • Selection controls
      • States
    • Visual Identity
  • Develop
    • Contribute
      • Add icon
      • Creating a component
      • Dev server
      • Documenting
      • Set up
      • Styling a component
      • Troubleshooting
    • Design tokens
    • Frameworks
      • CSS
      • JavaScript
      • Other frameworks
      • React
      • Web Component
    • Getting Started
      • Setup
    • Guidelines
      • Browser support
      • Globals
      • Links and buttons
      • Semantic components
    • Repositories and Tools
  • Resources
    • Downloads
  • About
  • News
  • Changelog
Back to components

Loader

Bundle

  • CSS Component
  • CSS component
Preview
  • Download loaders All of our loads bundled

Table of Contents

  • Loader
  • Usage
Edit this section, Opens in new window

Usage

Sizing

Small
Default
Large
Largest
Be careful not to use a loader with a low contrast color
Use the best contrast color for the loader

Colors

BR 1, BROWN
BE 5, LIGHTEST BEIGE
BL 1, BLUE
Edit this section, Opens in new window
Contact us, Opens in new window
  • Home
  • About
  • News
  • Changelog
  • Design board, Opens in new window
  • Cookie policy, Opens in new window
  • Cookie Settings