Support » Plugin: WP Smart Preloader » add custom loader

  • Hello ,
    I discovered your plugin I think it is interesting although I was trying to avoid plugins absolutely .. for optimization reasons. learning to insert code is a necessary pain. that’s why I’m looking for pure css loader

    unfortunately I have a little trouble to center them in full screen
    and your plugin (thank god!) allows that flexibility.

    here is the site I found for the css loader
    https://loading.io/css/

    can you show me in image or in code how to successfully center one of these loaders? with an full screen orange background div for example

    this one for example.

    <div class="lds-circle"><div></div></div>

    .lds-circle {
      display: inline-block;
      transform: translateZ(1px);
    }
    .lds-circle > div {
      display: inline-block;
      width: 64px;
      height: 64px;
      margin: 8px;
      border-radius: 50%;
      background: #fff;
      animation: lds-circle 2.4s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }
    @keyframes lds-circle {
      0%, 100% {
        animation-timing-function: cubic-bezier(0.5, 0, 1, 0.5);
      }
      0% {
        transform: rotateY(0deg);
      }
      50% {
        transform: rotateY(1800deg);
        animation-timing-function: cubic-bezier(0, 0.5, 0.5, 1);
      }
      100% {
        transform: rotateY(3600deg);
      }
    }
    • This topic was modified 4 months, 3 weeks ago by neosan.
Viewing 1 replies (of 1 total)
  • Plugin Author catchsquarethemes

    (@catchsquare)

    Hello @nreljed

    Sorry for the late response. In case if you are still stuck with the issue, you can do that through css with:
    position: absolute;
    top: 50%;
    left: 50%;

    If this doesn’t help, then please share us your website’s url and will look that for you.

    Thanks

    Gaurav

Viewing 1 replies (of 1 total)
  • You must be logged in to reply to this topic.