Tagged: 

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • May 3, 2017 at 12:47 pm #787089
    asteratos

    Hello,

    I would like to show the pre-loader icon (same as already exists on loading pages) but Before the loading of iframe modal content.

    i.e. example.com?iframe=true opens a modal showing iframe content.

    How can we be able to show a pre-loader icon (for instance the same icon as shown in loading enfold pages after activate it on theme settings) in order for the users NOT to see a black/empty screen, until starts the modal showing up?

    In case you have any misunderstanding, here is again the process:

    1. user clicks on a link, where we already have an iframed url (?iframe=true)
    2. First is shown a black screen –> We need to show a pre-loader icon <–
    3. iframe starts showing the already built-in enfold preloader icon of iframe content
    4. end of the pre-loading icon and the modal shows the complete iframed page

    I experimented with css to both .mfp-iframe & .mfp-iframe-scaler including:
    { background-image: url(/my-image-gif-path); }
    also
    { background: url(‘/my-image-gif-path’); }

    however still no results.

    Could you please advise a good solution on this?

    Thank you!
    George

    May 4, 2017 at 4:53 am #787567
    Ismael

    Hey asteratos,

    Thank you for using Enfold.

    Please add this css code in the Quick CSS field.

    /* Content loading is in progress */
.mfp-s-loading  { background: red !important; }
.mfp-s-loading .mfp-content, .mfp-s-loading .mfp-iframe-scaler iframe {
      opacity; 0 !important; 
}
.mfp-s-ready .mfp-content { 
    opacity; 1 !mportant; 
    -webkit-transition: opacity 2s; /* Safari */
    transition: opacity 2s;
 }

    Adjust the values as needed.

    Best regards,
    Ismael

    May 4, 2017 at 9:18 am #787655
    asteratos

    Hey Ismael thank you for this!

    I tested and I didn’t see a “red” background for instance during loading.

    I see only black screen during the loading.

    Does it work for you ?

    I sent you a prv url sample.

    May 5, 2017 at 11:07 am #788308
    Ismael

    Hi!

    Thank you for the update. We modified the css code a bit. Please try it again.

    Regards,
    Ismael

    May 5, 2017 at 3:23 pm #788432
    asteratos

    Hello!

    Did this work for you?

    I test it, but I don’t see the red background as per the example code.

    I appreciate your help at your earliest convenience,

    George

    • This reply was modified 7 years, 6 months ago by asteratos.
    May 6, 2017 at 9:34 pm #788944
    Basilis

    Hi,

    Have you cleared yur cache?
    What is the page you are using it so we can test also?

    Best regards,
    Basilis

    March 20, 2018 at 12:17 pm #929772
    adler77777

    Above solution didn’t work for me.
    For anyone who is still looking for an iframe loading gif animation, i was successfull with adding this css code::

    .mfp-iframe-scaler iframe {
    background: white url(/wp-admin/images/spinner-2x.gif) center no-repeat !important;
    }

    where the url can be replaced by a cooler loading animation of course.

    • This reply was modified 6 years, 8 months ago by adler77777.
    March 21, 2018 at 9:07 pm #930849
    Basilis

    Hi,

    Thank you for providing that for us!

    Best regards,
    Basilis

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Show loading icon also while opening iframe modal’ is closed to new replies.