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

0 vote289 views1 answer
Space between span and svg in css
CSS
0 vote323 views1 answer
Move div down css
CSS
2 votes376 views1 answer
Material design css
CSS
7 votes353 views3 answers
Bootstrap remove outline
CSS Bootstrap
23 votes338 views5 answers
Linear gradient border
CSS
-1 vote311 views1 answer
Css grid column height fit content
CSS
0 vote269 views1 answer
Responsive slider with text animation codepen
CSS
1 vote305 views1 answer
Css overwriting styles
CSS
3 votes300 views3 answers
Warning: Failed child context type: Invalid child context `virtualizedCell.cellKey` of type `number` supplied to `CellRenderer`, expected `string`.
CSS
6 votes325 views1 answer
How to make text wrap on overfloe with css
CSS