chrome/browser/resources/chromeos/nearby_share/shared/nearby_progress.html

<style>
  #device-name {
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
    overflow-wrap: break-word;
    text-align: center;
    width: 116px;
  }

  /* TODO(b/279623883): Remove once Jelly is launched. */
  :host-context(body:not(.jelly-enabled)) #device-name {
    color: var(--cros-text-color-primary);
    line-height: 154%;
    letter-spacing: 0.25px;
  }

  :host-context(body.jelly-enabled) #device-name {
    font: var(--cros-body-2-font);
    color: var(--cros-sys-on_surface_variant);
  }

  #icon {
    height: var(--target-image-size);
    margin: auto;
    width: var(--target-image-size);
  }

  /* TODO(b/279623883): Remove old colors when Jelly is launched. */
  .has-error #icon {
    --nearby-device-icon-color: var(--cros-sys-on_error_container, var(--cros-color-disabled));
    --nearby-device-icon-background-color: var(
      --cros-sys-error_container, var(
        --cros-shortcut-background-color));
  }

  #progress-container {
    display: flex;
    height: 76px;
    margin: 8px auto 20px auto;
    position: relative;
    width: 76px;
  }

  #share-target-image {
    border-radius: 50%;
    /* Hide the image until it's downloaded. */
    display: none;
    flex-shrink: 0;
    height: var(--target-image-size);
    margin: 4px;
    width: var(--target-image-size);
  }

   /* TODO(b/279623883): Remove old colors when Jelly is launched. */
  #wheel {
    fill: none;
    stroke: var(--cros-sys-primary, var(--cros-icon-color-prominent));
    stroke-dasharray: 100;
    stroke-linecap: round;
    stroke-width: 2px;
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
    transition: stroke-dashoffset 400ms ease;
  }

  .indeterminate-progress #wheel {
    animation: 1.4s ease-in-out infinite both
        indeterminate-progress-animation;
    stroke-dasharray: 116;
  }

   /* TODO(b/279623883): Remove old colors when Jelly is launched. */
  .has-error #wheel {
    animation: none;
    stroke: var(--cros-sys-error, var(--cros-icon-color-alert));
    stroke-dashoffset: 0;
  }

  #svg {
    left: 0;
    position: absolute;
    top: 0;
  }

  .indeterminate-progress #svg {
    animation: 2s linear infinite svg-animation;
  }

  .has-error #svg {
    animation: none;
  }

  .hidden #svg {
    display: none;
  }

  @keyframes indeterminate-progress-animation {
    0%,
    25% {
      stroke-dashoffset: 115;
      transform: rotate(0);
    }
    50%,
    75% {
      stroke-dashoffset: 30;
      transform: rotate(45deg);
    }
    100% {
      stroke-dashoffset: 115;
      transform: rotate(360deg);
    }
  }

  @keyframes svg-animation {
    0% { transform: rotateZ(0deg); }
    100% { transform: rotateZ(360deg); }
  }
</style>

<div id="progress-container" role="progressbar" aria-valuemin="0"
    aria-valuemax="100" aria-valuenow$="[[progress]]"
    tabindex$="[[getProgressBarTabIndex_(progress)]]"
    class$="[[getProgressWheelClass_(progress, hasError)]]">
  <!-- This svg is inlined so that it can be styled with css; otherwise,
      it would be better to put it in an iron-icon. -->
  <svg id="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80">
    <circle id="wheel"
        cx="40" cy="40" r="39" pathLength="100">
    </circle>
  </svg>
  <img is="cr-auto-img" id="share-target-image"
      auto-src="[[getTargetImageUrl_(shareTarget)]]">
  </img>
  <nearby-device-icon id="icon" share-target="[[shareTarget]]">
  </nearby-device-icon>
</div>
<div id="device-name"
    aria-label="$i18n{nearbyShareOnboardingPageDeviceName}">
  [[shareTarget.name]]
</div>