1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

[KL] Loading Improved 2.0.0

Replace the default XenForo AjaxLoader with something fancy!

  1. katsulynx

    katsulynx Well-Known Member

    katsulynx submitted a new resource:

    [KL] Loading Improved - Replace the default XenForo AjaxLoader with something fancy!

    Read more about this resource...
     
  2. Rob

    Rob Well-Known Member

    Could this be used to implement the PACE bounce style? If so, how?
     
  3. katsulynx

    katsulynx Well-Known Member

    Set it to custom and use the following CSS and HTML.
    Code:
    .pace {
      width: 140px;
      height: 300px;
      position: fixed;
      z-index: 2000;
      -webkit-transition: all 2s linear 0s;
      -moz-transition: all 2s linear 0s;
      transition: all 2s linear 0s;
      -webkit-transform: scale(.25);
      -moz-transform: scale(.25);
      -ms-transform: scale(.25);
      -o-transform: scale(.25);
      transform: scale(.25);
      opacity: 1;
    }
    
    .pace .pace-activity {
      width: 140px;
      height: 140px;
      border-radius: 70px;
      background: #29d;
      position: absolute;
      top: 0;
      z-index: 1911;
      -webkit-animation: pace-bounce 1s infinite;
      -moz-animation: pace-bounce 1s infinite;
      -o-animation: pace-bounce 1s infinite;
      -ms-animation: pace-bounce 1s infinite;
      animation: pace-bounce 1s infinite;
    }
    
    .pace .pace-progress {
      position: absolute;
      display: block;
      left: 50%;
      bottom: 0;
      z-index: 1910;
      margin-left: -30px;
      width: 60px;
      height: 75px;
      background: rgba(20, 20, 20, .1);
      box-shadow: 0 0 20px 35px rgba(20, 20, 20, .1);
      border-radius: 30px / 40px;
      -webkit-transform: scaleY(.3) !important;
      -moz-transform: scaleY(.3) !important;
      -ms-transform: scaleY(.3) !important;
      -o-transform: scaleY(.3) !important;
      transform: scaleY(.3) !important;
      -webkit-animation: pace-compress .5s infinite alternate;
      -moz-animation: pace-compress .5s infinite alternate;
      -o-animation: pace-compress .5s infinite alternate;
      -ms-animation: pace-compress .5s infinite alternate;
      animation: pace-compress .5s infinite alternate;
    }
    
    @-webkit-keyframes pace-bounce {
      0% {
        top: 0;
        -webkit-animation-timing-function: ease-in;
      }
      40% {}
      50% {
        top: 140px;
        height: 140px;
        -webkit-animation-timing-function: ease-out;
      }
      55% {
        top: 160px;
        height: 120px;
        border-radius: 70px / 60px;
        -webkit-animation-timing-function: ease-in;
      }
      65% {
        top: 120px;
        height: 140px;
        border-radius: 70px;
        -webkit-animation-timing-function: ease-out;
      }
      95% {
        top: 0;
        -webkit-animation-timing-function: ease-in;
      }
      100% {
        top: 0;
        -webkit-animation-timing-function: ease-in;
      }
    }
    
    @-moz-keyframes pace-bounce {
      0% {
        top: 0;
        -moz-animation-timing-function: ease-in;
      }
      40% {}
      50% {
        top: 140px;
        height: 140px;
        -moz-animation-timing-function: ease-out;
      }
      55% {
        top: 160px;
        height: 120px;
        border-radius: 70px / 60px;
        -moz-animation-timing-function: ease-in;
      }
      65% {
        top: 120px;
        height: 140px;
        border-radius: 70px;
        -moz-animation-timing-function: ease-out;}
      95% {
        top: 0;
        -moz-animation-timing-function: ease-in;
      }
      100% {top: 0;
        -moz-animation-timing-function: ease-in;
      }
    }
    
    @keyframes pace-bounce {
      0% {
        top: 0;
        animation-timing-function: ease-in;
      }
      50% {
        top: 140px;
        height: 140px;
        animation-timing-function: ease-out;
      }
      55% {
        top: 160px;
        height: 120px;
        border-radius: 70px / 60px;
        animation-timing-function: ease-in;
      }
      65% {
        top: 120px;
        height: 140px;
        border-radius: 70px;
        animation-timing-function: ease-out;
      }
      95% {
        top: 0;
        animation-timing-function: ease-in;
      }
      100% {
        top: 0;
        animation-timing-function: ease-in;
      }
    }
    
    @-webkit-keyframes pace-compress {
      0% {
        bottom: 0;
        margin-left: -30px;
        width: 60px;
        height: 75px;
        background: rgba(20, 20, 20, .1);
        box-shadow: 0 0 20px 35px rgba(20, 20, 20, .1);
        border-radius: 30px / 40px;
        -webkit-animation-timing-function: ease-in;
      }
      100% {
        bottom: 30px;
        margin-left: -10px;
        width: 20px;
        height: 5px;
        background: rgba(20, 20, 20, .3);
        box-shadow: 0 0 20px 35px rgba(20, 20, 20, .3);
        border-radius: 20px / 20px;
        -webkit-animation-timing-function: ease-out;
      }
    }
    
    @-moz-keyframes pace-compress {
      0% {
        bottom: 0;
        margin-left: -30px;
        width: 60px;
        height: 75px;
        background: rgba(20, 20, 20, .1);
        box-shadow: 0 0 20px 35px rgba(20, 20, 20, .1);
        border-radius: 30px / 40px;
        -moz-animation-timing-function: ease-in;
      }
      100% {
        bottom: 30px;
        margin-left: -10px;
        width: 20px;
        height: 5px;
        background: rgba(20, 20, 20, .3);
        box-shadow: 0 0 20px 35px rgba(20, 20, 20, .3);
        border-radius: 20px / 20px;
        -moz-animation-timing-function: ease-out;
      }
    }
    
    @keyframes pace-compress {
      0% {
        bottom: 0;
        margin-left: -30px;
        width: 60px;
        height: 75px;
        background: rgba(20, 20, 20, .1);
        box-shadow: 0 0 20px 35px rgba(20, 20, 20, .1);
        border-radius: 30px / 40px;
        animation-timing-function: ease-in;
      }
      100% {
        bottom: 30px;
        margin-left: -10px;
        width: 20px;
        height: 5px;
        background: rgba(20, 20, 20, .3);
        box-shadow: 0 0 20px 35px rgba(20, 20, 20, .3);
        border-radius: 20px / 20px;
        animation-timing-function: ease-out;
      }
    }
    HTML:
    <div class="pace  pace-active"><div class="pace-progress" data-progress-text="100%" data-progress="99" style="width: 100%;">
      <div class="pace-progress-inner"></div>
    </div>
    <div class="pace-activity"></div></div>
     
  4. JABRONI

    JABRONI Well-Known Member

    Any clue on how to make it look like the one on YouTube? or like the old addon?
     
  5. katsulynx

    katsulynx Well-Known Member

    It's literally just copy/pasting the html&css from pace.
     
  6. JABRONI

    JABRONI Well-Known Member

    Yeah, I tried that. Didn't work. Guess it probably has something to do with no "top" position & only corner positions.

    Thanks anyways.
     
  7. katsulynx

    katsulynx Well-Known Member

    Guess I read over that a little bit too fast this morning. To clarify this: You can potentially use all PACE designs, but the addon itself doesn't "calculate" any Ajax-Progress and therefor logically doesn't update any progress bar. So the bar is there, but as it is showing "0% Progress", it's obviously empty. You could mimic progress by creating a fake filling animation - which is essentially what pace did, at least I didn't see it tracking any real progress over the course of two months - or go with another design. Generally spoken I don't support the idea of fake progress bars, as sometimes the loading takes longer than the bar acutally indicates and the user feels quite messed with when the bar is nearly full and then just stops showing any progress. They're likely to wait patiently if it's just showing a static loading symbol.
     
    rafass likes this.
  8. BobbyWibowo

    BobbyWibowo Well-Known Member

    Is there any site where I can see some examples of the default options?
    EDIT: Never mind, found some demos from other thread. I'm also using this add-on now. I picked some random style from PACE website and modified to my liking. Thanks for the add-on! As far as my tests go, it works well with anything that shows the AJAX load bar.
     
    Last edited: Nov 10, 2015
  9. katsulynx

    katsulynx Well-Known Member

  10. kankan

    kankan Active Member

    Hello
    Does it run with XF 1.4 ?
     
  11. katsulynx

    katsulynx Well-Known Member

    I haven't tried yet.
     
  12. kankan

    kankan Active Member

    Tested under 1.4 : running smoothly.
     
    Last edited: Dec 14, 2015
    katsulynx likes this.
  13. kankan

    kankan Active Member

    In which file can i change the setting of preset animations (color, txt translation etc)? Thanks
     
  14. katsulynx

    katsulynx Well-Known Member

    The presets can be found in a more or less readable way in: js/KL/LoadingImproved/acp_presets.js
    You need to change the file in the parent folder to take effect on your installation. However I recommend overriding the properties in your Extra.css, otherwise they'll be overridden when you update the addon in the future.
     
    kankan likes this.
  15. kankan

    kankan Active Member

    Nice. Thank you.
    May i formulate a suggestion : why not moving the preset styling in ACP > Appearance > Style properties ?
     
  16. katsulynx

    katsulynx Well-Known Member

    Hm, this is a little tricky because most of the default loaders rely on many different HTML elements. Bringing them all together somehow in style properties would be rather difficult compared to have them as "simple css". I originally planed to store them in a css-Template, but I thought about it for a while and recognized that it'd force every user to load every preset even though only a single one or even none at all would be in use. Currently only the preset that is actually in use gets shipped over to the user. So while style properties would indeed be nice for greater customization, handling them in this specific case is rather difficult and could result in an unwanted bloat of the addon.
     
  17. MasonK

    MasonK Active Member

    Anyway to make PACE flash work with this?
     
  18. katsulynx

    katsulynx Well-Known Member

    Copy/paste if you only want the corner indicator.
     
  19. BobbyWibowo

    BobbyWibowo Well-Known Member

    Am I the only one who's having this issue?
    quote_chars.png
     
  20. katsulynx

    katsulynx Well-Known Member

    Does this also happen with different presets?
     

Share This Page