Showing Loading Spinner at fixed place in layout


#1

I don’t know if i am asking it correctly but what i want to achieve is, when a user click on certain link on my page i want to show the spinner spinning only at certain free space of the layout instead of replacing the template with spinner template. Some of the example of what i am trying to say is at following sites:
1 ) Bustle
2) Ello

In above sites, when user click the main menu link the spinner is only showing at the side of the logo and not replacing the whole template with spinner template. And when the loading completes the spinner is not shown.


#2

I’m not too sure what you mean, but I think what you want is to insert the spinner template inside another template, like this:

<template name = "main">
    {{>spinner}}
</template>
<template name = "spinner">
    <!-- some code for the spinner -->
<template>

#3

I mean, as one of the site i have listed above, … like in bustle.com when you click any link on main menu, the spinner is only shown at the side of the logo when contents are loading… i want to achieve similar effect


#4

Sorry, I wasn’t sure about what you meant at first. I think you could get a GIF with a spinner somewhere and use it like this:

<template name = "main">
    <h1>
        Heading
        {{#if displaySpinner}}
            <image src = "spinner.gif" />
        {{/if}}
    </h1>
</template>

You would have to figure out the helper code of “displaySpinner” as I have no idea of how to do that part.

If you are using iron:router, then you might want to look at the iron-router-progress package.


#5

thank you. you are the first one ever to answer my help on this or any other forum for meteor.