chromium/chrome/browser/resources/webui_gallery/demos/progress_indicators/progress_indicator_demo.css

/* 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. */

/* #css_wrapper_metadata_start
 * #type=style-lit
 * #import=../demo.css.js
 * #import=//resources/cr_elements/cr_shared_vars.css.js
 * #scheme=relative
 * #include=demo
 * #css_wrapper_metadata_end */

:host {
  --spinner-size: 28px;
}

.spinner {
  mask-image: url(//resources/images/throbber_small.svg);
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: var(--spinner-size) var(--spinner-size);
  background-color: var(--google-blue-500);
  height: var(--spinner-size);
  width: var(--spinner-size);
}

@media (prefers-color-scheme: dark) {
  .spinner {
    background-color: var(--google-blue-300);
  }
}

cr-progress {
  --cr-progress-active-color: var(--google-blue-500);
}

@media (prefers-color-scheme: dark) {
  cr-progress {
    --cr-progress-active-color: var(--google-blue-300);
  }
}

#gradientWithBorder {
  border: solid 1px var(--google-blue-300);
  border-radius: 16px;
  box-sizing: border-box;
  padding: 16px;
  width: 100%;
}

#customColors {
  --cr-loading-gradient-color-start: cyan;
  --cr-loading-gradient-color-middle: gold;
  --cr-loading-gradient-color-end: hotpink;
}