CSS Animation Morphing Square Example

<!doctype html>
<title>Example</title>
<style>
body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    font-family: sans-serif;
    background-color: #f0f0f0;
}

.morph-loader {
    width: 50px;
    height: 50px;
    background-color: #007bff;
    animation: morph 2s infinite ease-in-out alternate;
}

@keyframes morph {
    0% {
        border-radius: 0%;
        transform: rotate(0deg) scale(1);
        background-color: #007bff;
    }
    50% {
        border-radius: 50%;
        transform: rotate(180deg) scale(0.5);
        background-color: #28a745;
    }
    100% {
        border-radius: 0%;
        transform: rotate(360deg) scale(1);
        background-color: #17a2b8;
    }
}

@media (prefers-reduced-motion: reduce) {
    .morph-loader {
        /* Disabling the animation but keeping the element visible */
        animation: none;
        border-radius: 5px; /* Subtle rounding for a static state */
    }
}
</style>