Base

  • Colors
  • Icons
  • Logos
  • Shadows and Elevations
  • Spacing
  • Typography

Components

  • Accordion
  • Avatars
  • Badges
  • Buttons
  • Cards
  • Character Counter
  • Device Type Icons
  • Draggables
  • Dropdowns
  • Droppables
  • Expandable image
  • Filters
  • Gallery card
  • Icon Button
  • Indicators
  • Lightbox image
  • Lists
  • Loading
  • Messages
  • Pictogram
  • Poster Play
  • Progress bar
  • QR Code
  • Rating stars
  • Row Selector
  • Segmented Controls
  • Sentiment
  • Split View
  • Tables
  • Tags
  • Tester vitals
  • Toggle button
  • Typeahead

Form

  • Card Select
  • Checkbox
  • Combobox
  • Form Rule
  • Hint
  • Input
  • Input Title
  • Label
  • Multi-select List
  • Search
  • Select
  • Single-select List
  • Sliders
  • Switch
  • Text Area

Layout

  • Containers
  • Layers
  • Layout
  • Split Layout
  • Wrappers

Navigation

  • Context Switcher
  • Nav bar
  • Navigation
  • Pagination
  • Sidebar Navigation
  • Step Navigation
  • Tabs

Overlay

  • Banners
  • Bulk Selector
  • Modals
  • Popovers
  • Toast
  • Tooltips
  • User Notifications

Patterns

  • Full Page Message
  • Question card & Group Questions Container

Visualizations

  • Data Colors

Loading

A visual indicator that a process is happening in the background but the interface is not yet ready for interaction.

This component is deprecated! Please use the new Loading instead.

Old component won’t get updates unless extraordinary circumstances require otherwise → reach out to our PO to discuss it.

New component should always be used unless extraordinary circumstances require otherwise → reach out to our PO to discuss it.

If you are looking to migrate this component and require help, reach out to the #ask-design-system Slack channel.

Default


Copy
<tk-loading message="Please wait"></tk-loading>

<hr />
<tk-loading message="Please wait" variant="circular"></tk-loading>

Description

When the interface needs to communicate an element is loading we use <tk-loading>. This pattern is used when a label or title is necessary to accompany the loading indicator. An ellipsis is automatically added to the supplied message.

Size: xs

Copy
<tk-loading message="Please wait" variant="circular" size="xs"></tk-loading>

Note: The xs size is only supported for variant="circular".

Size: small


Copy
<tk-loading message="Please wait" size="small"></tk-loading>

<hr />
<tk-loading message="Please wait" variant="circular" size="small"></tk-loading>

Size: medium (default)


Copy
<tk-loading message="Please wait"></tk-loading>

<hr />
<tk-loading message="Please wait" variant="circular"></tk-loading>

Size: large


Copy
<tk-loading message="Please wait" size="large"></tk-loading>

<hr />
<tk-loading message="Please wait" variant="circular" size="large"></tk-loading>