material-components_material-web/progress/internal/circular-progress.ts

/**
 * @license
 * Copyright 2023 Google LLC
 * SPDX-License-Identifier: Apache-2.0
 */

import {html} from 'lit';

import {Progress} from './progress.js';

/**
 * A circular progress component.
 */
export class CircularProgress extends Progress {
  protected override renderIndicator() {
    if (this.indeterminate) {
      return this.renderIndeterminateContainer();
    }

    return this.renderDeterminateContainer();
  }

  // Determinate mode is rendered with an svg so the progress arc can be
  // easily animated via stroke-dashoffset.
  private renderDeterminateContainer() {
    const dashOffset = (1 - this.value / this.max) * 100;
    // note, dash-array/offset are relative to Setting `pathLength` but
    // Chrome seems to render this inaccurately and using a large viewbox helps.
    return html`
      <svg viewBox="0 0 4800 4800">
        <circle class="track" pathLength="100"></circle>
        <circle
          class="active-track"
          pathLength="100"
          stroke-dashoffset=${dashOffset}></circle>
      </svg>
    `;
  }

  // Indeterminate mode rendered with 2 bordered-divs. The borders are
  // clipped into half circles by their containers. The divs are then carefully
  // animated to produce changes to the spinner arc size.
  // This approach has 4.5x the FPS of rendering via svg on Chrome 111.
  // See https://lit.dev/playground/#gist=febb773565272f75408ab06a0eb49746.
  private renderIndeterminateContainer() {
    return html` <div class="spinner">
      <div class="left">
        <div class="circle"></div>
      </div>
      <div class="right">
        <div class="circle"></div>
      </div>
    </div>`;
  }
}