.loader {
    width: 50px;
    height: 50px;
    display: inline-block;
    padding: 0px;
    opacity: 0.5;
    border: 3px solid #09acfd;
    -webkit-animation: loader 1s ease-in-out infinite alternate;
    animation: loader 1s ease-in-out infinite alternate;
}

    .loader:before {
        content: " ";
        position: absolute;
        z-index: -1;
        top: 5px;
        left: 5px;
        right: 5px;
        bottom: 5px;
        border: 3px solid #09acfd;
    }

    .loader:after {
        content: " ";
        position: absolute;
        z-index: -1;
        top: 15px;
        left: 15px;
        right: 15px;
        bottom: 15px;
        border: 3px solid #09acfd;
    }

@keyframes loader {
    from {
        transform: rotate(0deg) scale(1,1);
        border-radius: 0px;
    }

    to {
        transform: rotate(360deg) scale(0, 0);
        border-radius: 50px;
    }
}

@-webkit-keyframes loader {
    from {
        -webkit-transform: rotate(0deg) scale(1, 1);
        border-radius: 0px;
    }

    to {
        -webkit-transform: rotate(360deg) scale(0,0 );
        border-radius: 50px;
    }
}


.loader-wrapper {
    width: 100vw;
    height: 100vh;
    display: grid;
    place-items: center;
    position: fixed;
    background-color: rgba(0,0,0, 0.3);
    z-index: 100;
}

.loader3 {
    width: 50px;
    height: 50px;
    display: inline-block;
    padding: 0px;
    text-align: left;
}

    .loader3 span {
        position: absolute;
        display: inline-block;
        width: 75px;
        height: 75px;
        border-radius: 100%;
        background: #347236;
        -webkit-animation: loader3 1.5s linear infinite;
        animation: loader3 1.5s linear infinite;
    }

        .loader3 span:last-child {
            animation-delay: -0.9s;
            -webkit-animation-delay: -0.9s;
        }

@keyframes loader3 {
    0% {
        transform: scale(0, 0);
        opacity: 0.8;
    }

    100% {
        transform: scale(1, 1);
        opacity: 0;
    }
}

@-webkit-keyframes loader3 {
    0% {
        -webkit-transform: scale(0, 0);
        opacity: 0.8;
    }

    100% {
        -webkit-transform: scale(1, 1);
        opacity: 0;
    }
}

.loader4 {
    width: 45px;
    height: 45px;
    display: inline-block;
    padding: 0px;
    margin-left: auto;
    margin-right: auto;
    border-radius: 100%;
    border: 5px solid;
    border-top-color: #347236;
    border-bottom-color: #fff;
    border-left-color: #347236;
    border-right-color: #347236;
    -webkit-animation: loader4 1s ease-in-out infinite;
    animation: loader4 1s ease-in-out infinite;
}

@keyframes loader4 {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@-webkit-keyframes loader4 {
    from {
        -webkit-transform: rotate(0deg);
    }

    to {
        -webkit-transform: rotate(360deg);
    }
}

.loader5 {
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #4183D7;
    border-top: 10px solid #F5AB35;
    -webkit-animation: loader5 1.2s ease-in-out infinite alternate;
    animation: loader5 1.2s ease-in-out infinite alternate;
}

@keyframes loader5 {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(720deg);
    }
}

@-webkit-keyframes loader5 {
    from {
        -webkit-transform: rotate(0deg);
    }

    to {
        -webkit-transform: rotate(720deg);
    }
}