Import the pebble dev site into devsite/

devsite/source/_sass/elements/spinner.scss

@@ -0,0 +1,104 @@
+/**
+ * Copyright 2025 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+@charset "UTF-8";
+
+// Spinner by CSS Wizadry: http://jsfiddle.net/csswizardry/M2D4M/
+
+// A simple, semantic, usable-anywhere spinner. It takes its coloring from its
+// parent element, meaning it can be dropped anywhere without modification.
+
+// 1. Positioning context.
+// 2. Define dimensions in ems so that we can…
+// 3. …adjust spinner size by just changing its `font-size`.
+// 4. Do not explicitly define a color (allow border to inherit current text
+//   color). This makes the spinner usable on any color background. We’re also
+//   only defining a bottom border here; this is what actually gives the
+//   illusion of something spinning.
+// 5. Kellum method hidden text:
+//   zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement
+
+.spinner {
+  @include animation(0.5s spinner linear infinite);
+  border-bottom: 1px solid; // 4
+  display: inline-block;
+  font-size: 32px; // 3
+  height: 1em; // 2
+  overflow: hidden;  // 5
+  position: relative; // 1
+  text-indent: 100%; // 5
+  vertical-align: middle;
+  width: 1em; // 2
+
+     // 1. Make the spinner a circle.
+  &,
+  &:after {
+    border-radius: 100%; // 1
+  }
+
+  // The (optically) non-spinning part of the spinner.
+  // 1. Border around entire element fills in the rest of the ring.
+  // 2. Paler than the part that appears to spin.
+  &:after {
+    border: 1px solid; // 1
+    bottom: 0;
+    content: '';
+    left: 0;
+    opacity: 0.5; // 2
+    position: absolute;
+    right: 0;
+    top: 0;
+  }
+}
+
+// Size variants (built by adjusting `font-size`).
+.spinner--small { font-size: 16px; }
+.spinner--large { font-size: 64px; }
+
+// Color overrides.
+.spinner--light { color: $white; }
+.spinner--dark { color: #333; }
+
+.spinner--center {
+  display: block;
+  margin: 0 auto;
+}
+
+.spinner--padded {
+  margin-bottom: 1rem;
+  margin-top: 1rem;
+}
+
+@-webkit-keyframes spinner {
+
+  to {
+    -webkit-transform: rotate(360deg);
+  }
+}
+
+@-moz-keyframes spinner {
+
+  to {
+    -moz-transform: rotate(360deg);
+  }
+}
+
+@keyframes spinner {
+
+  to {
+    transform: rotate(360deg);
+  }
+}