chrome-devtools-frontend/front_end/ui/components/spinners/spinner.css

Chrome DevTools UI

/*
 * Copyright 2024 The Chromium Authors
 * Use of this source code is governed by a BSD-style license that can be
 * found in the LICENSE file.
 */

:host {
  overflow: hidden;
  width: var(--sys-size-7);
  height: var(--sys-size-7);
  display: inline-block;
  font-size: 0;
  letter-spacing: 0;
  white-space: nowrap;
}

:host([active]) {
  animation: spinner-container-animation 1.5s linear infinite;
}

.spinner {
  height: 100%;
  width: 100%;
}

.spinner.indeterminate {
  /*
  * The value for animation duration has been obtained by plugging in values defined
  * in packages/mdc-circular-progress/_circular-progress-theme.scss to
  * functions defined in packages/mdc-circular-progress/_circular-progress.scss.
  * https://github.com/material-components/material-components-web
  */
  animation: indeterminate-spinner-animation 5332ms cubic-bezier(0.4, 0, 0.2, 1)
    infinite both;

}

.spinner circle {
  stroke: var(--sys-color-state-disabled);
  stroke-width: var(--sys-size-6);
  fill: transparent;
  transform-origin: 50% 50%;
  transform: rotate(-90deg);
}


.spinner.indeterminate circle {
  stroke: var(--sys-color-primary);
  stroke-dasharray: 100, 100;
  stroke-dashoffset: 0;
  /*
  * The value for animation duration has been obtained from values defined
  * in packages/mdc-circular-progress/_circular-progress-theme.scss
  * https://github.com/material-components/material-components-web
  */
  animation: indeterminate-spinner-circle-animation 1333ms
    cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}

@keyframes spinner-container-animation {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes indeterminate-spinner-animation {
  12.5% {
    transform: rotate(135deg);
  }

  25% {
    transform: rotate(270deg);
  }

  37.5% {
    transform: rotate(405deg);
  }

  50% {
    transform: rotate(540deg);
  }

  62.5% {
    transform: rotate(675deg);
  }

  75% {
    transform: rotate(810deg);
  }

  87.5% {
    transform: rotate(945deg);
  }

  100% {
    transform: rotate(1080deg);
  }
}

@keyframes indeterminate-spinner-circle-animation {
  0% {
    stroke-dasharray: 5, 100;
    stroke-dashoffset: 0;
    transform: rotate(-90deg);
  }

  50% {
    stroke-dasharray: 75, 100;
    stroke-dashoffset: 0;
    transform: rotate(-225deg);
  }

  100% {
    stroke-dasharray: 5, 100;
    stroke-dashoffset: 0;
    transform: rotate(-90deg);
  }
}