Canvas Support

Changing page preloader

9 replies · opened Apr 5, 2017

JjohnjohnApr 5, 2017

Hello,

Am using the default page preloader where you see 3 bullets resize from big to small.
How can i make it 6 bullets instead?

Thank you!

John

DdaihloApr 5, 2017

you see 3 bullets resize from big to small

It is an image, it is not three `

  • ` in a row being dynamically resized.

To change the preloader, you need to change the image.

Look here, under 'start >> page transition'.

JjohnjohnApr 5, 2017

yes, i mean with data-loader="1"
how to change 3 dots to 6 dots?

DdaihloApr 7, 2017

Squint?

JjohnjohnApr 8, 2017

Tried but get 7 dots instead of 6

JjohnjohnApr 10, 2017

hello SemiColonWeb,

maybe you can give me a proper solution to this? :)

I know the dots are generated by css3, but how to make it have 6 dots instead of 3 ?
You can provide the css, i can add

Thank you!

DdaihloApr 10, 2017

Lol, unlucky ^^

JjohnjohnApr 18, 2017

hello SemiColonWeb,

Could you please help with this?
Thank you

SSemicolon WebSTAFFApr 18, 2017

Hello,

[sb_private_reply]Apologies about the Delays in replying to your Support Query! [/sb_private_reply]To make this work you will need to Add Custom CSS Codes and modify the JS Codes slightly to make this work.

Please add the following CSS Code: 

.css3-spinner .css3-spinner-bounce1 {
	margin-left: -55px;
	-webkit-animation-delay: -0.96s;
	animation-delay: -0.96s;
}

.css3-spinner .css3-spinner-bounce2 {
	margin-left: -33px;
	-webkit-animation-delay: -0.80s;
	animation-delay: -0.80s;
}

.css3-spinner .css3-spinner-bounce3 {
	margin-left: -11px;
	-webkit-animation-delay: -0.64s;
	animation-delay: -0.64s;
}

.css3-spinner .css3-spinner-bounce4 {
	margin-left: 11px;
	-webkit-animation-delay: -0.48s;
	animation-delay: -0.48s;
}

.css3-spinner .css3-spinner-bounce5 {
	margin-left: 33px;
	-webkit-animation-delay: -0.32s;
	animation-delay: -0.32s;
}

.css3-spinner .css3-spinner-bounce6 {
	margin-left: 55px;
	-webkit-animation-delay: -0.16s;
	animation-delay: -0.16s;
}

and then find the following JS Code in the js/functions.js File: 

if( !loaderStyleHtml ) { loaderStyleHtml = ''; }

and replace it with: 

if( !loaderStyleHtml ) { loaderStyleHtml = ''; }

This will definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

JjohnjohnApr 19, 2017

Thank you!

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard