JSFiddle - React, Tailwind, and code Playground

by Kalashnikov

HTML

3 elements:
 <div id ="outer">
    <div id ="line"></div>
    <div id ="inner"></div>
</div>
<br>
Pseudoelemnts:   
<div class="pokeball"></div>

CSS

body {
    background: gray;
    padding: 100px 200px;
}

.pokeball, #outer {
    background: white;
    border-radius: 50%;
    height: 50px;
    left: 0px;
    position: relative;
    top: 0px;
    width: 50px;
}

.pokeball::after, #inner { 
    background: white;
    border-radius: 50%;
    box-shadow: 0px 0px 0px 6px gray;
    height: 16px;
    width: 16px;
    left: 17px;
    position: absolute;
    top: 17px;
    display: block;
    content: "";
}

.pokeball::before, #line {
    width: 50px;
    height: 8px;
    background: gray;
    position: absolute;
    top: 21px;    /* (25-8)/2 */
    left: 0;
    display: block;
    content: "";

    /*animation-duration: .5s;*/
    /*animation-name: rotation;*/
    /*animation-iteration-count: infinite;*/
    /*animation-delay: 0s;*/
    /*animation-timing-function: linear;*/
    -o-animation: rotation 0.5s infinite linear;
    -moz-animation: rotation 0.5s infinite linear;
    -webkit-animation: rotation 0.5s infinite linear;
    animation: rotation 0.5s infinite linear;
}

@-o-keyframes rotation { 
    0% { -o-transform: rotate(0deg); } 
    100% { -o-transform: rotate(180deg); }
}
@-moz-keyframes rotation { 
    0% { -moz-transform: rotate(0deg); } 
    100% { -moz-transform: rotate(180deg); }
}
@-webkit-keyframes rotation { 
    0% { -webkit-transform: rotate(0deg); } 
    100% { -webkit-transform: rotate(180deg); }
}
@keyframes rotation { 
    0% { transform: rotate(0deg); } 
    100% { transform: rotate(180deg); }
}