pebble/devsite/source/_sass/elements/spinner.scss

105 lines
2.6 KiB
SCSS
Raw Permalink Normal View History

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