Создание прядильщика в CSS

<!DOCTYPE html>
<html>
    <head>
        <title>Spinner</title>
    </head>
    <body>
        <div class="spinner"></div>
        <h3 class="text">LOADING...</h3>
		<style>
			html {
            background-color: #000000;
            }
            .text {
                color: #fff;
                font-family: Arial;
                position: fixed;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -150%);
                text-transform:uppercase;
                letter-spacing:2px;
                margin-top:20px;
                color: #3fefef;   filter:drop-shadow(0 0 20px #3fefef) drop-shadow(0 0 60px #3fefef);
                animation: animate_text 1.0s steps(1) infinite;
            }
            .spinner {
                position: relative;
                position: fixed;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                width: 200px;
                height: 200px;
                border-radius: 50%;
            }
            .spinner::before,
            .spinner:after{
                content: "";
                position: absolute;
                border-radius: inherit;
            }
            .spinner:before {
                width: 100%;
                height: 100%;
                background-image:linear-gradient(
                  0deg, #ff00cc 0%, 
                  #333399 100% );
                animation: spin .5s infinite linear;
            }
            .spinner:after {
                width: 85%;
                height: 85%;
                background-color: #000000;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
            }

            @keyframes spin {
                to {
                  transform: rotate(360deg);
                }
            }

            @keyframes animate_text {
                0%, 100% {
                  opacity:0;
                }

                50% {
                  opacity:1;
                }
            }
		</style>
    </body>
</html>
Happy Herring