This section is for posting questions which are not directly related to WYSIWYG Web Builder.
Examples of off topics: web server configuration, hosting, programming related questions, third party scripts.
Note that these questions will generally not be answered by the administrators of this forum.
wwonderfull
Posts: 1276 Joined: Fri Aug 21, 2020 8:27 am
Post
by wwonderfull » Thu Apr 28, 2022 4:19 pm
For example I want to use a css preloader.
Where and how to put a css preloader code in wwb
Preloader CSS Example Code:
Code: Select all
.preloader14 {
display: block;
height: 50px;
width: 50px;
border: 5px solid transparent;
border-top-color: #000000;
border-bottom-color: #000000;
box-shadow: 0 0 10px skyblue;
border-radius: 50%;
-webkit-animation: preloader14 .8s linear infinite;
animation: preloader14 .8s linear infinite;
}
.preloader14:after {
content: "";
position: absolute;
top: 5px;
right: 5px;
bottom: 5px;
left: 5px;
border: 5px solid transparent;
border-radius: 50%;
background: #008744;
-webkit-animation: preloader14_after 1s linear infinite;
animation: preloader14_after 1s linear infinite;
}
@keyframes preloader14 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
50% {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes preloader14_after {
0% {
border-top: 5px solid #0057e7;
border-bottom: 5px solid #0057e7;
}
50% {
border-top: 5px solid #0057e7;
border-bottom: 5px solid #0057e7;
}
100% {
border-top: 5px solid #0057e7;
border-bottom: 5px solid #0057e7;
}
}
@-webkit-keyframes preloader14 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
50% {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-webkit-keyframes preloader14_after {
0% {
border-top: 5px solid #0057e7;
border-bottom: 5px solid #0057e7;
}
50% {
border-top: 5px solid #0057e7;
border-bottom: 5px solid #0057e7;
}
100% {
border-top: 5px solid #0057e7;
border-bottom: 5px solid #0057e7;
}
}
Pablo
Posts: 21708 Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:
Post
by Pablo » Thu Apr 28, 2022 5:13 pm
You can add custom code via page HTML or an HTML object.
Note that there is no support on custom code.
wwonderfull
Posts: 1276 Joined: Fri Aug 21, 2020 8:27 am
Post
by wwonderfull » Fri Apr 29, 2022 2:44 pm
one more thing I wanted to know. Does the built in preloader of wwb use any js script for the interval?
Pablo
Posts: 21708 Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:
Post
by Pablo » Fri Apr 29, 2022 3:16 pm
Does the built in preloader of wwb use any js script for the interval?
Yes
wwonderfull
Posts: 1276 Joined: Fri Aug 21, 2020 8:27 am
Post
by wwonderfull » Fri Apr 29, 2022 5:03 pm
Thank You pablo!
wanted to use pure css preloader from
https://loading.io/ they also have animated text and background
I think when adding the code after the body tag and using the html tool for the css the only thing I am missing is the script and to make the preloader function.
Although I understand the no support for custom code would like to request an easy way on using own made css animated preloader in wwb. That would be nice to have. Maybe a feature or maybe a tutorial on how to do it with custom code.
Pablo
Posts: 21708 Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:
Post
by Pablo » Fri Apr 29, 2022 5:15 pm
There is no way to for CSS to know when the page is fully loaded. That can only be done with JavaScript.
Note that your code is only for the animation. It does not implement pre-loader functionality.
Although I understand the no support for custom code would like to request an easy way on using own made css animated preloader in wwb.
You can add the code to the page HTML, there is no easier way.
wwonderfull
Posts: 1276 Joined: Fri Aug 21, 2020 8:27 am
Post
by wwonderfull » Fri Apr 29, 2022 5:20 pm
I think you are right pablo about that being the easiest way. But please consider making just one tutorial with css preloader from your guidance.