.loader-line {
    width: 200px;
    height: 3px;
    position: relative;
    overflow: hidden;
    background-color: #ddd;
    margin: 50px auto;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
}

.loader-line:before {
    content: "";
    position: absolute;
    left: 70%;
    height: 3px;
    width: 40%;
    background-color: #000000;
    -webkit-animation: lineAnim 1s linear infinite;
    -moz-animation: lineAnim 1s linear infinite;
    animation: lineAnim 1s linear infinite;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
}

@keyframes lineAnim {
    0% {
        left: -40%;
    }

    50% {
        left: 20%;
        width: 80%;
    }

    100% {
        left: 100%;
        width: 100%;
    }
}

/*loader*/
.data {
    display: none;
}

.logo-loader {
    text-align: center;
}

.loading {
    display: flex;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 100vh;
    justify-content: center;
    z-index: 99999;
}

.loading img {
    width: 32%;
}

@media (min-width: 700px) {
    .loading img {
        width: 18%;
    }
}

/*special devices*/
@media (min-width: 1024px) {
    .loading img {
        width: 7%;
    }
}

@media (min-width: 1200px) {}

@media (min-width: 1200px) {
    .loading img {
        width: 8%;
    }
}