.loader{--color:hsl(0,0%,87%);--animation:1.5s ease-in-out infinite}.loader,.loader .circle{display:flex;justify-content:center;align-items:center}.loader .circle{position:relative;width:20px;height:20px;border:2px solid var(--color);border-radius:50%;margin:0 10px;background-color:transparent;animation:circle-keys var(--animation)}.loader .circle .dot{position:absolute;width:16px;height:16px;border-radius:50%;background-color:var(--color);animation:dot-keys var(--animation)}.circle:nth-child(2){animation-delay:.3s}.circle:nth-child(3){animation-delay:.6s}.circle:nth-child(4){animation-delay:.9s}.circle:nth-child(5){animation-delay:1.2s}.circle:nth-child(2) .dot{animation-delay:.3s}.circle:nth-child(3) .dot{animation-delay:.6s}.circle:nth-child(4) .dot{animation-delay:.9s}.circle:nth-child(5) .dot{animation-delay:1.2s}.circle:first-child .outline{animation-delay:.9s}.circle:nth-child(2) .outline{animation-delay:1.2s}.circle:nth-child(3) .outline{animation-delay:1.5s}.circle:nth-child(4) .outline{animation-delay:1.8s}.circle:nth-child(5) .outline{animation-delay:2.1s}@keyframes circle-keys{0%{transform:scale(1);opacity:1}50%{transform:scale(1.5);opacity:.5}to{transform:scale(1);opacity:1}}@keyframes dot-keys{0%{transform:scale(1)}50%{transform:scale(0)}to{transform:scale(1)}}@keyframes outline-keys{0%{transform:scale(0);outline:solid 20px var(--color);outline-offset:0;opacity:1}to{transform:scale(1);outline:0 solid transparent;outline-offset:20px;opacity:0}}