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

3 votes270 views1 answer
Css sass run
CSS
3 votes353 views2 answers
DevTools failed to load SourceMap: Could not load content for bootstrap.min.css.map
CSS Bootstrap
0 vote315 views1 answer
Css mask cut diagonal
CSS
0 vote289 views1 answer
Switch css with text
CSS
1 vote290 views1 answer
Cards design html css
CSS
4 votes276 views1 answer
Overflow dottet
CSS
0 vote283 views1 answer
Body .div csss
CSS
1 vote282 views1 answer
Scroll-behavior not working
CSS
15 votes310 views5 answers
Remove horizontal scrollbar css
CSS
0 vote286 views1 answer
Center elemnts css
CSS