mirror of
https://github.com/GoogleChromeLabs/squoosh.git
synced 2025-11-14 01:37:26 +00:00
125 lines
3.0 KiB
CSS
125 lines
3.0 KiB
CSS
@keyframes spinner-left-spin {
|
|
from { transform: rotate(130deg); }
|
|
50% { transform: rotate(-5deg); }
|
|
to { transform: rotate(130deg); }
|
|
}
|
|
|
|
@keyframes spinner-right-spin {
|
|
from { transform: rotate(-130deg); }
|
|
50% { transform: rotate(5deg); }
|
|
to { transform: rotate(-130deg); }
|
|
}
|
|
|
|
@keyframes spinner-fade-out {
|
|
to { opacity: 0; }
|
|
}
|
|
|
|
@keyframes spinner-container-rotate {
|
|
to { transform: rotate(360deg) }
|
|
}
|
|
|
|
@keyframes spinner-fill-unfill-rotate {
|
|
12.5% { transform: rotate(135deg); } /* 0.5 * ARCSIZE */
|
|
25% { transform: rotate(270deg); } /* 1 * ARCSIZE */
|
|
37.5% { transform: rotate(405deg); } /* 1.5 * ARCSIZE */
|
|
50% { transform: rotate(540deg); } /* 2 * ARCSIZE */
|
|
62.5% { transform: rotate(675deg); } /* 2.5 * ARCSIZE */
|
|
75% { transform: rotate(810deg); } /* 3 * ARCSIZE */
|
|
87.5% { transform: rotate(945deg); } /* 3.5 * ARCSIZE */
|
|
to { transform: rotate(1080deg); } /* 4 * ARCSIZE */
|
|
}
|
|
|
|
loading-spinner {
|
|
--size: 28px;
|
|
--color: #4285f4;
|
|
--stroke-width: 3px;
|
|
--delay: 300ms;
|
|
|
|
pointer-events: none;
|
|
display: inline-block;
|
|
position: relative;
|
|
width: var(--size);
|
|
height: var(--size);
|
|
border-color: var(--color);
|
|
}
|
|
|
|
loading-spinner .spinner-circle {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
box-sizing: border-box;
|
|
height: 100%;
|
|
width: 200%;
|
|
border-width: var(--stroke-width);
|
|
border-style: solid;
|
|
border-color: inherit;
|
|
border-bottom-color: transparent !important;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
/*
|
|
Patch the gap that appear between the two adjacent div.circle-clipper while the
|
|
spinner is rotating (appears on Chrome 38, Safari 7.1, and IE 11).
|
|
*/
|
|
loading-spinner .spinner-gap-patch {
|
|
position: absolute;
|
|
box-sizing: border-box;
|
|
top: 0;
|
|
left: 45%;
|
|
width: 10%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
border-color: inherit;
|
|
}
|
|
|
|
loading-spinner .spinner-gap-patch .spinner-circle {
|
|
width: 1000%;
|
|
left: -450%;
|
|
}
|
|
|
|
loading-spinner .spinner-circle-clipper {
|
|
display: inline-block;
|
|
position: relative;
|
|
width: 50%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
border-color: inherit;
|
|
}
|
|
|
|
loading-spinner .spinner-left .spinner-circle {
|
|
border-right-color: transparent !important;
|
|
transform: rotate(129deg);
|
|
animation: spinner-left-spin 1333ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
|
|
}
|
|
|
|
loading-spinner .spinner-right .spinner-circle {
|
|
left: -100%;
|
|
border-left-color: transparent !important;
|
|
transform: rotate(-129deg);
|
|
animation: spinner-right-spin 1333ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
|
|
}
|
|
|
|
loading-spinner.spinner-fadeout {
|
|
animation: spinner-fade-out 400ms cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
|
|
}
|
|
|
|
loading-spinner .spinner-container {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-color: inherit;
|
|
|
|
/* duration: 360 * ARCTIME / (ARCSTARTROT + (360-ARCSIZE)) */
|
|
animation: spinner-container-rotate 1568ms linear infinite;
|
|
}
|
|
|
|
loading-spinner .spinner-layer {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
border-color: inherit;
|
|
/* durations: 4 * ARCTIME */
|
|
animation: spinner-fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
|
|
}
|