Skeleton loading skeleton loading skeleton loading

This topic has 11 replies, 3 voices, and was last updated 2 hours, 36 minutes ago ago by Andrew Mitchell

  • Avatar: saleh
    saleh
    Participant
    December 10, 2024 at 08:02

    how can i change the circle loading with skeleton loading ?

    Content is visible for topic creator and
    support staff only.
    Files is visible for topic creator and
    support staff only.
    10 Answers
    Avatar: Justin
    Luca Rossi
    Support staff
    December 11, 2024 at 06:58

    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

    Avatar: saleh
    saleh
    Participant
    December 11, 2024 at 14:23

    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

    Content is visible for topic creator and
    support staff only.
    Files is visible for topic creator and
    support staff only.
    Avatar: saleh
    saleh
    Participant
    December 12, 2024 at 10:35

    is there any response ?

    Content is visible for topic creator and
    support staff only.
    Avatar: Justin
    Luca Rossi
    Support staff
    December 13, 2024 at 09:09

    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!

    Avatar: saleh
    saleh
    Participant
    December 16, 2024 at 08:56

    i put this code in xstore option global css but doesn change any thing still same circle loading spinner

    Content is visible for topic creator and
    support staff only.
    Avatar: Justin
    Luca Rossi
    Support staff
    December 17, 2024 at 13:03

    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

    Avatar: saleh
    saleh
    Participant
    December 17, 2024 at 13:18

    i dont want to modify this skeleton i want to display it rather circle spinner loading

    Content is visible for topic creator and
    support staff only.
    Avatar: saleh
    saleh
    Participant
    December 18, 2024 at 07:28

    is there any response please

    Content is visible for topic creator and
    support staff only.
    Avatar: Justin
    Luca Rossi
    Support staff
    December 19, 2024 at 03:55

    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!

    Avatar: Andrew Mitchell
    Andrew Mitchell
    Support staff
    December 19, 2024 at 09:01

    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

  • Viewing 11 results - 1 through 11 (of 11 total)

The issue related to '‘skeleton loading skeleton loading skeleton loading’' has been successfully resolved, and the topic is now closed for further responses

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.