I want to add a little preloader during an operation.
In V3 I was just doing :
$$('#element').html('<div class="preloader"></div>');
But with the V4 it doesn’t work anymore, probably because some content is added dynamically inside this div.
So how can I do ?
I don’t want to use app.preloader.show() because I need a little preloader beside an element, not a big preloader on the whole page.
Thanks
you can use
app.preloader.show(color)
http://framework7.io/docs/preloader.html#preloader-overlay-preloader-api
// Show preloader before Ajax request
app.preloader.show();
// Perform Ajax request
app.request.get('someurl.html', function (data) {
// Hide preloader when Ajax request completed
app.preloader.hide();
});
Hi, thanks for your answer but did you read my post ? ^^
I don’t want to use app.preloader.show() because I need a little preloader beside an element, not a big preloader on the whole page.
Hi sry yes.
I read it before leaving home. And answer it late. So i just read the title and answer. Sorry about that.
try by adding
app.Dom7(ELEMENT).html(`<div class="preloader my-preloader"></div>`)
and then initialize it
app.preloader.init('.my-preloader')
In v4 the preloader now has content in iOS and in MD:
$$('#element').html('<div class="preloader">' + app.utils.iosPreloaderContent + '</div>');
or
$$('#element').html('<div class="preloader">' + app.utils.mdPreloaderContent + '</div>');
This code will not work as intended. for example, if i use,
$$('#element').html('<div class="preloader">'+app.utils.iosPreloaderContent+'</div>
It will only work when user is using iphone and will not show anything on android.
That is exactly how it is intended to be used.
Because in this case you need to use MD-theme specific property https://framework7.io/docs/utils.html#preloadercontent
So what should be the approach? A test to see the current device and then changing preloader utils or use aurora theme?
