Css loader with gradient

.loader {
  background:linear-gradient(yellow, #e90b5a);
  /* Show only 10px from the border */
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 10px),#fff 0);
          mask:radial-gradient(farthest-side,transparent calc(100% - 10px),#fff 0);
  width: 100px;
  height: 100px;
  border-radius: 50%;  
  position: fixed;
  top: calc(50% - 50px);
  left: calc(50% - 50px);  
  animation: rot 2s linear infinite; 
}

@keyframes rot {
   100% { transform: rotate(360deg); }
}

body {
  background:linear-gradient(to right,grey,white)
}

Source: stackoverflow.com

Similar codes

9 votes229 views1 answer
Image background html css tricks
CSS
162 votes237 views5 answers
Css shaddow
CSS
1 vote226 views1 answer
Free computer screen recording software
CSS
72 votes236 views6 answers
How to center text in a div
CSS
1 vote241 views1 answer
Animate font weight css
CSS
0 vote281 views2 answers
Mat input change placeholder color
CSS
17 votes222 views4 answers
Css center element on screen
CSS
0 vote221 views1 answer
Css image hover zoom and rotate
CSS
1 vote239 views1 answer
How to make a responsive box in css
CSS
9 votes233 views5 answers
Css background full screen
CSS