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.
<tk-loading message="Please wait"></tk-loading>
<hr />
<tk-loading message="Please wait" variant="circular"></tk-loading>
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.
<tk-loading message="Please wait" variant="circular" size="xs"></tk-loading>
xs
size is only supported for variant="circular"
.<tk-loading message="Please wait" size="small"></tk-loading>
<hr />
<tk-loading message="Please wait" variant="circular" size="small"></tk-loading>
<tk-loading message="Please wait"></tk-loading>
<hr />
<tk-loading message="Please wait" variant="circular"></tk-loading>
<tk-loading message="Please wait" size="large"></tk-loading>
<hr />
<tk-loading message="Please wait" variant="circular" size="large"></tk-loading>