mirror of
https://github.com/wintercms/winter.git
synced 2024-06-28 05:33:29 +02:00
91 lines
2.1 KiB
Plaintext
91 lines
2.1 KiB
Plaintext
@import "../../../backend/assets/less/core/boot.less";
|
|
|
|
//
|
|
// Stripe loading indicator
|
|
// --------------------------------------------------
|
|
|
|
body.oc-loading, body.oc-loading * {
|
|
cursor: wait !important;
|
|
}
|
|
|
|
@stripe-loader-color: #0090c0;
|
|
@stripe-loader-height: 5px;
|
|
.stripe-loading-indicator {
|
|
|
|
height: @stripe-loader-height;
|
|
background: transparent;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
z-index: 2000;
|
|
|
|
.stripe, .stripe-loaded {
|
|
height: @stripe-loader-height;
|
|
display: block;
|
|
background: @stripe-loader-color;
|
|
position: absolute;
|
|
.box-shadow(~"inset 0 1px 1px -1px #FFF, inset 0 -1px 1px -1px #FFF");
|
|
}
|
|
|
|
.stripe {
|
|
width: 100%;
|
|
.animation(infinite-loader 60s linear);
|
|
}
|
|
|
|
.stripe-loaded {
|
|
width: 0;
|
|
.opacity(0);
|
|
}
|
|
|
|
&.loaded {
|
|
.opacity(0);
|
|
.transition(opacity .4s linear);
|
|
.transition-delay(.3s);
|
|
.stripe-loaded {
|
|
.opacity(1);
|
|
.transition(width .3s linear);
|
|
width: 100% !important;
|
|
}
|
|
}
|
|
|
|
&.hide {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
//
|
|
// Infinite loading animation
|
|
// --------------------------------------------------
|
|
|
|
@startCount: 1;
|
|
@startVal: 28%;
|
|
@start: 0;
|
|
.infinite-class (@index, @val, @count) when (@index = 0) {
|
|
@tmpSelector: ~"@{index}%";
|
|
@{tmpSelector} { width: 0%; }
|
|
.infinite-class(@index + 10, @val + (@val / (@count * 2)), @count + 1);
|
|
}
|
|
.infinite-class (@index, @val, @count) when (@index < 101) and (@index > 9) {
|
|
@tmpSelector: ~"@{index}%";
|
|
@{tmpSelector} { width: @val; }
|
|
.infinite-class(@index + 10, @val + (@val / @count), @count * 2);
|
|
}
|
|
|
|
@-moz-keyframes infinite-loader {
|
|
.infinite-class(@start, @startVal, @startCount);
|
|
}
|
|
@-webkit-keyframes infinite-loader {
|
|
.infinite-class(@start, @startVal, @startCount);
|
|
}
|
|
@-o-keyframes infinite-loader {
|
|
.infinite-class(@start, @startVal, @startCount);
|
|
}
|
|
@-ms-keyframes infinite-loader {
|
|
.infinite-class(@start, @startVal, @startCount);
|
|
}
|
|
@keyframes infinite-loader {
|
|
.infinite-class(@start, @startVal, @startCount);
|
|
}
|