Merge pull request #4307 from material-components:circular-progress-docs

PiperOrigin-RevId: 533227878

Author: copybara-github

docs/components/circular-progress.md

@@ -1,3 +1,11 @@
+<!-- catalog-only-start --><!-- ---
+name: Circular Progress
+dirname: circularprogress
+-----><!-- catalog-only-end -->
+
+<catalog-component-header image-align="end">
+<catalog-component-header-title slot="title">
+
 # Circular progress
 
 <!--*
@@ -19,23 +27,63 @@ There are two types of progress indicators: Linear and circular.
 Circular progress indicators display progress by animating along an invisible
 circular track in a clockwise direction.
 
-![An animated image of an indeterminate circular progress indicator.](images/circularprogress/hero.gif "Circular progress indicators are composed of an invisible track and an indicator")
+</catalog-component-header-title>
+
+![A circular progress indicator at the end of an image feed.](images/circularprogress/hero.png "Circular progress indicators are composed of an invisible track and an indicator")
+
+</catalog-component-header>
 
 *   [Design article](https://m3.material.io/components/progress-indicators)
     <!-- {.external} -->
 *   API Documentation (*coming soon*)
 *   [Source code](https://github.com/material-components/material-web/tree/main/circularprogress)
     <!-- {.external} -->
 
+<!-- catalog-only-start -->
+
+<!--
+
+## Interactive Demo
+
+{% playgroundexample dirname=dirname %}
+
+-->
+
+<!-- catalog-only-end -->
+
 ## Usage
 
 Circular progress indicators may be determinate to show progress, or
 indeterminate for an unspecified amount of progress.
 
+<!-- github-only-start -->
+
 ![Two circular progress indicators, one with three quarters of the track full
 and the other
 indeterminate.](images/circularprogress/usage.gif "Determinate and indeterminate circular progress indicators.")
 
+<!-- github-only-end -->
+<!-- catalog-only-start -->
+
+<!--
+
+<div class="figure-wrapper">
+  <figure
+      style="justify-content:center;"
+      title="Determinate and indeterminate circular progress indicators."
+      aria-label="Two circular progress indicators, one with three quarters of the track full
+and the other
+indeterminate.">
+    <md-circular-progress inert progress="0.75"></md-circular-progress>
+
+    <md-circular-progress inert indeterminate></md-circular-progress>
+  </figure>
+</div>
+
+-->
+
+<!-- catalog-only-end -->
+
 ```html
 <md-circular-progress progress="0.75"></md-circular-progress>
 
@@ -47,8 +95,30 @@ indeterminate.](images/circularprogress/usage.gif "Determinate and indeterminate
 Indeterminate circular progress indicators may cycle between four colors
 (primary, primary container, tertiary, and tertiary container by default).
 
+<!-- github-only-start -->
+
 ![An indeterminate circular progress indicator that cycles between four colors.](images/circularprogress/usage-four-color.gif "A four-color indeterminate circular progress indicator")
 
+<!-- github-only-end -->
+<!-- catalog-only-start -->
+
+<!--
+
+<div class="figure-wrapper">
+  <figure
+      style="justify-content:center;"
+      title="A four-color indeterminate circular progress indicator"
+      aria-label="An indeterminate circular progress indicator that cycles between four colors.">
+    <md-circular-progress inert four-color indeterminate></md-circular-progress>
+  </figure>
+</div>
+
+-->
+
+<!-- catalog-only-end -->
+
+
+
 ```html
 <md-circular-progress four-color indeterminate></md-circular-progress>
 ```
@@ -84,8 +154,40 @@ Token                                           | Default value
 
 ### Example
 
+<!-- github-only-start -->
+
 ![Image of a circular progress indicator with a different theme applied](images/circularprogress/theming.png "Circular progress indicator theming example.")
 
+<!-- github-only-end -->
+<!-- catalog-only-start -->
+
+<!--
+
+<div class="figure-wrapper">
+  <figure
+      style="justify-content:center;align-items:center;"
+      class="styled-example"
+      title="Circular progress indicator theming example."
+      aria-label="Image of a circular progress indicator with a different theme applied">
+    <style>
+      .styled-example {
+        background-color: white;
+        --md-circular-progress-size: 32px;
+        --md-circular-progress-active-indicator-width: 20;
+        --md-sys-color-primary: #006A6A;
+      }
+    </style>
+
+    <md-circular-progress inert progress="0.5"></md-circular-progress>
+  </figure>
+</div>
+
+-->
+
+<!-- catalog-only-end -->
+
+
+
 ```html
 <style>
 :root {