Loading animation missing - Support | Kriesi.at

Tagged: Loading animation, woocommerce

Viewing 8 posts - 1 through 8 (of 8 total)

Author

Posts
November 10, 2016 at 9:39 am #710600
Siracher
Participant
Hi

I’ve installed Woocommerce Appoointments on this website:
timeout-naturkosmetik.ch

there should be a loading animation if you select a date to book a treatment.
The animation doesn’t show up. According the Support from appointments this is because enfold is blocking the animation.

Do you have an idea, how to solve this?
thanks
```
This happens because your theme is blocking the animation and is displaying something else. This SCSS works for the loading icon by default and icons is located inside WooCommerce plugin's folder:

.blockUI.blockOverlay:before {
	height: 1em;
	width: 1em;
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left: -.5em;
	margin-top: -.5em;
	display: block;
	content: &quot;&quot;;
	@include animation( spin 1s ease-in-out infinite );
	background: url(../images/icons/loader.svg) center center;
	background-size: cover;
	line-height: 1;
	text-align: center;
	font-size: 2em;
	color: rgba(#000,0.75);
}
```
November 14, 2016 at 6:53 am #711795

Ismael
Moderator

Hey Siracher!

Thank you for using Enfold.

Where should we see this animation? Could you please provide a screencast or a screenshot of it? I searched for the “blockOverlay” or “blockUI” container but I can’t find it.

Regards,
Ismael

November 14, 2016 at 8:44 am #711821

Siracher
Participant

Hi, thanks for the investigation.
You can see the animation on the developer Website, when you select a date and it loads the available slots:
https://demo.bizzthemes.com/woocommerce-appointments/product/massage/

I’m not sure about the css. According the developer it is scss and is located in the woocommerce plugin folder
and it is blocked by the theme. So I’m not sure if you see anything in source.

cheers

November 16, 2016 at 2:53 am #712699
Ismael
Moderator
Hi,

Thank you for the info. Please try this code in the Quick CSS field.
```
.blockUI.blockOverlay:before {
	height: 1em;
	width: 1em;
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left: -.5em;
	margin-top: -.5em;
	display: block;
	content: "";
	background: url(../images/icons/loader.svg) center center;
	background-size: cover;
	line-height: 1;
	text-align: center;
	font-size: 2em;
	color: rgba(#000,0.75);
    -webkit-animation: spin 1s ease-in-out infinite;
    -moz-animation:    spin 1s ease-in-out infinite;
    -o-animation:      spin 1s ease-in-out infinite;
    animation:         spin 1s ease-in-out infinite;
}
```
Best regards,
Ismael
November 16, 2016 at 5:29 pm #713072

Siracher
Participant

Hi Ismael

thanks a lot. the icon shows up now!
But it ist not animated… do you have an idea what the reason could be?

thanks

November 16, 2016 at 5:38 pm #713084
Andy
Inactive Moderator
Hi,

try to add an !important into Ismael’s code:
```
 -webkit-animation: spin 1s ease-in-out infinite !important;
    -moz-animation:    spin 1s ease-in-out infinite !important;
    -o-animation:      spin 1s ease-in-out infinite !important;
    animation:         spin 1s ease-in-out infinite !importan;
```
Best regards,
Andy
November 16, 2016 at 5:41 pm #713094

Siracher
Participant

thanks Andy

unfortunatley still no animation

cheers

November 19, 2016 at 5:49 am #714248

Ismael
Moderator

Hey!

Could you please ask the plugin developer for the “spin” css animation keyframes? I’m sure they’ll understand what it is. Once, they give you the code, please add it in the Quick CSS field.

Cheers!
Ismael
Author

Posts

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.