@iobroker/adapter-react/Components/loader.css

React classes to develop admin interfaces for ioBroker with react.

/**
 * Copyright 2018-2022 bluefox <dogafox@gmail.com>
 *
 * MIT License
 *
 **/

.logo-background-light, .logo-background-colored {
    background: white;
}
.logo-background-dark, .logo-background-blue {
    background: black;
}
.logo-div {
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    overflow: hidden;
    border-radius: 50%;
    z-index: 2;
}
.logo-border {
    /*border-color: #164477;*/
    border-top-color: #3399CC;
    border-left-color: #164477;
    border-bottom-color: #164477;
    border-right-color: #164477;
    border-radius: 50%;
    border-style: solid;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    position: absolute;
}
.logo-top {
    position: absolute;
    width: 4.5%;
    height: 16%;
    top: 0;
    z-index: 2;
}
.logo-i {
    position: absolute;
    width: 14.5%;
    height: 60%;
    top: 20%;
    left: 42%;
    background: #3399CC;
}
.logo-i-top {
    position: absolute;
    width: 14.5%;
    height: 4%;
    left: 42%;
    background: #3399CC;
    border-radius: 100%;
}
.logo-back {
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: hidden;
}
@keyframes logo-grow {
    0% {
        width: 230px;
        height: 230px;
        transform: translate(-50%,-50%) scale(1);
        opacity: 1
    }
    99% {
        width: 230px;
        height: 230px;
        transform: translate(-50%,-50%) scale(10);
        opacity: 0;
    }
    100% {
        width: 0;
        height: 0;
        opacity: 0;
    }
}
@keyframes logo-spin { 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }
@keyframes logo-color-inside-light {
    0% {
        background: #FEFEFE;
    }
    100% {
        background: #3399CC;
    }
}
@keyframes logo-color-inside-dark {
    0% {
        background: #030303;
    }
    100% {
        background: #3399CC;
    }
}
@keyframes logo-color-inside-colored {
    0% {
        background: #FEFEFE;
    }
    100% {
        background: #3399CC;
    }
}
@keyframes logo-color-inside-blue {
    0% {
        background: #030303;
    }
    100% {
        background: #3399CC;
    }
}

@keyframes logo-color-outside-light {
    0% {
        border-color: #FEFEFE;
    }
    100% {
        border-top-color: #3399CC;
        border-left-color: #164477;
        border-bottom-color: #164477;
        border-right-color: #164477;
    }
}
@keyframes logo-color-outside-dark  {
    0% {
        border-color: #040404;
    }
    100% {
        border-top-color: #3399CC;
        border-left-color: #164477;
        border-bottom-color: #164477;
        border-right-color: #164477;
    }
}
@keyframes logo-color-outside-colored {
    0% {
        border-color: #FEFEFE;
    }
    100% {
        border-top-color: #3399CC;
        border-left-color: #164477;
        border-bottom-color: #164477;
        border-right-color: #164477;
    }
}
@keyframes logo-color-outside-blue  {
    0% {
        border-color: #040404;
    }
    100% {
        border-top-color: #3399CC;
        border-left-color: #164477;
        border-bottom-color: #164477;
        border-right-color: #164477;
    }
}

.logo-animate-wait {
    animation: logo-color-outside 1.5s, logo-spin 1.5s linear infinite;
}

.logo-animate-grow-light {
    background: #DDD;
}
.logo-animate-grow-dark {
    background: #1d1d1d;
}
.logo-animate-grow-colored {
    background: #DDD;
}
.logo-animate-grow-blue {
    background: #1d1d1d;
}

.logo-animate-grow {
    display: inline-block;
    text-align: center;
    z-index: 1;
    top: 50%;
    left: 50%;
    -ms-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    width: 245px;
    height: 245px;
    border-radius: 50%;
    position: absolute;
    animation: logo-grow 1s 1 ease forwards;
}

.logo-animate-color-inside-light {
    animation: logo-color-inside-light 2.5s;
}
.logo-animate-color-inside-dark {
    animation: logo-color-inside-dark 2.5s;
}
.logo-animate-color-inside-colored {
    animation: logo-color-inside-colored 2.5s;
}
.logo-animate-color-inside-blue {
    animation: logo-color-inside-blue 2.5s;
}

.logo-animate-color-outside-light {
    animation: logo-color-outside-light 1.5s;
}
.logo-animate-color-outside-dark {
    animation: logo-color-outside-dark 1.5s;
}
.logo-animate-color-outside-colored {
    animation: logo-color-outside-colored 1.5s;
}
.logo-animate-color-outside-blue {
    animation: logo-color-outside-blue 1.5s;
}