/** * 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); } }