Pure css spinner

#loading {
  display: inline-block;
    width: 150px;
    height: 150px;
    border: 5px solid rgb(26 108 97 / 54%);
    border-radius: 50%;
    border-top-color: #fff0;
    animation: spin 1s ease-in infinite; /*use cubic-bezier(0,0,0,0) for smooth spin*/
    -webkit-animation: spin 1s ease-in-out infinite;
    position: fixed;
    top: 50%;
    left: 50%;
    box-sizing: border-box;
    translate: -50% -50%;
}

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

Source: codepen.io

Pure css spinner

rotationBack

Source: codepen.io

Similar codes

0 vote184 views1 answer
Schatten css
CSS
0 vote196 views1 answer
Css prevent background scrolling
CSS
42 votes166 views4 answers
Css center div in page
CSS
1 vote271 views1 answer
Can we use multiple keyframes in css
CSS
33 votes162 views6 answers
Background image opacity css
CSS
40 votes176 views6 answers
'pip' is not recognized as an internal or external command
CSS
3 votes173 views3 answers
Zoom image inside div and move
CSS
7 votes166 views4 answers
How to crop images in css
CSS
13 votes169 views2 answers
Box-sizing
CSS
0 vote151 views2 answers
Css stopper une animation
CSS