Spinning Record


by Jeremy Caudle
code

I've had a bit of headache while working on today's bit of coding. After spending some time learning about the dialog element, I was thinking about making something with that. However, it's not currently a fully supported standard and requires a polyfill to work across all browsers. So, I went back through some previous coding practice, and decided I'd try to animate a conic gradient. It did not go as easily as I hoped, but I have something that looks like a spinning record now. Actually it looks more like a radar display.

View the code:

HTML and JS 
<section class="code-block">
            
        </section>
CSS 
/* Animations */
            @keyframes rotateCone {
                0% { background: conic-gradient(  black 49.5%,#dedede 50%, black 50%); transform:rotate(0); }
                100% { background: conic-gradient( black 49.5%,#dedede 50%, black 50%); transform:rotate(359deg); }
            }  
						section.code-block { 
                font-family: Verdana, Geneva, Tahoma, sans-serif;
                z-index: 1;
                height: 10em;
                width: 10em;
                padding: 1rem;
                animation-name: rotateCone;
                animation-duration: 4s;
                animation-delay: 0s;
                animation-timing-function: linear;
                animation-fill-mode: forwards;
                animation-iteration-count: infinite;
                border-radius: 50%;
                margin: 3rem auto;
            }

Tags