Thanks for this suggestion. The loading animation, like the color palette, is deliberately as unobtrusive and neutral as possible, because it’s hard to know what will clash with the design aesthetics of any given site.
You can use CSS to customize the loading element, just like almost every aspect of ICS Calendar’s output. The CSS selector is:
.r34ics-ajax-container.loading:before
The animation is the background image on that element, so you could change it to something else, or as a very simple example, you could make it 3 times bigger like this:
.r34ics-ajax-container.loading:before { transform: scale(3); }
Thread Starter
boblib
(@boblib)
Thanks for the proposal. I tried and in my case it didn’t change anything, and since it is appearing rather shortly, I can’t use the usual developer browser tools to study and tweak it. (my dev skills are not so large)
below an example of what I tried with no success
.r34ics-ajax-container.loading:before {
transform: scale(8);
color: #0000FF;
}
and even this didn’t change anything:
.r34ics-ajax-container.loading:before {
transform: scale(8) !important;
color: #0000FF !important;
}
any suggestion ?
Thanks
I apologize; I didn’t account for the fact that the animation manipulates the transform property.
The size of the element is actually specified directly in the CSS too, so you could do something like this:
.r34ics-ajax-container.loading:before { height: 200px; width: 200px; }
The color attribute won’t have any effect because that only applies to text, not the elements of the SVG background image. If you want to change the color, you’ll need to replace the background image on the element. You could create your own image and use the background-image property on this CSS selector. It would still have the same spinning animation.
Thread Starter
boblib
(@boblib)
Great, this works fine. The animation is now large enough to avoid any misunderstanding.
I tried to center the animation (on mobile screens) and didn’t manage with the instruction I knew. If you know a way that will be perfect.
Anyway this has solved my issue. Thanks again for your quick answers.
The animation should be centered both horizontally and vertically within the container area the calendar is loading into. I would need to see your site in a browser to offer additional suggestions if it’s not loading properly. I would need to use the inspector to see if there is conflicting CSS.
If you don’t want to share the link here, you can use the support request form. (Feel free to select “General inquiry” from the dropdown so you don’t have to fill out all of the detailed fields, and just include the URL of the page with the calendar in the text box.)
