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 vote248 views0 answer
ArrayShuffle
CSS
0 vote250 views1 answer
Sass scale color
CSS
0 vote265 views1 answer
CSS menu list with underline hover animation
CSS
0 vote269 views1 answer
Calc css float to procent
CSS
21 votes279 views5 answers
CSS italic
CSS
19 votes304 views3 answers
Css border radius top
CSS
14 votes261 views4 answers
How to create a strikethrough in css
CSS
0 vote266 views2 answers
How to insert icons pseudo content
CSS
2 votes260 views1 answer
How to fix the footer at the bottom of the page
CSS
0 vote260 views1 answer
How to use bootstrap color variables in sass
CSS