.loader_cancel {
    width: 100px;
    height: 100px;
    position: relative;
    margin: auto;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
    margin-left: 5px;
    animation: spin_front_timeout 20s infinite ease-in-out;
}
.loader_cancel.small{
    width: 20px;
    height: 20px;
}
.loader_cancel.small:after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50% , -50%);
    background: linear-gradient(90deg,rgb(207,0,0),rgb(151, 24, 24));
    width: 15px;
    height: 15px;
    border-radius: 50%;
    animation: pulse_white 1.5s infinite linear;
}
.loader_cancel.small>.one,
.loader_cancel.small>.two,
.loader_cancel.small>.three,
.loader_cancel.small>.four,
.loader_cancel.small>.five,
.loader_cancel.small>.six,
.loader_cancel.small>.seven,
.loader_cancel.small>.eight{
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgb(226, 226, 226);
}
.loader_cancel.small>.one{
    z-index: 1;
    top: -16px;
    left: -16px;
}
.loader_cancel.small>.two{
    z-index: 1;
    top: -26px;
    left: -26px;
}

.loader_cancel.small>.three{
    z-index: 1;
    bottom: -16px;
    right: -16px;
}
.loader_cancel.small>.four{
    z-index: 1;
    bottom: -26px;
    right: -26px;
}

.loader_cancel.small>.five{
    z-index: 1;
    bottom: -16px;
    left: -16px;
}
.loader_cancel.small>.six{
    z-index: 1;
    bottom: -26px;
    left: -26px;
}

.loader_cancel.small>.seven{
    z-index: 1;
    top: -16px;
    right: -16px;
}
.loader_cancel.small>.eight{
    z-index: 1;
    top: -26px;
    right: -26px;
}