mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-21 04:53:58 +08:00
120 lines
2.1 KiB
SCSS
120 lines
2.1 KiB
SCSS
|
|
|
|
// Spinners
|
|
// --------------------------------------------------
|
|
|
|
ion-spinner {
|
|
display: inline-block;
|
|
position: relative;
|
|
width: 28px;
|
|
height: 28px;
|
|
}
|
|
|
|
ion-spinner svg {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
transform: translateZ(0);
|
|
}
|
|
|
|
ion-spinner.spinner-paused svg {
|
|
animation-play-state: paused;
|
|
}
|
|
|
|
|
|
// Spinner: ios / ios-small
|
|
// --------------------------------------------------
|
|
|
|
.spinner-ios line,
|
|
.spinner-ios-small line {
|
|
stroke: #69717d;;
|
|
stroke-width: 4px;
|
|
stroke-linecap: round;
|
|
}
|
|
|
|
.spinner-ios svg,
|
|
.spinner-ios-small svg {
|
|
animation: spinner-fade-out 1s linear infinite;
|
|
}
|
|
|
|
|
|
// Spinner: bubbles
|
|
// --------------------------------------------------
|
|
|
|
.spinner-bubbles circle {
|
|
fill: black;
|
|
}
|
|
|
|
.spinner-bubbles svg {
|
|
animation: spinner-scale-out 1s linear infinite;
|
|
}
|
|
|
|
|
|
// Spinner: circles
|
|
// --------------------------------------------------
|
|
|
|
.spinner-circles circle {
|
|
fill: #69717d;
|
|
}
|
|
|
|
.spinner-circles svg {
|
|
animation: spinner-fade-out 1s linear infinite;
|
|
}
|
|
|
|
|
|
// Spinner: crescent
|
|
// --------------------------------------------------
|
|
|
|
.spinner-crescent circle {
|
|
fill: transparent;
|
|
stroke: black;
|
|
stroke-width: 4px;
|
|
stroke-dasharray: 128px;
|
|
stroke-dashoffset: 82px;
|
|
}
|
|
|
|
.spinner-crescent svg {
|
|
animation: spinner-rotate 1s linear infinite;
|
|
}
|
|
|
|
|
|
// Spinner: dots
|
|
// --------------------------------------------------
|
|
|
|
.spinner-dots circle {
|
|
fill: #444;
|
|
stroke-width: 0;
|
|
}
|
|
|
|
.spinner-dots svg {
|
|
animation: spinner-dots 1s linear infinite;
|
|
transform-origin: center;
|
|
}
|
|
|
|
|
|
// Animation Keyframes
|
|
// --------------------------------------------------
|
|
|
|
@keyframes spinner-fade-out {
|
|
0% { opacity: 1; }
|
|
100% { opacity: 0; }
|
|
}
|
|
|
|
@keyframes spinner-scale-out {
|
|
0% { transform: scale(1, 1); }
|
|
100% { transform: scale(0, 0); }
|
|
}
|
|
|
|
@keyframes spinner-rotate {
|
|
0% { transform: rotate(0deg); }
|
|
100% { transform: rotate(360deg); }
|
|
}
|
|
|
|
@keyframes spinner-dots {
|
|
0% { opacity: 0.9; transform: scale(1, 1); }
|
|
50% { opacity: 0.3; transform: scale(0.4, 0.4); }
|
|
100% { opacity: 0.9; transform: scale(1, 1); }
|
|
}
|