.loading.loading1 {
    float: right;
    height: 2em;
    width: 2em;
    margin: calc(-0.5em + 5px);
    margin-left: -2em;
    opacity: 0;
    visibility: hidden;
}
.loading.loading1 svg {
    -webkit-animation: rotate 2s linear infinite;
    -moz-animation: rotate 2s linear infinite;
    -o-animation: rotate 2s linear infinite;
    -ms-animation: rotate 2s linear infinite;
    animation: rotate 2s linear infinite;
    height: 100%;
    width: 100%;
}
.loading.loading1 circle {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
    -webkit-animation: dash 1.5s ease-in-out infinite;
    -moz-animation: dash 1.5s ease-in-out infinite;
    -o-animation: dash 1.5s ease-in-out infinite;
    -ms-animation: dash 1.5s ease-in-out infinite;
    animation: dash 1.5s ease-in-out infinite;
    stroke-linecap: round;
    stroke: var(--foreground-color);
    stroke-width: 3px;
    fill: transparent;
}

.loading > .loading {
    opacity: 1;
    visibility: visible;
}


@keyframes rotate {
    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg);
   }
}

@keyframes dash {
    0% {
        stroke-dasharray: 1, 200;
        stroke-dashoffset: 0;
    }
    50% {
        stroke-dasharray: 89, 200;
        stroke-dashoffset: -35px;
    }
    100% {
        stroke-dasharray: 89, 200;
        stroke-dashoffset: -124px;
    }
}



.loading2 {
    width: unset;
}

.loading2 .dot{
    display: inline-block;
    border-radius: 50%;
    height: 0.75em;
    width: 0.75em;
    margin: 0 0.2em;
    position: relative;
}

.loading2 .dot:nth-child(1) {
    background-color: #E13032;
    -webkit-animation: 1.2s scaleDown ease-in-out infinite ;
    -moz-animation: 1.2s scaleDown ease-in-out infinite ;
    -o-animation: 1.2s scaleDown ease-in-out infinite ;
    -ms-animation: 1.2s scaleDown ease-in-out infinite ;
    animation: 1.2s scaleDown ease-in-out infinite ;
}

.loading2 .dot:nth-child(2) {
    background-color: #6687C4;
    -webkit-animation: 1.2s scaleDown ease-in-out infinite 0.2s;
    -moz-animation: 1.2s scaleDown ease-in-out infinite 0.2s;
    -o-animation: 1.2s scaleDown ease-in-out infinite 0.2s;
    -ms-animation: 1.2s scaleDown ease-in-out infinite 0.2s;
    animation: 1.2s scaleDown ease-in-out infinite 0.2s;
}

.loading2 .dot:nth-child(3) {
    background-color: #53AF4E;
    -webkit-animation: 1.2s scaleDown ease-in-out infinite 0.4s;
    -moz-animation: 1.2s scaleDown ease-in-out infinite 0.4s;
    -o-animation: 1.2s scaleDown ease-in-out infinite 0.4s;
    -ms-animation: 1.2s scaleDown ease-in-out infinite 0.4s;
    animation: 1.2s scaleDown ease-in-out infinite 0.4s;
}

.loading2 .dot:nth-child(4) {
    background-color: #FFCC07;
    -webkit-animation: 1.2s scaleDown ease-in-out infinite 0.6s;
    -moz-animation: 1.2s scaleDown ease-in-out infinite 0.6s;
    -o-animation: 1.2s scaleDown ease-in-out infinite 0.6s;
    -ms-animation: 1.2s scaleDown ease-in-out infinite 0.6s;
    animation: 1.2s scaleDown ease-in-out infinite 0.6s;
}


@keyframes scaleDown{
    0%, 100%{
        -webkit-transform: scale(0);
        -moz-transform: scale(0);
        -o-transform: scale(0);
        -ms-transform: scale(0);
        transform: scale(0);
        opacity: 0;
    }
    50%{
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -o-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }
}