Граница исчезает по кругу

Как сделать последнюю часть вращающегося круга постепенно исчезающей?
#loader-wrapper { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1000; } #loader { display: block; position: relative; left: 50%; top: 50%; width: 150px; height: 150px; margin: -75px 0 0 -75px; border-radius: 50%; border: 5px solid transparent; border-top-color: #aaa; border-right-color: #aaa; animation: spin 2s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

Я попытался использовать градиент, но он преобразует круг в квадрат.
Перевод ответа: Border fade in circle @Cornwell

Ответ

Круг с фоновым градиентом, псевдоэлемент поверх и clip-path с SVG-фоллбеком, чтобы немного этот круг обрезать.
#clip-svg { display: none; } .loader { width: 200px; height: 200px; border-radius: 200px; background-image: linear-gradient(#999, #fff); position: relative; -webkit-clip-path: polygon(0% 0%, 100% 0%, 50% 50%, 50% 100%, 0% 100%); clip-path: url(#clip); clip-path: polygon(0% 0%, 100% 0%, 50% 50%, 50% 100%, 0% 100%); animation: spin linear 2s infinite; } .loader:after { position: absolute; content: ''; left: 10px; top: 10px; width: 180px; height: 180px; border-radius: inherit; background-color: #fff; } @keyframes spin { to { transform: rotate(1turn) } }

Вариант с CSS-переменными и «HTML API».
#clip-svg { display: none; } .loader { width: calc(var(--radius, 100px) * 2); height: calc(var(--radius, 100px) * 2); border-radius: var(--radius, 100px); background-image: linear-gradient(#999, #fff); position: relative; -webkit-clip-path: polygon(0% 0%, 100% 0%, 50% 50%, 50% 100%, 0% 100%); clip-path: url(#clip); clip-path: polygon(0% 0%, 100% 0%, 50% 50%, 50% 100%, 0% 100%); animation: spin linear 2s infinite; } .loader:after { position: absolute; content: ''; left: var(--width, 10px); top: var(--width, 10px); width: calc(var(--radius, 100px) * 2 - var(--width, 10px) * 2); height: calc(var(--radius, 100px) * 2 - var(--width, 10px) * 2); border-radius: inherit; background-color: #fff; } @keyframes spin { to { transform: rotate(1turn) } }