CSS Preloader

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.
Post Reply
wwonderfull
 
 
Posts: 1255
Joined: Fri Aug 21, 2020 8:27 am

CSS Preloader

Post by wwonderfull »

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;
  }
}
User avatar
Pablo
 
Posts: 21577
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: CSS Preloader

Post by Pablo »

You can add custom code via page HTML or an HTML object.
Note that there is no support on custom code.
wwonderfull
 
 
Posts: 1255
Joined: Fri Aug 21, 2020 8:27 am

Re: CSS Preloader

Post by wwonderfull »

one more thing I wanted to know. Does the built in preloader of wwb use any js script for the interval?
User avatar
Pablo
 
Posts: 21577
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: CSS Preloader

Post by Pablo »

Does the built in preloader of wwb use any js script for the interval?
Yes
wwonderfull
 
 
Posts: 1255
Joined: Fri Aug 21, 2020 8:27 am

Re: CSS Preloader

Post by wwonderfull »

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.
User avatar
Pablo
 
Posts: 21577
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: CSS Preloader

Post by Pablo »

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: 1255
Joined: Fri Aug 21, 2020 8:27 am

Re: CSS Preloader

Post by wwonderfull »

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. :D
User avatar
Pablo
 
Posts: 21577
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: CSS Preloader

Post by Pablo »

There is no generic way to do this, each CSS preloader works different.

But this may be useful:
https://wysiwygwebbuilder.com/loaders.html
https://wysiwygwebbuilder.com/pace.html
Post Reply