.loader-blog {
    position: absolute;
    top: 0;
    left: 0;
    margin: 0 auto;
    text-align: center;
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.92);
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
}
.square-spinner {
    position: relative;
    width: calc(49px - 0.5px);
    height: calc(49px - 0.5px);
    overflow: hidden;
    border-radius: 2px;
}
.square-spinner:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 45px;
    background-image: linear-gradient(90deg, #68676b 49%, #dbe200 0%);
    animation: spinnerTop 800ms linear infinite;
    background-size: 200% 200%;
}
.square-spinner:after {
    content: "";
    position: absolute;
    top: 0;
    left: 45px;
    right: 0;
    bottom: 0;
    background-image: linear-gradient(180deg, #68676b 49%, #dbe200 0%);
    animation: spinnerRight 800ms linear infinite;
    background-size: 200% 200%;
}
.square-spinner span {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
.square-spinner span:before {
    content: "";
    position: absolute;
    top: 45px;
    left: 0;
    right: 0;
    bottom: 0;
    animation: spinnerBottom 800ms linear infinite;
    background-image: linear-gradient(90deg, #68676b 49%, #dbe200 0%);
    background-size: 200% 200%;
}
.square-spinner span:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 45px;
    bottom: 0;
    background-image: linear-gradient(180deg, #68676b 49%, #dbe200 0%);
    animation: spinnerLeft 800ms linear infinite;
    background-size: 200% 200%;
}
.square-spinner.xl {
    width: calc(49px - 0.5px);
    height: calc(49px - 0.5px);
}
.square-spinner.xl:before {
    bottom: 45px;
}
.square-spinner.xl:after {
    left: 45px;
}
.square-spinner.xl span:before {
    top: 45px;
}
.square-spinner.xl span:after {
    right: 45px;
}
.square-spinner.lg {
    width: calc(34px - 0.5px);
    height: calc(34px - 0.5px);
}
.square-spinner.lg:before {
    bottom: 30px;
}
.square-spinner.lg:after {
    left: 30px;
}
.square-spinner.lg span:before {
    top: 30px;
}
.square-spinner.lg span:after {
    right: 30px;
}
.square-spinner.md {
    width: calc(25px - 0.5px);
    height: calc(25px - 0.5px);
}
.square-spinner.md:before {
    bottom: 21px;
}
.square-spinner.md:after {
    left: 21px;
}
.square-spinner.md span:before {
    top: 21px;
}
.square-spinner.md span:after {
    right: 21px;
}
.square-spinner.sm {
    width: calc(15px - 0.5px);
    height: calc(15px - 0.5px);
}
.square-spinner.sm:before {
    bottom: 11.5px;
}
.square-spinner.sm:after {
    left: 11.5px;
}
.square-spinner.sm span:before {
    top: 11.5px;
}
.square-spinner.sm span:after {
    right: 11.5px;
}
.square-spinner.xs {
    width: 11px;
    height: 11px;
}
.square-spinner.xs:before {
    bottom: 8.5px;
}
.square-spinner.xs:after {
    left: 8.5px;
}
.square-spinner.xs span:before {
    top: 8.5px;
}
.square-spinner.xs span:after {
    right: 8.5px;
}
.square-spinner.square-spinner-dark:before {
    background-image: linear-gradient(90deg, #68676b 49%, #f6a41c 0%);
}
.square-spinner.square-spinner-dark:after {
    background-image: linear-gradient(180deg, #68676b 49%, #f6a41c 0%);
}
.square-spinner.square-spinner-dark span:before {
    background-image: linear-gradient(90deg, #68676b 49%, #f6a41c 0%);
}
.square-spinner.square-spinner-dark span:after {
    background-image: linear-gradient(180deg, #68676b 49%, #f6a41c 0%);
}
@keyframes spinnerTop {
    0% {
        background-position: 100% 0%;
   }
    25% {
        background-position: 0% 0%;
   }
    49.99% {
        background-position: -100% 0%;
   }
    50% {
        background-position: 100% 0%;
   }
    100% {
        background-position: 100% 0%;
   }
}
@keyframes spinnerRight {
    0% {
        background-position: 0% 100%;
   }
    25% {
        background-position: 0% 100%;
   }
    50% {
        background-position: 0% 0%;
   }
    74.99% {
        background-position: 0% -100%;
   }
    75% {
        background-position: 0% 100%;
   }
    100% {
        background-position: 0% 100%;
   }
}
@keyframes spinnerBottom {
    0% {
        background-position: -100% 0%;
   }
    50% {
        background-position: -100% 0%;
   }
    75% {
        background-position: 0% 0%;
   }
    100% {
        background-position: 100% 0%;
   }
}
@keyframes spinnerLeft {
    0% {
        background-position: 0% 0%;
   }
    24.99% {
        background-position: 0% 100%;
   }
    25% {
        background-position: 0% -100%;
   }
    75% {
        background-position: 0% -100%;
   }
    100% {
        background-position: 0% 0%;
   }
}