Announcement

Collapse
No announcement yet.
X
  • Filter
  • Time
Clear All
new posts

    showLoadingIndicator and SVG sprites

    Hello, I'm trying to use an SVG like this: https://fontawesome.com/icons/spinner?f=classic&s=solid

    for the FL.showLoadingIndicator, but it doesn't seem to work. Is the showLoadingIndicator supposed to work with SVG sprites?

    #2
    hi Claudio,

    The SVG spriting system is actually quite a bit of code, and we don't want to incorporate that into the FileLoader, which is meant to be very tiny, so that it can be inserted into a context like a plain HTML login page and start loading SmartClient resources & your application code in the background.

    However, you can do what you want pretty easily with a regular .svg file.

    If you download FontAwesome's "spinner-solid.svg", you could animate it and apply it to the FL loadingIndicator with code like this below - note that ChatGPT can help with generating keyframes for different animation effects

    Code:
    // CSS
    .spinner {
        width: 30px;
        height: 30px;
    }
    
    .spinner img {
        width: 100%;
        height: 100%;
        animation: spin 2s linear infinite;
    }
    
    @keyframes spin {
        0% {
         transform: rotate(0deg);
        }
        100% {
         transform: rotate(360deg);
        }
    }
    
    
    // JS
    
    isc.FL.loadingIndicatorSettings.style = "spinner";
    isc.FL.loadingIndicatorSettings.image = "spinner-solid.svg";
    isc.FL.loadingIndicatorSettings.imageWidth = 30;
    isc.FL.loadingIndicatorSettings.imageHeight = 30;
    
    isc.FL.showLoadingIndicator();
    Last edited by Isomorphic; 19 May 2024, 02:05.

    Comment


      #3
      Hello, sounds fair about the FileLoader, and thanks for the hint, works nicely

      Comment


        #4

        Hello, when using FL.showLoadingIndicator, I noticed that on mobile devices, both iPad and iPhone, and in both landscape and portrait orientations, it shows not centered.
        Instead, it appears to be positioned about 70% from the left.
        I believe the code configures it to be 45% from the left, so I'm not sure what's going on.

        Is this something you can fix, or do I need to change my approach?

        Comment

        Working...
        X