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 vote344 views1 answer
Css beutify scroller
CSS
66 votes296 views6 answers
Rotate element css
CSS
2 votes269 views1 answer
Xpath vs css selector
CSS
4 votes317 views3 answers
Css image cover
CSS
0 vote309 views2 answers
Background blend mode
CSS
0 vote264 views1 answer
Cursor color change
CSS
5 votes319 views2 answers
Css make input unselectable
CSS
51 votes308 views6 answers
Css first element
CSS
0 vote341 views1 answer
If you're trying to use a package make sure that '../../static/fonts/lato/Lato-Regular.woff' is installed. If you're trying to use a local file make sure that the path is correct.
CSS
1 vote318 views1 answer
Scss percentage
CSS