Tagged: ,

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • November 10, 2016 at 9:39 am #710600
    Siracher

    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: "";
	@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

    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

    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

    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

    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

    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

    thanks Andy

    unfortunatley still no animation

    cheers

    November 19, 2016 at 5:49 am #714248
    Ismael

    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.