# Loading-Indicator-Circle Component of the SBB design system Lyne. - Package: `@sbb-esta/lyne-elements` (Angular: `@sbb-esta/lyne-angular`) - Structure: one element - Categories: Indicator - Status: Design guidelines complete ## Links - Page on digital.sbb.ch: https://digital.sbb.ch/en/design-system/lyne/components/loading-indicator-circle/ - Storybook: https://lyne-elements.app.sbb.ch/?path=/docs/elements-loading-indicator-circle--docs - Angular (`@sbb-esta/lyne-angular`): https://lyne-angular.app.sbb.ch/angular/components/loading-indicator-circle/overview (API: https://lyne-angular.app.sbb.ch/angular/components/loading-indicator-circle/api) - Figma: https://www.figma.com/design/mWknI2rC5DJmOgRO61WKai/Lyne-Components?node-id=31083-328427 - GitHub: https://github.com/sbb-design-systems/lyne-components/tree/v5.12.0/src/elements/loading-indicator-circle ## Elements - `sbb-loading-indicator-circle`: It displays a circle loading indicator. ## Related components - Similar: [Loading-Indicator](https://digital.sbb.ch/en/design-system/lyne/components/loading-indicator/index.md) ## Overview ### What does the component do? The loading indicator circle shows that an action is running in the background and users have to wait. It is intended for use within content, for example in a [button](https://digital.sbb.ch/en/design-system/lyne/components/button/) or next to a text. It is available in red, smoke and white. ### When should the component be used? * To show that an action or process is running and the application is responding. * When loading is displayed at a specific place within the content. For overlays, the [loading indicator](https://digital.sbb.ch/en/design-system/lyne/components/loading-indicator/) is suitable. ### Rules. * Use the indicator only for actions lasting about 1 second or more. Shorter processes are confusing because of the flashing. * As a rule, show it only after 1 second. If it is known in advance that it will take longer, it may appear immediately. * A minimum display duration of about 500 ms can make sense, but is not mandatory. * It does not change the layout. Reserve the space for it. * For long waiting times (from about 10 seconds), offer a progress indicator. * If the indicator should be announced by screen readers, place it in a container with `aria-live` and give it an `aria-label`. ## Implementation (web components) The `` is a component which can be used to indicate progress status or an ongoing activity which require some time to complete. ```html ``` It can be slotted in other components (e.g. ``) in the icon slot. ```html Button ``` #### Usage We recommend using the loading indicator only for actions that are expected to take at least one second. For shorter processes, the indicator may appear as a distracting flash. The loading indicator should generally be displayed after one second has elapsed since an action has started. If it is known in advance that the back-end service will take at least one second to respond, the loading indicator may be displayed immediately. A minimum display duration of about 500ms can help prevent the indicator from disappearing too quickly, but is not required and depends on what happens next. For longer waiting times, especially those of around 10 seconds or more, consider providing a progress indicator to give users an indication of the remaining time. ### Accessibility If the `` should be announced by screen-readers, use an element with the correct aria attributes (`aria-live` set to `polite` or `assertive`, and possibly `aria-atomic` and `aria-relevant`) and then append the `` on it after giving it the correct `aria-label`. ```html
``` ## API (web components) Full API tables (attributes, events, slots, CSS properties): https://digital.sbb.ch/en/design-system/lyne/components/loading-indicator-circle/api.md