gaf-mobile/app/styles/modules/loadingicon.less

GAF mobile Web site

@import (reference) '../themes/variables';

.loading-container {
    position: absolute;
    top: @header-height;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    z-index: 2; // higher than the mobile-container
    &.no-header {
      top: 0
    }

    .loadingicon {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        width: 62px;
        height: 62px;
        border-width: 6px;
    }
}

// 1.
@media all and (orientation:landscape) and (max-height: 640px) {
    .loading-container {
        top: 0;
    }
}

.loadingicon {
    position: relative;
    display: inline-block;
    text-indent: -9999em;
    border-top: 4px solid fade(@quaternary-color-xdark, 20%);
    border-right: 4px solid fade(@quaternary-color-xdark, 20%);
    border-bottom: 4px solid fade(@quaternary-color-xdark, 20%);
    border-left: 4px solid @quaternary-color-xdark;
    -webkit-animation: loading-spinner 0.7s infinite linear;
    animation: loading-spinner 0.7s infinite linear;
    border-radius: 50%;

    &,
    &::after {
        width: 28px;
        height: 28px;
    }
}

@-webkit-keyframes loading-spinner {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes loading-spinner {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}