:root{--size: 25;--color-one: #ea4335;--color-two: #4285f4;--color-three: #34a853;--color-four: #fbbc05}body{display:grid;place-items:center;min-height:100vh;margin:0}@property --nose{syntax: "<percentage>"; initial-value: 0%; inherits: false;}@property --tail{syntax: "<percentage>"; initial-value: 0%; inherits: false;}.loader{height:calc(var(--size) * 1vmin);width:calc(var(--size) * 1vmin);border-radius:50%;-webkit-mask:conic-gradient(from 45deg,transparent 0 var(--tail),#000 0 var(--nose),transparent 0 var(--nose));mask:conic-gradient(from 45deg,transparent 0 var(--tail),#000 0 var(--nose),transparent 0 var(--nose));border-style:solid;border-width:5vmin;border-top-color:var(--color-one);border-right-color:var(--color-two);border-bottom-color:var(--color-three);border-left-color:var(--color-four);animation:load 2.5s both infinite ease-in-out,spin 3.25s infinite linear}@keyframes spin{to{transform:rotate(360deg)}}@keyframes load{0%{--tail: 0%;--nose: 0%}40%,60%{--nose: 100%;--tail: 0%}to{--nose: 100%;--tail: 100%}}