.loader{--animation:2s ease-in-out infinite;justify-content:center;align-items:center;display:flex}.loader .circle{border:solid 2px var(--color);width:20px;height:20px;animation:circle-keys var(--animation);background-color:#0000;border-radius:50%;justify-content:center;align-items:center;margin:0 10px;display:flex;position:relative}.loader .circle .dot{background-color:var(--color);width:16px;height:16px;animation:dot-keys var(--animation);border-radius:50%;position:absolute}.loader .circle .outline{width:20px;height:20px;animation:outline-keys var(--animation);border-radius:50%;position:absolute;transform:translate(-50%,-50%)}.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%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.5)}to{opacity:1;transform:scale(1)}}@keyframes dot-keys{0%{transform:scale(1)}50%{transform:scale(0)}to{transform:scale(1)}}@keyframes outline-keys{0%{outline:solid 20px var(--color);outline-offset:0;opacity:1;transform:scale(0)}to{outline-offset:20px;opacity:0;outline:0 solid #0000;transform:scale(1)}}