Porsche Design System

Spinner

Table of Contents

Size
Color
Technical notes

Size#

There are predefined sizes for the component available which should cover most use cases. If a specific size is needed, the size property can be set to inherit to derive the spinner's dimensions from the font-size of a parent element (e.g. a p-text). The internal calculation is based on the ex-unit relative to the inherited font-size and the global line-height, ensuring the spinner stays visually consistent with surrounding typographic-scale-based components.

Some text

Open in Stackblitz

<!doctype html>
<html lang="en" class="scheme-light-dark">
<head>
  <title></title>
</head>
<body class="bg-canvas">

<p-text class="text-[48px]" size="inherit">
  <p-spinner class="me-static-sm" size="inherit" aria="{'aria-label': 'Loading page content'}"></p-spinner>
  Some text
</p-text>
<script>

</script>
</body>
</html>

Alternatively, the size can be controlled via the custom CSS variable --p-spinner-size, which accepts any valid CSS length value. This approach is particularly useful when the spinner is placed independently of typographic-scale-based components and a precise, fixed size is required.

Open in Stackblitz

<!doctype html>
<html lang="en" class="scheme-light-dark">
<head>
  <title></title>
</head>
<body class="bg-canvas">

<p-spinner class="[--p-spinner-size:48px]" aria="{'aria-label': 'Loading page content'}"></p-spinner>
<script>

</script>
</body>
</html>

The size property supports BreakpointCustomizable values, allowing you to define different sizes for each major breakpoint (xs, s, m, l, xl). This makes it easy to adapt the spinner's appearance responsively without additional CSS.

Open in Stackblitz

<!doctype html>
<html lang="en" class="scheme-light-dark">
<head>
  <title></title>
</head>
<body class="bg-canvas">

<p-spinner size="{'base': 'sm', 'l': '2xl'}" aria="{'aria-label': 'Loading page content'}"></p-spinner>
<script>

</script>
</body>
</html>

Color#

The color property can be set to inherit to derive the spinner's color from the currentcolor of a parent element (e.g. a p-text). This ensures the spinner matches the surrounding text color automatically.

Some text

Open in Stackblitz

<!doctype html>
<html lang="en" class="scheme-light-dark">
<head>
  <title></title>
</head>
<body class="bg-canvas">

<p-text style="color: light-dark(mediumvioletred, deeppink)" color="inherit">
  <p-spinner class="me-static-sm" color="inherit" aria="{'aria-label': 'Loading page content'}"></p-spinner>
  Some text
</p-text>
<script>

</script>
</body>
</html>

Alternatively, the colors can be controlled via the custom CSS variables --p-spinner-color and --p-spinner-track-color, which accept any valid CSS color value. This allows full control over both the foreground and track color independently.

Open in Stackblitz

<!doctype html>
<html lang="en" class="scheme-light-dark">
<head>
  <title></title>
</head>
<body class="bg-canvas">

<p-spinner class="[--p-spinner-color:deeppink] [--p-spinner-track-color:lightpink]" aria="{'aria-label': 'Loading page content'}"></p-spinner>
<script>

</script>
</body>
</html>

Technical notes#

For automated visual regression tests, the spinner animation can be disabled by setting a global CSS variable:

:root {
  --p-animation-duration: 0s !important;
}