Flash Sale for Premium Subscriptions

50% off annual premium licence subscription.

Get 50%off now

Page Loader

About Support App Page Loader

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #6299
    Avatar for kcclemokcclemo
    Participant

    I see that the latest update (v3.4.138) introduced a new loader. I had overridden the loader with my own custom page loader. Would you mind providing the HTML and class names that the new loader is using along with the new button styles so that I can override them to fit with my custom theme, please?

    #6300
    Avatar for Andy MoyleAndy Moyle
    Keymaster

    The new spinner has the same html and filename as before

    and still not centred annoyingly.

    The button css is as follows.
    .linkButton use on anchor links and button is the class on a button or span tag

    .linkButton,.button{
    appearance: button;
    background-color: #1899D6;
    border: solid transparent;
    border-radius: 16px;
    border-width: 0 0 4px;
    box-sizing: border-box;
    color: #FFFFFF;
    cursor: pointer;
    display: inline-block;
    font-family: din-round,sans-serif;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .8px;
    line-height: 20px;
    margin: 0;
    outline: none;
    overflow: visible;
    padding: 13px 16px;
    text-align: center;
    text-transform: uppercase;
    touch-action: manipulation;
    transform: translateZ(0);
    transition: filter .2s;
    user-select: none;
    -webkit-user-select: none;
    vertical-align: middle;
    white-space: nowrap;

    }

    .linkButton:after,.button:after {
    background-clip: padding-box;
    background-color: #1CB0F6;
    border: solid transparent;
    border-radius: 16px;
    border-width: 0 0 4px;
    bottom: -4px;
    content: “”;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: -1;
    }

    .linkButton:main,.button:main,
    .linkButton:main,.button:focus {
    user-select: auto;
    }

    .linkButton:hover:not(:disabled),.button:hover:not(:disabled) {
    filter: brightness(1.1);
    }

    .linkButton:disabled,.button:disabled {
    cursor: auto;
    }

    .red:after{background-color:#FE484A!important;color:#FFF}
    .red{background-color:#EB2B2B!important;color:#FFF}
    .green{background-color:#53AE49!important;color:#FFF}
    .green:after{background-color:#80CE02!important;color:#FFF}
    .amber:after{background-color:#FFC800!important;color:#FFF}
    .amber{background-color:#FFBC00!important;color:#FFF}
    .grey:after{background-color:#E5E5E5!important;color:#FFF}
    .grey{background-color:#AFAFAF!important;color:#FFF}
    a.linkButton{text-decoration:none;}

    #6306
    Avatar for kcclemokcclemo
    Participant

    Awesome, thank you!

    I was able to get my loader somewhat centered using these styles if it helps:

    
    body {
      ...
      max-width: 375px;
      margin: 20px auto;
      padding: 0 10px 0 10px;
      ...
    }
    .waiting {
      content: url("https://northstarbaptistchurch.org/logo-outline.svg");
      height: auto;
      left: 247px;
      width: 128px;
    }
    
Viewing 3 posts - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.