front-utils/src/lubusy.css

.lu-busy{
    position:absolute;
    top:0px;
    left:0px;
    right:0px;
    bottom:0px;
    z-index:1001;
}

.lu-busy-animation.ng-hide-add,
.lu-busy-animation.ng-hide-remove {
    -webkit-transition:all .3s ease;
    -moz-transition:all .3s ease;
    -o-transition:all .3s ease;
    transition:all .3s ease;
    display:block !important;
}
.lu-busy-animation.ng-hide-remove {
    opacity:0;
    -webkit-transform:translate(0px,-40px);
    -moz-transform:translate(0px,-40px);
    -ms-transform:translate(0px,-40px);
    -o-transform:translate(0px,-40px);
    transform:translate(0px,-40px);
}
.lu-busy-animation.ng-hide-remove.ng-hide-remove-active {
    opacity:1;
    -webkit-transform:translate(0px,0px);
    -moz-transform:translate(0px,0px);
    -ms-transform:translate(0px,0px);
    -o-transform:translate(0px,0px);
    transform:translate(0px,0px);
}
.lu-busy-animation.ng-hide-add {
    opacity:1;
    -webkit-transform:translate(0px,0px);
    -moz-transform:translate(0px,0px);
    -ms-transform:translate(0px,0px);
    -o-transform:translate(0px,0px);
    transform:translate(0px,0px);
}
.lu-busy-animation.ng-hide-add.ng-hide-add-active {
    opacity:0;
    -webkit-transform:translate(0px,-40px);
    -moz-transform:translate(0px,-40px);
    -ms-transform:translate(0px,-40px);
    -o-transform:translate(0px,-40px);
    transform:translate(0px,-40px);
}

.lu-busy-backdrop {
    background-color:white;
    opacity:.7;
}

.lu-busy-backdrop-animation.ng-hide-add,
.lu-busy-backdrop-animation.ng-hide-remove {
    -webkit-transition:opacity .3s ease;
    -moz-transition:opacity .3s ease;
    -o-transition:opacity .3s ease;
    transition:opacity .3s ease;
    display:block !important;
}

.lu-busy-backdrop-animation.ng-hide {
    opacity:0;
}

/* All styles below are for the default template. */

.lu-busy-default-wrapper {
    text-align:center;
}

