woocommerce/woocommerce-paypal-payments
2
0
Fork 0
mirror of https://github.com/woocommerce/woocommerce-paypal-payments.git synced 2025-08-30 05:00:51 +08:00
Code Issues Projects Packages Wiki Activity Actions 18

✨ Add simple Spinner overlay component

Browse source
This commit is contained in:
Philipp Stracker 2024-11-07 13:23:07 +01:00
parent 9d845e56f3
commit 4af29a5dc2
No known key found for this signature in database
3 changed files with 28 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

16
modules/ppcp-settings/resources/css/components/reusable-components/_spinner-overlay.scss Normal file
View file

@ -0,0 +1,16 @@
.ppcp-r-spinner-overlay {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 10;
background: var(--spinner-overlay-color);
.components-spinner {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}

1
modules/ppcp-settings/resources/css/style.scss
View file

@ -18,6 +18,7 @@
@import './components/reusable-components/title-badge';
@import './components/reusable-components/accordion-section';
@import './components/reusable-components/badge-box';
@import './components/reusable-components/spinner-overlay';
@import './components/screens/onboarding';
@import './components/screens/dashboard/tab-dashboard';
@import './components/screens/dashboard/tab-payment-methods';

11
modules/ppcp-settings/resources/js/Components/ReusableComponents/SpinnerOverlay.js Normal file
View file

@ -0,0 +1,11 @@
import { Spinner } from '@wordpress/components';
const SpinnerOverlay = () => {
return (
<div className="ppcp-r-spinner-overlay">
<Spinner />
</div>
);
};
export default SpinnerOverlay;