chromium/chrome/browser/resources/settings/privacy_page/privacy_guide/step_indicator.html

<style include="cr-shared-style">
  :host {
    align-items: center;
    display: flex;
  }

  span {
    background: var(--google-grey-200);
    border-radius: 50%;
    display: inline-block;
    height: 8px;
    margin: 0 4px;
    width: 8px;
  }

  span.active {
    background: var(--google-blue-600);
  }

  .screen-reader-only {
    clip: rect(0, 0, 0, 0);
    position: fixed;
  }

  @media (prefers-color-scheme: dark) {
    span {
      background: var(--google-grey-500);
    }

    span.active {
      background: var(--google-blue-300);
    }
  }
</style>
<template is="dom-repeat" items="[[dots_]]">
  <span class$="[[getActiveClass_(index, model.active)]]"></span>
</template>
<div class="screen-reader-only">
  [[computeA11yLabel_(model.active, model.total)]]
</div>