This topic has 11 replies, 3 voices, and was last updated 2 hours, 36 minutes ago ago by Andrew Mitchell
how can i change the circle loading with skeleton loading ?
Dear @Saleh,
We hope this message finds you well.
The following custom CSS codes are responsible for generating the loading icons on your website:
body.elementor-page:not([data-elementor-device-mode]) [class*=elementor-widget-etheme]:not(.etheme-elementor-widget-loaded):before,
body.elementor-page:not([data-elementor-device-mode]) [class*=elementor-widget-et-]:not(.etheme-elementor-widget-loaded):before,
body.elementor-default:not([data-elementor-device-mode]) [class*=elementor-widget-etheme]:not(.etheme-elementor-widget-loaded):before,
body.elementor-default:not([data-elementor-device-mode]) [class*=elementor-widget-et-]:not(.etheme-elementor-widget-loaded):before,
.etheme-elementor-lazy-button:before,
.elementor-widget.etheme-loading:before,
.elementor-widget.etheme-reloading:before {
content: '';
display: var(--etheme-element-loader-display, inline-block);
position: absolute;
width: var(--etheme-elementor-loader-size, 1.5rem);
height: var(--etheme-elementor-loader-size, 1.5rem);
left: calc(50% - (var(--etheme-elementor-loader-size, 1.5rem) / 2));
top: calc(50% - (var(--etheme-elementor-loader-size, 1.5rem) / 2));
border: 1px solid var(--etheme-elementor-loader-color, #e1e1e1);
border-left-color: var(--etheme-elementor-loader-color-active, #555);
border-radius: 50%;
-webkit-animation: rotate 0.5s linear infinite;
animation: rotate 0.5s linear infinite;
z-index: 1;
}
You are welcome to modify these custom CSS codes to better suit your specific requirements.
If you have any further questions or need assistance, please don’t hesitate to reach out.
Best regards,
8Theme’s Team
ok i added this to the global style from xstore setting
and i got some issues i explained in the screenshot
1- thin black line between the left edges of the skeleton elements
2- space between the skeleton
how can i fix them
is there any response ?
Hi @saleh,
The custom CSS codes above is used for the icon loading of ajaxify widgets.
For the skeleton loading, please use this custom CSS codes instead:
.etheme-ajaxify-loading:before {
content: '';
display: inline-block;
position: absolute;
width: var(--etheme-ajaxify-loader-size, 1.5rem);
height: var(--etheme-ajaxify-loader-size, 1.5rem);
left: calc(50% - (var(--etheme-ajaxify-loader-size, 1.5rem) / 2));
top: calc(50% - (var(--etheme-ajaxify-loader-size, 1.5rem) / 2));
border: 1px solid var(--etheme-ajaxify-loader-color, #e1e1e1);
border-left-color: var(--etheme-ajaxify-loader-color-active, #888);
border-radius: 50%;
-webkit-animation: rotate 0.3s linear infinite;
animation: rotate 0.3s linear infinite;
z-index: 1;
}
.etheme-ajaxify-skeleton {
min-height: 50px;
background-repeat: no-repeat;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(100%, var(--linear-gradient, #f4f4f4)), color-stop(0, transparent));
background-image: linear-gradient(var(--linear-gradient, #f4f4f4) 100%, transparent 0);
background-size: 100% calc(100% - 20px);
overflow: hidden;
}
.etheme-ajaxify-skeleton:before {
display: none;
}
.etheme-ajaxify-skeleton:after {
content: '';
position: absolute;
top: -50%;
left: -50%;
right: -50%;
bottom: -50%;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
background-image: -webkit-gradient(linear, left top, right top, color-stop(20%, var(--linear-gradient-overlay, rgba(255, 255, 255, 0))), color-stop(50%, var(--linear-gradient-overlay-2, rgba(255, 255, 255, 0.8))), color-stop(80%, var(--linear-gradient-overlay, rgba(255, 255, 255, 0))));
background-image: linear-gradient(90deg, var(--linear-gradient-overlay, rgba(255, 255, 255, 0)) 20%, var(--linear-gradient-overlay-2, rgba(255, 255, 255, 0.8)) 50%, var(--linear-gradient-overlay, rgba(255, 255, 255, 0)) 80%);
background-size: 60% 100%;
background-position: -100% 0;
background-repeat: no-repeat;
-webkit-animation: skeletonloading 1.5s infinite 0.2s;
animation: skeletonloading 1.5s infinite 0.2s;
z-index: 1;
}
.etheme-ajaxify-skeleton[data-type=widget] {
min-height: 200px;
background-image: linear-gradient(var(--linear-gradient, #f4f4f4) 25px, transparent 0), linear-gradient(var(--linear-gradient, #f4f4f4) 15px, transparent 0), linear-gradient(var(--linear-gradient, #f4f4f4) 15px, transparent 0), linear-gradient(var(--linear-gradient, #f4f4f4) 15px, transparent 0), linear-gradient(var(--linear-gradient, #f4f4f4) 15px, transparent 0);
background-size: 50% 25px, 70% 15px, 40% 15px, 50% 15px, 30% 15px;
background-position: left top, left 35px, left 60px, left 85px, left 110px;
}
Hope it helps!
i put this code in xstore option global css but doesn change any thing still same circle loading spinner
Dear @Saleh,
We hope this message finds you well.
The custom CSS codes for skeleton loading can be found in the following file:
/wp-content/themes/xstore/css/modules/skeleton.css
.
You are welcome to copy and modify the code as needed. However, please note that any further customization falls outside the scope of the standard support services we provide.
We appreciate your understanding on this matter.
Best regards,
The 8Theme Team
i dont want to modify this skeleton i want to display it rather circle spinner loading
is there any response please
Hi @saleh,
Please take a look at the custom CSS code in this reply: https://www.8theme.com/topic/skeleton-loading-skeleton-loading-skeleton-loading/#post-427246
And update to this:
body.elementor-page:not([data-elementor-device-mode]) [class*=elementor-widget-etheme]:not(.etheme-elementor-widget-loaded):before,
body.elementor-page:not([data-elementor-device-mode]) [class*=elementor-widget-et-]:not(.etheme-elementor-widget-loaded):before,
body.elementor-default:not([data-elementor-device-mode]) [class*=elementor-widget-etheme]:not(.etheme-elementor-widget-loaded):before,
body.elementor-default:not([data-elementor-device-mode]) [class*=elementor-widget-et-]:not(.etheme-elementor-widget-loaded):before,
.etheme-elementor-lazy-button:before,
.elementor-widget.etheme-loading:before,
.elementor-widget.etheme-reloading:before {
content: '';
display: block;
position: relative; /* Changed from absolute to relative to fix overlapping issues */
top: 0;
left: 0;
width: calc(100%);
height: 100%;
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: shimmer 1.5s infinite;
z-index: 1;
border-radius: 10px;
margin-bottom: 10px;
margin-top: 10px;
box-sizing: border-box;
border-left: none !important;
margin-bottom: 25px !important;
}
@keyframes shimmer {
0% {
background-position: -200% 0;
}
100% {
background-position: 200% 0;
}
}
Hope it helps!
Dear saleh,
Choosing our theme reflects your commitment to quality, and for that, we’re genuinely grateful. As we constantly strive to elevate your experience, your feedback is an invaluable gift. Could you kindly take a moment to rate our product with 5 stars on ThemeForest?
Click here to share your insights: https://themeforest.net/downloads
Your support fuels our journey, and we appreciate it more than words can express.
Best Regards,
The 8Theme Team
The issue related to '‘skeleton loading skeleton loading skeleton loading’' has been successfully resolved, and the topic is now closed for further responses