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

#html #css #css3 #анимация #css_animation

Как сделать последнюю часть вращающегося круга постепенно исчезающей?    



#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 
    

Ответы

Ответ 1

Круг с фоновым градиентом, псевдоэлемент поверх и 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)
  }
}





Ответ 2

Вы можете применить градиент к псевдоэлементу следующим образом:   



#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;
}
#loader::after {
  content: '';
  width: 85%;
  height: 85%;
  background: linear-gradient(45deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255,
1) 40%, rgba(255, 255, 255, 0.7) 60%, rgba(255, 255, 255, 0) 100%);
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-5%, -5%);
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

  






Перевод ответа: Border fade in circle @Ricky