.lu-busy-default-sign{
    display: inline-block;
    position:relative;
    z-index:1002;
    padding-bottom: 6px;
    color:#333333;
    text-shadow:0 1px 1px rgba(255, 255, 255, 0.75);
    background-color:#e9eeee;
    border:1px solid #dddddd;
    border-top-width:0;
    -webkit-border-radius:7px;
    -moz-border-radius:7px;
    border-radius:7px;
    border-top-left-radius:0;
    border-top-right-radius:0;
    -webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
    -moz-box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
}
.lu-busy-default-text{
    margin:7px 12px 0 40px;
    font-size:16px;
    color:#555;
    text-align: left;
    max-width: 400px;
}
.lu-busy-default-error-text{
    margin:7px 12px 0 12px;
    font-size:16px;
    color:#555;
    text-align: left;
    max-width: 400px;
}
.lu-busy-default-spinner{
    position:absolute;
    width:25px;
    height:25px;
    display:inline-block;
    top:6px;
    left:8px;
}
.lu-busy-default-spinner div{
    width:12%;
    height:26%;
    background:#000;
    position:absolute;
    left:44.5%;
    top:37%;
    opacity:0;
    -webkit-animation:lu-busy-spinner-anim 1s linear infinite;
    -moz-animation:lu-busy-spinner-anim 1s linear infinite;
    -ms-animation:lu-busy-spinner-anim 1s linear infinite;
    -o-animation:lu-busy-spinner-anim 1s linear infinite;
    animation:lu-busy-spinner-anim 1s linear infinite;
    -webkit-border-radius:50px;
    -moz-border-radius:50px;
    border-radius:50px;
    -webkit-box-shadow:0 0 3px rgba(0,0,0,0.2);
    -moz-box-shadow:0 0 3px rgba(0,0,0,0.2);
    box-shadow:0 0 3px rgba(0,0,0,0.2);
}
.lu-busy-default-spinner div.bar1{
    -webkit-transform:rotate(0deg) translate(0, -142%);
    -moz-transform:rotate(0deg) translate(0, -142%);
    -ms-transform:rotate(0deg) translate(0, -142%);
    -o-transform:rotate(0deg) translate(0, -142%);
    transform:rotate(0deg) translate(0, -142%);
    -webkit-animation-delay:0s;
    -moz-animation-delay:0s;
    -ms-animation-delay:0s;
    -o-animation-delay:0s;
    animation-delay:0s;
}
.lu-busy-default-spinner div.bar2{
    -webkit-transform:rotate(30deg) translate(0, -142%);
    -moz-transform:rotate(30deg) translate(0, -142%);
    -ms-transform:rotate(30deg) translate(0, -142%);
    -o-transform:rotate(30deg) translate(0, -142%);
    transform:rotate(30deg) translate(0, -142%);
    -webkit-animation-delay:-0.9167s;
    -moz-animation-delay:-0.9167s;
    -ms-animation-delay:-0.9167s;
    -o-animation-delay:-0.9167s;
    animation-delay:-0.9167s;
}
.lu-busy-default-spinner div.bar3{
    -webkit-transform:rotate(60deg) translate(0, -142%);
    -moz-transform:rotate(60deg) translate(0, -142%);
    -ms-transform:rotate(60deg) translate(0, -142%);
    -o-transform:rotate(60deg) translate(0, -142%);
    transform:rotate(60deg) translate(0, -142%);
    -webkit-animation-delay:-0.833s;
    -moz-animation-delay:-0.833s;
    -ms-animation-delay:-0.833s;
    -o-animation-delay:-0.833s;
    animation-delay:-0.833s;
}
.lu-busy-default-spinner div.bar4{
    -webkit-transform:rotate(90deg) translate(0, -142%);
    -moz-transform:rotate(90deg) translate(0, -142%);
    -ms-transform:rotate(90deg) translate(0, -142%);
    -o-transform:rotate(90deg) translate(0, -142%);
    transform:rotate(90deg) translate(0, -142%);
    -webkit-animation-delay:-0.75s;
    -moz-animation-delay:-0.75s;
    -ms-animation-delay:-0.75s;
    -o-animation-delay:-0.75s;
    animation-delay:-0.75s;
}
.lu-busy-default-spinner div.bar5{
    -webkit-transform:rotate(120deg) translate(0, -142%);
    -moz-transform:rotate(120deg) translate(0, -142%);
    -ms-transform:rotate(120deg) translate(0, -142%);
    -o-transform:rotate(120deg) translate(0, -142%);
    transform:rotate(120deg) translate(0, -142%);
    -webkit-animation-delay:-0.667s;
    -moz-animation-delay:-0.667s;
    -ms-animation-delay:-0.667s;
    -o-animation-delay:-0.667s;
    animation-delay:-0.667s;
}
.lu-busy-default-spinner div.bar6{
    -webkit-transform:rotate(150deg) translate(0, -142%);
    -moz-transform:rotate(150deg) translate(0, -142%);
    -ms-transform:rotate(150deg) translate(0, -142%);
    -o-transform:rotate(150deg) translate(0, -142%);
    transform:rotate(150deg) translate(0, -142%);
    -webkit-animation-delay:-0.5833s;
    -moz-animation-delay:-0.5833s;
    -ms-animation-delay:-0.5833s;
    -o-animation-delay:-0.5833s;
    animation-delay:-0.5833s;
}
.lu-busy-default-spinner div.bar7{
    -webkit-transform:rotate(180deg) translate(0, -142%);
    -moz-transform:rotate(180deg) translate(0, -142%);
    -ms-transform:rotate(180deg) translate(0, -142%);
    -o-transform:rotate(180deg) translate(0, -142%);
    transform:rotate(180deg) translate(0, -142%);
    -webkit-animation-delay:-0.5s;
    -moz-animation-delay:-0.5s;
    -ms-animation-delay:-0.5s;
    -o-animation-delay:-0.5s;
    animation-delay:-0.5s;
}
.lu-busy-default-spinner div.bar8{
    -webkit-transform:rotate(210deg) translate(0, -142%);
    -moz-transform:rotate(210deg) translate(0, -142%);
    -ms-transform:rotate(210deg) translate(0, -142%);
    -o-transform:rotate(210deg) translate(0, -142%);
    transform:rotate(210deg) translate(0, -142%);
    -webkit-animation-delay:-0.41667s;
    -moz-animation-delay:-0.41667s;
    -ms-animation-delay:-0.41667s;
    -o-animation-delay:-0.41667s;
    animation-delay:-0.41667s;
}
.lu-busy-default-spinner div.bar9{
    -webkit-transform:rotate(240deg) translate(0, -142%);
    -moz-transform:rotate(240deg) translate(0, -142%);
    -ms-transform:rotate(240deg) translate(0, -142%);
    -o-transform:rotate(240deg) translate(0, -142%);
    transform:rotate(240deg) translate(0, -142%);
    -webkit-animation-delay:-0.333s;
    -moz-animation-delay:-0.333s;
    -ms-animation-delay:-0.333s;
    -o-animation-delay:-0.333s;
    animation-delay:-0.333s;
}
.lu-busy-default-spinner div.bar10{
    -webkit-transform:rotate(270deg) translate(0, -142%);
    -moz-transform:rotate(270deg) translate(0, -142%);
    -ms-transform:rotate(270deg) translate(0, -142%);
    -o-transform:rotate(270deg) translate(0, -142%);
    transform:rotate(270deg) translate(0, -142%);
    -webkit-animation-delay:-0.25s;
    -moz-animation-delay:-0.25s;
    -ms-animation-delay:-0.25s;
    -o-animation-delay:-0.25s;
    animation-delay:-0.25s;
}
.lu-busy-default-spinner div.bar11{
    -webkit-transform:rotate(300deg) translate(0, -142%);
    -moz-transform:rotate(300deg) translate(0, -142%);
    -ms-transform:rotate(300deg) translate(0, -142%);
    -o-transform:rotate(300deg) translate(0, -142%);
    transform:rotate(300deg) translate(0, -142%);
    -webkit-animation-delay:-0.1667s;
    -moz-animation-delay:-0.1667s;
    -ms-animation-delay:-0.1667s;
    -o-animation-delay:-0.1667s;
    animation-delay:-0.1667s;
}
.lu-busy-default-spinner div.bar12{
    -webkit-transform:rotate(330deg) translate(0, -142%);
    -moz-transform:rotate(330deg) translate(0, -142%);
    -ms-transform:rotate(330deg) translate(0, -142%);
    -o-transform:rotate(330deg) translate(0, -142%);
    transform:rotate(330deg) translate(0, -142%);
    -webkit-animation-delay:-0.0833s;
    -moz-animation-delay:-0.0833s;
    -ms-animation-delay:-0.0833s;
    -o-animation-delay:-0.0833s;
    animation-delay:-0.0833s;
}

@-webkit-keyframes lu-busy-spinner-anim{
    from {opacity: 1;}
    to {opacity: 0.25;}
}
@-moz-keyframes lu-busy-spinner-anim{
    from {opacity: 1;}
    to {opacity: 0.25;}
}
@keyframes lu-busy-spinner-anim{
    from {opacity: 1;}
    to {opacity: 0.25;}
}