Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Loading animation (https://github.com/woocommerce/woocommerce-blocks/pull/5362)

This commit is contained in:
Mike Jolley 2021-12-13 13:57:59 +00:00 committed by GitHub
parent 59c8c88438
commit 661896ce9e
2 changed files with 37 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
plugins/woocommerce-blocks/assets/css/abstracts/_mixins.scss
View File

@ -12,41 +12,65 @@ $fontSizes: (
font-size: map-get($fontSizes, $sizeName) * $multiplier; font-size: map-get($fontSizes, $sizeName) * $multiplier;
} }
@keyframes loading-fade { @keyframes spinner__animation {
0% { 0% {
opacity: 0.7; animation-timing-function: cubic-bezier(0.5856, 0.0703, 0.4143, 0.9297);
} transform: rotate(0deg);
50% {
opacity: 1;
} }
100% { 100% {
opacity: 0.7; transform: rotate(360deg);
}
}
@keyframes loading__animation {
100% {
transform: translateX(100%);
} }
} }
// Adds animation to placeholder section // Adds animation to placeholder section
@mixin placeholder() { @mixin placeholder() {
animation: loading-fade 1.2s ease-in-out infinite;
background-color: $placeholder-color !important;
color: $placeholder-color !important;
outline: 0 !important; outline: 0 !important;
border: 0 !important; border: 0 !important;
box-shadow: none; background-color: #ebebeb !important;
color: transparent !important;
width: 100%;
border-radius: 0.25rem;
display: block;
line-height: 1;
position: relative !important;
overflow: hidden !important;
max-width: 100% !important;
pointer-events: none; pointer-events: none;
max-width: 100%; box-shadow: none;
z-index: 1; /* Necessary for overflow: hidden to work correctly in Safari */
// Forces direct descendants to keep layout but lose visibility. // Forces direct descendants to keep layout but lose visibility.
> * { > * {
visibility: hidden; visibility: hidden;
} }
&::after {
content: " ";
display: block;
position: absolute;
left: 0;
right: 0;
top: 0;
height: 100%;
background-repeat: no-repeat;
background-image: linear-gradient(90deg, #ebebeb, #f5f5f5, #ebebeb);
transform: translateX(-100%);
animation: loading__animation 1.5s ease-in-out infinite;
}
@media screen and (prefers-reduced-motion: reduce) { @media screen and (prefers-reduced-motion: reduce) {
animation: none; animation: none;
} }
} }
@mixin force-content() { @mixin force-content() {
&::after { &::before {
content: "\00a0"; content: "\00a0";
} }
} }

12
plugins/woocommerce-blocks/assets/js/base/components/spinner/style.scss
View File

@ -22,16 +22,6 @@
border-radius: 50%; border-radius: 50%;
border: 0.2em solid currentColor; border: 0.2em solid currentColor;
border-left-color: transparent; border-left-color: transparent;
animation: wc-block-components-spinner__animation 1s infinite linear; animation: spinner__animation 1s infinite linear;
}
}
@keyframes wc-block-components-spinner__animation {
0% {
animation-timing-function: cubic-bezier(0.5856, 0.0703, 0.4143, 0.9297);
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
} }
} }