:root {
    --color: linear-gradient(90deg,rgba(0, 0, 0, 1) 0%, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 0%, rgba(0, 0, 0, 1) 10%);
}

body {
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: 100vh;
    font-size: 50px;
    font-family: Arial, Helvetica, sans-serif;
}

p {
    z-index: 1;
}

.animation {
    width: 500px;
    height: 500px;
    border-radius: 50%;
    position: absolute;
    background: white; /* or your content background */
    animation: loading 3s infinite linear;
}

.animation::before {
    border: 3px solid rgb(235, 235, 235);
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    padding: 3px; /* border width */
    background: linear-gradient(90deg, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0.3) 10%, rgba(255, 255, 255, 0.3) 15%, rgba(128, 128, 128, 0.5) 20%, rgba(0, 0, 0, 1) 25%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
}

@keyframes loading {
    100% { transform: rotate(360deg); }
}