#loader_pentagon {
    /* adjust this for the size */
    --size: 33vmin;

    width: var(--size);
    height: var(--size);

    /* adjust this to position it */
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

#loader_pentagon .pentagon {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* shape of the pentagon */
    clip-path: polygon(50% 99.9%, 97.553% 65.451%, 79.389% 9.5492%, 20.611% 9.5492%, 2.4472% 65.451%);
    background-color: alpha;
    /* fix for firefox buggy edges, dont remove */
    filter: blur(0px);
    
}

#loader_pentagon .pentagon:nth-child(1) {
    animation: pentagon_animation0 1s ease-in-out infinite alternate;
}

#loader_pentagon .pentagon:nth-child(2) {
    animation: pentagon_animation1 1s ease-in-out infinite alternate;
}

#loader_pentagon .filler {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    /* background: linear-gradient(0deg, rgba(116, 232, 255, 1) 10%, rgba(0, 212, 255, 0) 15%); */
    background: linear-gradient(0deg, #00c1f2 0%, #00c1f2 15%, #00c1f200 15.01%);
    background-color: alpha;
}

#loader_pentagon .pentagon .filler:nth-child(1) {
    transform: rotate(36deg);
}

#loader_pentagon .pentagon .filler:nth-child(2) {
    transform: rotate(108deg);
}

#loader_pentagon .pentagon .filler:nth-child(3) {
    transform: rotate(180deg);
}

#loader_pentagon .pentagon .filler:nth-child(4) {
    transform: rotate(252deg);
}

#loader_pentagon .pentagon .filler:nth-child(5) {
    transform: rotate(324deg);
}

@keyframes pentagon_animation0 {
    0% {
        transform: rotate(216deg) scale(.4);
    }

    100% {
        transform: rotate(288deg) scale(1);
    }
}

@keyframes pentagon_animation1 {
    0% {
        transform: rotate(252deg) scale(1);
    }

    100% {
        transform: rotate(180deg) scale(.35);
    }
}