Porsche Design System

Spinner

Table of Contents

Size
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 can be set to inherit to specify the text size from outside.

Open in Stackblitz

<!doctype html>
<html lang="en" class="auto">
<head>
  <title></title>
</head>
<body class="bg-base">

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

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

Responsive

The size property can also be used on different major breakpoints xs, s, m, l, xl.

Open in Stackblitz

<!doctype html>
<html lang="en" class="auto">
<head>
  <title></title>
</head>
<body class="bg-base">

<p-spinner size="{'base': 'small', 'l': 'medium'}" 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;
}