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

275

10 февраля 2017, 04:42

Ассоциация с SOEN

Я пытаюсь создать анимацию 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); 
}

<figure class="animation-wrapper"> 
  <div class="pie-piece1"></div> 
  <div class="pie-piece2"></div> 
  <div class="pie-piece3"></div> 
  <div class="pie-piece4"></div> 
  <svg class="rotating-spinners" width="100%" height="100%" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
    <defs> 
      <path id="spin-part" class="spike" d="M 65,-40 C 65,-40 80,20 50,50 60,40 50,-40 50,-40Z" /> 
    </defs> 
    <use x="0" y="0" xlink:href="#spin-part" /> 
    <use x="0" y="0" xlink:href="#spin-part" transform="rotate(60, 50, 50)" /> 
    <use x="0" y="0" xlink:href="#spin-part" transform="rotate(120, 50, 50)" /> 
    <use x="0" y="0" xlink:href="#spin-part" transform="rotate(180, 50, 50)" /> 
    <use x="0" y="0" xlink:href="#spin-part" transform="rotate(240, 50, 50)" /> 
    <use x="0" y="0" xlink:href="#spin-part" transform="rotate(300, 50, 50)" /> 
  </svg> 
</figure>

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

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

Answer 1

ответ: Paul LeBeau

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

<svg width="135" height="135" viewBox="0 0 200 200"> 
    <defs> 
        <filter id="blur" color-interpolation-filters="linear"> 
            <feGaussianBlur in="SourceGraphic" stdDeviation="11"/> 
        </filter> 
        <mask id="mask"> 
            <circle cx="0" cy="0" r="90" fill="white"/> 
        </mask> 
        <linearGradient id="gloss" x2="0" y2="0.4"> 
            <stop offset="0" stop-color="white" stop-opacity="0.5"/> 
            <stop offset="1" stop-color="white" stop-opacity="0"/> 
        </linearGradient> 
    </defs> 
 
    <g transform="translate(100,100)" mask="url(#mask)"> 
        <g filter="url(#blur)"> 
            <polygon points="0,0, -100,-26.8, -100,26.8" fill="#c44"/> 
            <polygon points="0,0, -100,-26.8, -100,26.8" fill="#c09" transform="rotate(30)"/> 
            <polygon points="0,0, -100,-26.8, -100,26.8" fill="#c0c" transform="rotate(60)"/> 
            <polygon points="0,0, -100,-26.8, -100,26.8" fill="#90c" transform="rotate(90)"/> 
            <polygon points="0,0, -100,-26.8, -100,26.8" fill="#44c" transform="rotate(120)"/> 
            <polygon points="0,0, -100,-26.8, -100,26.8" fill="#09c" transform="rotate(150)"/> 
            <polygon points="0,0, -100,-26.8, -100,26.8" fill="#0cc" transform="rotate(180)"/> 
            <polygon points="0,0, -100,-26.8, -100,26.8" fill="#0c9" transform="rotate(210)"/> 
            <polygon points="0,0, -100,-26.8, -100,26.8" fill="#4c4" transform="rotate(240)"/> 
            <polygon points="0,0, -100,-26.8, -100,26.8" fill="#9c0" transform="rotate(270)"/> 
            <polygon points="0,0, -100,-26.8, -100,26.8" fill="#cc0" transform="rotate(300)"/> 
            <polygon points="0,0, -100,-26.8, -100,26.8" fill="#c90" transform="rotate(330)"/> 
        </g> 
        <g transform="scale(0.9,0.9)"> 
            <path d="M0,0C5,-61,-32,-86,-95,-90L-100,-46C-65,-53,-24,-35,0,0Z" fill="black" fill-opacity="0.4"/> 
            <path d="M0,0C5,-61,-32,-86,-95,-90L-100,-46C-65,-53,-24,-35,0,0Z" fill="black" fill-opacity="0.4" transform="rotate(60)"/> 
            <path d="M0,0C5,-61,-32,-86,-95,-90L-100,-46C-65,-53,-24,-35,0,0Z" fill="black" fill-opacity="0.4" transform="rotate(120)"/> 
            <path d="M0,0C5,-61,-32,-86,-95,-90L-100,-46C-65,-53,-24,-35,0,0Z" fill="black" fill-opacity="0.4" transform="rotate(180)"/> 
            <path d="M0,0C5,-61,-32,-86,-95,-90L-100,-46C-65,-53,-24,-35,0,0Z" fill="black" fill-opacity="0.4" transform="rotate(240)"/> 
            <path d="M0,0C5,-61,-32,-86,-95,-90L-100,-46C-65,-53,-24,-35,0,0Z" fill="black" fill-opacity="0.4" transform="rotate(300)"/> 
            <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0" to="360" dur="4s" repeatCount="indefinite"/> 
 
        </g> 
        <circle r="83" fill="url(#gloss)"/> 
        <circle r="90" fill="none" stroke="black" stroke-width="2"/> 
    </g> 
</svg>