docs(circular-progress): Add SassDocs

PiperOrigin-RevId: 300196133

Author: allan-chen

packages/mdc-circular-progress/_keyframes.scss

@@ -22,12 +22,16 @@
 
 @use "./variables";
 
+/// Keyframes for the persistent rotation of the outermost container
+/// @access private
 @mixin container-rotate-keyframes_ {
   @keyframes mdc-circular-progress-container-rotate {
     to { transform: rotate(360deg); }
   }
 }
 
+/// Keyframes for the rotation of the spinner layer
+/// @access private
 @mixin spinner-layer-rotate-keyframes_ {
   @keyframes mdc-circular-progress-spinner-layer-rotate {
     @for $i from 1 through 8 {
@@ -38,6 +42,9 @@
   }
 }
 
+/// Keyframes for the fade-in and fade-out of the first color.
+/// .99 opacity is used to force subpixel rendering.
+/// @access private
 @mixin color-1-fade-in-out-keyframes_ {
   @keyframes mdc-circular-progress-color-1-fade-in-out {
     from { opacity: .99; }
@@ -49,6 +56,9 @@
   }
 }
 
+/// Keyframes for the fade-in and fade-out of the second color.
+/// .99 opacity is used to force subpixel rendering.
+/// @access private
 @mixin color-2-fade-in-out-keyframes_ {
   @keyframes mdc-circular-progress-color-2-fade-in-out {
     from { opacity: 0; }
@@ -59,6 +69,9 @@
   }
 }
 
+/// Keyframes for the fade-in and fade-out of the third color.
+/// .99 opacity is used to force subpixel rendering.
+/// @access private
 @mixin color-3-fade-in-out-keyframes_ {
   @keyframes mdc-circular-progress-color-3-fade-in-out {
     from { opacity: 0; }
@@ -69,6 +82,9 @@
   }
 }
 
+/// Keyframes for the fade-in and fade-out of the fourth color.
+/// .99 opacity is used to force subpixel rendering.
+/// @access private
 @mixin color-4-fade-in-out-keyframes_ {
   @keyframes mdc-circular-progress-color-4-fade-in-out {
     from { opacity: 0; }
@@ -79,6 +95,9 @@
   }
 }
 
+/// Keyframes for the expansion and contraction of the arc for the
+/// left semi-circle.
+/// @access private
 @mixin left-spin-keyframes_ {
   @keyframes mdc-circular-progress-left-spin {
     from { transform: rotate(265deg); }
@@ -87,6 +106,9 @@
   }
 }
 
+/// Keyframes for the expansion and contraction of the arc for the
+/// right semi-circle.
+/// @access private
 @mixin right-spin-keyframes_ {
   @keyframes mdc-circular-progress-right-spin {
     from { transform: rotate(-265deg); }

packages/mdc-circular-progress/_mixins.scss

@@ -1,5 +1,5 @@
 //
-// Copyright 2019 Google Inc.
+// Copyright 2020 Google Inc.
 //
 // Permission is hereby granted, free of charge, to any person obtaining a copy
 // of this software and associated documentation files (the "Software"), to deal
@@ -172,18 +172,27 @@
 
 // Public mixins
 
+/// Customizes the stroke-color of the indicator. Applies to the
+/// determinate variant, and also the indeterminate variant unless the
+/// four-color mixin is applied.
+/// @param {Color} $color - The desired stroke color.
+/// @see {mixin} indeterminate-colors
 @mixin color($color, $query: feature-targeting-functions.all()) {
   $feat-color: feature-targeting-functions.create-target($query, color);
 
   .mdc-circular-progress__determinate-circle,
   .mdc-circular-progress__indeterminate-circle-graphic {
-
     @include feature-targeting-mixins.targets($feat-color) {
       @include theme-mixins.prop("stroke", $color);
     }
   }
 }
 
+/// Applies four animated stroke-colors to the indeterminate indicator.
+/// Applicable to the indeterminate variant only and overrides any single color
+/// currently set.
+/// @param {List} $colors - A list of four desired colors.
+/// @see {mixin} color
 @mixin indeterminate-colors($colors, $query: feature-targeting-functions.all()) {
   $feat-color: feature-targeting-functions.create-target($query, color);
 
@@ -202,6 +211,11 @@
 
 // Private mixins
 
+/// Sets the container size of the indicator and the stroke width appropriate
+/// for the size according to Material Design guidelines. The dimensions are
+/// predefined for one of three discrete sizes listed below only.
+/// @param {String} $size - Choose from small, medium, or large.
+/// @access private
 @mixin size_($size, $query: feature-targeting-functions.all()) {
   $feat-structure: feature-targeting-functions.create-target($query, structure);
 
@@ -226,6 +240,8 @@
   }
 }
 
+/// Sets the animations for the indicator in indeterminate mode.
+/// @access private
 @mixin indeterminate-active-animations_($query: feature-targeting-functions.all()) {
   $feat-animation: feature-targeting-functions.create-target($query, animation);
 

packages/mdc-circular-progress/_variables.scss

@@ -1,5 +1,5 @@
 //
-// Copyright 2019 Google Inc.
+// Copyright 2020 Google Inc.
 //
 // Permission is hereby granted, free of charge, to any person obtaining a copy
 // of this software and associated documentation files (the "Software"), to deal
@@ -20,6 +20,8 @@
 // THE SOFTWARE.
 //
 
+$color: primary !default;
+
 /// size parameters
 $default-size: large;
 $container-side-length: (
@@ -33,16 +35,16 @@ $stroke-width: (
   small: 2.5px,
 );
 
-$color: primary !default;
-/// the rotation position of the arcs that corresponds to their fully contracted state
+/// The rotation position of the arcs that corresponds to their fully contracted state
 $base-angle: 135deg;
-/// amount of circle the arc takes up
+/// Amount of circle the arc takes up
 $arc-size: 270deg;
-/// time it takes to expand and contract arc
+/// Time it takes to expand and contract arc
 $arc-time: 1333ms;
-/// time for inactive indicator to disappear
+/// Time for inactive indicator to disappear
 $shrink-time: 400ms;
-/// how much the start location of the arc should rotate each time, 216 gives
+/// How much the start location of the arc should rotate each time; 216 gives
 /// us a 5 pointed star shape (it's 360/5 * 3)
 $arc-start-rotation-interval: 216deg;
+/// The timing function used for the core spinner animations.
 $timing-function: cubic-bezier(.4, 0, .2, 1);

packages/mdc-circular-progress/mdc-circular-progress.scss

@@ -1,5 +1,5 @@
 //
-// Copyright 2019 Google Inc.
+// Copyright 2020 Google Inc.
 //
 // Permission is hereby granted, free of charge, to any person obtaining a copy
 // of this software and associated documentation files (the "Software"), to deal