Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Loading class #34

Merged
merged 4 commits into from
Nov 22, 2023
Merged

Loading class #34

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
da75d72
feat: build up new loading class
vandangnhathung Nov 10, 2023
205fa97
fix(loading): add code to loading.css, update redundant code and upda…
vandangnhathung Nov 14, 2023
d8cb459
fix(default):
vandangnhathung Nov 21, 2023
86e8fa3
fix(loading): remove unrelated changes
vandangnhathung Nov 21, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 41 additions & 0 deletions css/loading-class.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
/**
* Loading
*/
.loading {
position:relative;
}

.loading:before {
content:"";
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
z-index:2;
background-color:rgba(255, 255, 255, 0.7);
}

.loading:after {
--loading-size:35px;
content:"";
position:absolute;
top:50%;
left:50%;
z-index:3;
width:var(--loading-size);
height:var(--loading-size);
margin:calc(-0.5 * var(--loading-size)) 0 0 calc(-0.5 * var(--loading-size));
border-radius:50%;
border:2px dashed transparent;
border-bottom-color:var(--bb-color-primary);
border-right-color:var(--bb-color-primary);
animation:spinner 0.6s linear infinite;
box-sizing:border-box;
}

@keyframes spinner {
to {
transform:rotate(360deg);
}
}
10 changes: 8 additions & 2 deletions scss/_config.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,5 +42,11 @@
// vertical spacing
//$vertical_spacing: (
// "values":0 1 2 4 6 8 12 16 24 32 48 64 96 128,
// "md": 0 1 2 4 6 8 12 16 24 30 40 50 60 70,
//);
// "md": 0 1 2 4 6 8 12 16 24 30 40 50 60 70,
//);

// loading class
$loading_class: (
"enable": true,
"isWoocomerce": false // true if project using woocommerce
)
95 changes: 95 additions & 0 deletions scss/loading-class.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,95 @@
/**
* Loading
*/
@import "helpers";

@mixin print-loading-class($data) {
$isEnabled: map-get($data, 'enable');
$isWoocommerce: map-get($data, 'isWoocomerce');

// $isEnabled: true => loading is used
@if ($isEnabled) {
// If $isWoocommerce value is false just load the loading selector only
@if ($isWoocommerce == true) {
.loading, .woocommerce .blockUI.blockOverlay, .woocommerce .loader {
position: relative;
}
.woocommerce .blockUI.blockOverlay:before, .woocommerce .loader:before,
.loading:before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 2;
background-color: rgba(255, 255, 255, 0.7);
}
.loading:after,
body .xwc--pf-loader-overlay:after,
.woocommerce .blockUI.blockOverlay:after,
.woocommerce .loader:after {
--loading-size: 35px;
content: "";
position: absolute;
top: 50%;
left: 50%;
z-index: 3;
width: var(--loading-size);
height: var(--loading-size);
margin: calc(-0.5 * var(--loading-size)) 0 0 calc(-0.5 * var(--loading-size));
border-radius: 50%;
border: 2px dashed transparent;
border-bottom-color: var(--bb-color-primary);
border-right-color: var(--bb-color-primary);
animation: spinner .6s linear infinite;
box-sizing: border-box;
}
@keyframes spinner {
to {
transform: rotate(360deg);
}
}
} @else {
.loading {
position: relative;
}
.loading:before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 2;
background-color: rgba(255, 255, 255, 0.7);
}
.loading:after {
--loading-size: 35px;
content: "";
position: absolute;
top: 50%;
left: 50%;
z-index: 3;
width: var(--loading-size);
height: var(--loading-size);
margin: calc(-0.5 * var(--loading-size)) 0 0 calc(-0.5 * var(--loading-size));
border-radius: 50%;
border: 2px dashed transparent;
border-bottom-color: var(--bb-color-primary);
border-right-color: var(--bb-color-primary);
animation: spinner .6s linear infinite;
box-sizing: border-box;
}
@keyframes spinner {
to {
transform: rotate(360deg);
}
}
}
}
}

@include print-loading-class($loading_class);