Анимация кругового прелоадера

#css #canvas #анимация #svg #css_animation

Я пытаюсь создать анимацию Apple's OS X  загрузчика.



То, что я уже попробовал:



.animation-wrapper {
  width: 200px;
  height: 200px;
  border: 1px solid black;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
  filter: brightness(0.8);
  -webkit-filter: brightness(0.8);
}
.pie-piece1 {
  position: absolute;
  width: 50%;
  height: 50%;
  bottom: 0;
  left: 0;
  background: linear-gradient(to right, rgba(255, 0, 0, 1) 0%, rgba(255, 255, 0,
1) 100%);
}
.pie-piece2 {
  position: absolute;
  width: 50%;
  height: 50%;
  bottom: 0;
  right: 0;
  background: linear-gradient(to right, rgba(255, 255, 0, 1) 0%, rgba(0, 255, 0,
1) 100%);
}
.pie-piece3 {
  position: absolute;
  width: 50%;
  height: 50%;
  top: 0;
  left: 0;
  background: linear-gradient(to right, rgba(255, 0, 0, 1) 0%, rgba(255, 0, 255,
1) 100%);
}
.pie-piece4 {
  position: absolute;
  width: 50%;
  height: 50%;
  top: 0;
  right: 0;
  background: linear-gradient(to right, rgba(255, 0, 255, 1) 0%, rgba(0, 0, 255,
1) 100%);
}
.rotating-spinners {
  position: absolute;
}
.spike {
  fill: rgba(22, 22, 22, 0.5);
}

  

  

  

  

  





Линейные градиенты неправильно направлены.  Я не смог найти способ сделать градиент,
идущий в двух направлениях.
Есть ли способ, чтобы создать это, используя только CSS или SVG, не смешивая их,
как это сделал я?

Или есть другие решения, может использовать canvas, или какую-то другую магию?    

Перевод вопроса: Circle loading animation  @Persijn
    

Ответы

Ответ 1

Вот моя SVG-только версия.  Цвет фона колеса не идеален, но я думаю, что  получилось
довольно близко.








Источник: @Paul LeBeau


Ответ 2

Вот  решение CSS, в котором я рассмотрю использование только одного элемента. 

Я буду использовать форму, которую  создал в этом предыдущем ответе, а выше я рассмотрю
конический градиент conic-gradient()   

На самом деле conic-Gradient() поддерживается только в Chrome и Safari, но у нас
скоро будет лучшая поддержка:  



  .box {
  --R:50px; /*Radius*/
  --c1:grey; /*first color*/
  --c2:#fff; /*second color*/
  
  --g1:var(--c1) 98%, transparent 100%;
  --g2:var(--c2) 98%, transparent 100%;
  width:calc(2*var(--R));
  height:calc(2*var(--R));
  border-radius:100%;
  border:1px solid;
  position:relative;
  overflow:hidden;
  display:inline-block;
  background:conic-gradient(rgba(128, 0, 128,0.7), rgba(0, 0, 255,0.7),rgba(0, 128,
0,0.7),rgba(255, 255, 0,0.7), rgba(255, 0, 0,0.7), rgba(128, 0, 128,0.7));
  box-shadow:0 3px 5px inset rgba(0,0,0,0.5);
}
.box::before,
.box::after{
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  bottom:0;
  left:0;
  width:50%;
  background:
     /*we rotate by 30deg so will use :
       sin(30deg)*R = 0.5xR   
       cos(30deg)*R = 0.866xR 
     */
    radial-gradient(circle var(--R) at calc(var(--R) + 0.866*var(--R)) calc(var(--R)
- 0.5*var(--R))  ,var(--g1)),
    radial-gradient(circle var(--R) at calc(var(--R) + 0.5*var(--R))   calc(var(--R)
- 0.866*var(--R)),var(--g2)),
    radial-gradient(circle var(--R) at var(--R)                        0        
                     ,var(--g1)),
    radial-gradient(circle var(--R) at calc(var(--R) - 0.5*var(--R))   calc(var(--R)
- 0.866*var(--R)),var(--g2)),
    radial-gradient(circle var(--R) at calc(var(--R) - 0.866*var(--R)) calc(var(--R)
- 0.5*var(--R))  ,var(--g1)),
    radial-gradient(circle var(--R) at 0                               var(--R) 
                      ,var(--g2)),
    radial-gradient(circle var(--R) at calc(var(--R) - 0.866*var(--R)) calc(var(--R)
+ 0.5*var(--R))  ,var(--g1));   
    transform-origin:right;
    animation:animate 3s linear infinite;
}

/*the same shape rotated*/
.box::after {
   animation-delay:-1.5s;
}

@keyframes animate {
  to {
    transform:rotate(-360deg);
  }
}





Вывод:

 

Вращение в противоположном направлении:



.box {
  --R:50px; /*Radius*/
  --c1:grey; /*first color*/
  --c2:#fff; /*second color*/
  
  --g1:var(--c1) 98%, transparent 100%;
  --g2:var(--c2) 98%, transparent 100%;
  width:calc(2*var(--R));
  height:calc(2*var(--R));
  border-radius:100%;
  border:1px solid;
  position:relative;
  overflow:hidden;
  display:inline-block;
  background:conic-gradient(rgba(128, 0, 128,0.7), rgba(0, 0, 255,0.7),rgba(0, 128,
0,0.7),rgba(255, 255, 0,0.7), rgba(255, 0, 0,0.7), rgba(128, 0, 128,0.7));
  box-shadow:0 3px 5px inset rgba(0,0,0,0.5);
}
.box::before,
.box::after{
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  bottom:0;
  left:0;
  width:50%;
  background:
     /*we rotate by 30deg so will use :
       sin(30deg)*R = 0.5xR   
       cos(30deg)*R = 0.866xR 
     */
    radial-gradient(circle var(--R) at calc(var(--R) + 0.866*var(--R)) calc(var(--R)
- 0.5*var(--R))  ,var(--g1)),
    radial-gradient(circle var(--R) at calc(var(--R) + 0.5*var(--R))   calc(var(--R)
- 0.866*var(--R)),var(--g2)),
    radial-gradient(circle var(--R) at var(--R)                        0        
                     ,var(--g1)),
    radial-gradient(circle var(--R) at calc(var(--R) - 0.5*var(--R))   calc(var(--R)
- 0.866*var(--R)),var(--g2)),
    radial-gradient(circle var(--R) at calc(var(--R) - 0.866*var(--R)) calc(var(--R)
- 0.5*var(--R))  ,var(--g1)),
    radial-gradient(circle var(--R) at 0                               var(--R) 
                      ,var(--g2)),
    radial-gradient(circle var(--R) at calc(var(--R) - 0.866*var(--R)) calc(var(--R)
+ 0.5*var(--R))  ,var(--g1));   
    transform-origin:right;
    animation:animate 3s linear infinite;
}

/*the same shape rotated*/
.box::after {
   animation-delay:-1.5s;
}

@keyframes animate {
  from {
    transform:scale(-1,1) rotate(0deg);
  }
  to {
    transform:scale(-1,1) rotate(-360deg);
  }
}





Источник: @Temani Afif


Ответ 3

В моем варианте ответа конический градиент - это встроенное растровое изображение,
извлеченное путем вычисления максимального значения каждого пикселя в анимированном
GIF,  приведённым автором вопроса.    

Полупрозрачный черный pattern крыльев ветряной мельницы накладывается поверх него
и анимируется, а фильтр размытия избавляет от артефактов JPEG. 

(Edit: добавлена отражающая подсветка, чтобы она выглядела немного более трехмерной) 








Источник: @squeamish ossifrage