[TH] Loading Improved [Deleted]

Lukas W.

Lukas W.

Well-known member
katsulynx submitted a new resource:

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

[KL] Loading Improved
Description
You don't like the default XenForo loading icon? You would rather have a fancy css3 Loader from around the web to display that your page is working? Now you can!

Features
  • Replace the default XenForo Loading Icon
  • Create your own Icon!...
Click to expand...

Read more about this resource...
 
Rob said:
Could this be used to implement the PACE bounce style? If so, how?
Click to expand...

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>
 
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.
 
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:
In which file can i change the setting of preset animations (color, txt translation etc)? Thanks
 
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.
 
Nice. Thank you.
May i formulate a suggestion : why not moving the preset styling in ACP > Appearance > Style properties ?
 
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.
 
katsulynx said:
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.
Click to expand...

Copy/paste if you only want the corner indicator.
 
You must log in or register to reply here.

Similar threads

Lukas W.
[TH] Loading Improved [Deleted]
Replies
4
Views
718
Kevin
Kevin
Back
Top Bottom