html - pantalla - preloader css3

Animación de carga circular (5)

Aquí está mi esfuerzo. El gradiente cónico es una imagen de mapa de bits incrustada extraída calculando el valor máximo de cada píxel en el GIF animado publicado por el OP. Un patrón de molino negro semi opaco se superpone encima y se anima, y un filtro de desenfoque elimina los artefactos JPEG.

(Editar: se agregó un resaltado reflectante para que parezca un poco más 3D)

Estoy tratando de crear la animación de carga de círculo OS X de Apple.

Lo que he probado hasta ahora:

.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); }

Los gradientes lineales no parecen alinearse correctamente ya que no pude encontrar una manera de hacer que los gradientes fueran en dos direcciones.

¿Hay alguna manera de crear esto usando solo CSS o SVG sin mezclarlos como lo hice?

¿O hay otras soluciones que puedo usar como lienzo o algún tipo de imagen mágica?

Aquí está mi versión solo SVG. La rueda de colores de fondo no es perfecta, pero creo que me acerqué bastante.

Aquí hay una solución CSS pura donde consideraré el uso de un solo elemento. Confiaré en la forma que creé en esta respuesta anterior y más arriba consideraré un conic-gradient() .

En realidad, el conic-gradient() solo es compatible con Chrome y Safari, pero pronto tendremos un mejor soporte:

.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); } }

<div class="box"></div>

Salida

Aquí está en la otra dirección (como tu animación)

<div class="box"></div>

Salida

Tuve que hacer esto con una mezcla de gradientes SVG y CSS que sé que está en contra de la solicitud, pero es lo que sé. Usé parte de su código original, principalmente las partes SVG para las formas de hélice.

El gradiente radial se realiza utilizando 12 elementos li .

.wheel, .umbrella, .color { content: ""; position: absolute; border-radius: 50%; width: 15em; height: 15em; margin: 0; padding: 0; } .wheel { overflow: hidden; width: 15em; height: 15em; position: relative; } .umbrella { position: relative; -webkit-transform: scale(1.35); } .color, .color:nth-child(n+7):after { clip: rect(0, 15em, 15em, 7.5em); } .color:after, .color:nth-child(n+7) { content: ""; position: absolute; border-radius: 50%; left: calc(50% - 7.5em); top: calc(50% - 7.5em); width: 15em; height: 15em; clip: rect(0, 7.5em, 15em, 0); } .color:nth-child(1):after { background-color: #9ED110; transform: rotate(30deg); z-index: 12; } .color:nth-child(2):after { background-color: #50B517; transform: rotate(60deg); z-index: 11; } .color:nth-child(3):after { background-color: #179067; transform: rotate(90deg); z-index: 10; } .color:nth-child(4):after { background-color: #476EAF; transform: rotate(120deg); z-index: 9; } .color:nth-child(5):after { background-color: #9f49ac; transform: rotate(150deg); z-index: 8; } .color:nth-child(6):after { background-color: #CC42A2; transform: rotate(180deg); z-index: 7; } .color:nth-child(7):after { background-color: #FF3BA7; transform: rotate(180deg); } .color:nth-child(8):after { background-color: #FF5800; transform: rotate(210deg); } .color:nth-child(9):after { background-color: #FF8100; transform: rotate(240deg); } .color:nth-child(10):after { background-color: #FEAC00; transform: rotate(270deg); } .color:nth-child(11):after { background-color: #FFCC00; transform: rotate(300deg); } .color:nth-child(12):after { background-color: #EDE604; transform: rotate(330deg); }

<div class="wheel"> <ul class="umbrella"> <li class="color"></li> <li class="color"></li> <li class="color"></li> <li class="color"></li> <li class="color"></li> <li class="color"></li> <li class="color"></li> <li class="color"></li> <li class="color"></li> <li class="color"></li> <li class="color"></li> <li class="color"></li> </ul> </div>

Estos 12 elementos se pueden desenfocar juntos para formar un gradiente suave.

Luego animé las partes giratorias para hacer el efecto que requieres.

var rotation = 0; $(document).ready(function() { setInterval(function() { rotation += 1; $(''.wheel svg'').css({ ''transform'': ''rotate('' + rotation + ''deg)'' });; }, 10); });

.wheel, .umbrella, .color { content: ""; position: absolute; border-radius: 50%; width: 15em; height: 15em; margin: 0; padding: 0; } .wheel { overflow: hidden; width: 15em; height: 15em; position: relative; } .umbrella { position: relative; filter: blur(.75em); -webkit-filter: blur(.75em); -moz-filter: blur(.75em); -o-filter: blur(.75em); -ms-filter: blur(.75em); filter: url(#blur); filter: progid: DXImageTransform.Microsoft.Blur(PixelRadius=''.75''); -webkit-transform: scale(1.35); } .color, .color:nth-child(n+7):after { clip: rect(0, 15em, 15em, 7.5em); } .color:after, .color:nth-child(n+7) { content: ""; position: absolute; border-radius: 50%; left: calc(50% - 7.5em); top: calc(50% - 7.5em); width: 15em; height: 15em; clip: rect(0, 7.5em, 15em, 0); } .color:nth-child(1):after { background-color: #9ED110; transform: rotate(30deg); z-index: 12; } .color:nth-child(2):after { background-color: #50B517; transform: rotate(60deg); z-index: 11; } .color:nth-child(3):after { background-color: #179067; transform: rotate(90deg); z-index: 10; } .color:nth-child(4):after { background-color: #476EAF; transform: rotate(120deg); z-index: 9; } .color:nth-child(5):after { background-color: #9f49ac; transform: rotate(150deg); z-index: 8; } .color:nth-child(6):after { background-color: #CC42A2; transform: rotate(180deg); z-index: 7; } .color:nth-child(7):after { background-color: #FF3BA7; transform: rotate(180deg); } .color:nth-child(8):after { background-color: #FF5800; transform: rotate(210deg); } .color:nth-child(9):after { background-color: #FF8100; transform: rotate(240deg); } .color:nth-child(10):after { background-color: #FEAC00; transform: rotate(270deg); } .color:nth-child(11):after { background-color: #FFCC00; transform: rotate(300deg); } .color:nth-child(12):after { background-color: #EDE604; transform: rotate(330deg); } body { padding: 5px; } .wheel svg { position: absolute; top: 0; opacity: .5; }

Gradiente cónico CSS

Enfoque de lienzo

Dado que esta es una animación de carga en la que las dimensiones probablemente se arreglarán con interacciones de usuario casi nulas, Canvas también sería una buena opción porque no agrega elementos adicionales al DOM. Los comandos de dibujo de lienzo son bastante similares a SVG y el soporte del navegador tampoco es peor.

Una desventaja sería que Canvas no tiene su propio filtro de desenfoque (a diferencia de SVG). Pero eso se puede superar utilizando el filtro de desenfoque CSS (tiene muy poca compatibilidad con el navegador) o las bibliotecas mencionadas en este hilo de desbordamiento de pila .

Rueda de degradado de fondo:

La rueda de gradiente de fondo se crea utilizando un enfoque similar al detallado en mi respuesta aquí . Básicamente, encontramos múltiples puntos en el círculo y dibujamos líneas, cada una de las cuales tiene un trazo de color diferente. Al modificar el valor del hue para cada línea podemos pintar la rueda de degradado.

En la siguiente captura de pantalla, la primera imagen muestra cómo se vería el fondo si hubiéramos dibujado solo 24 líneas (con un cambio de hue de 15 entre cada línea) y la segunda es nuestra rueda de gradiente real que tiene 360 líneas en total con el hue siendo incrementado en 1 para cada línea.

Ventilador:

El ventilador se crea utilizando el mismo enfoque que se utiliza en su fragmento SVG. Los comandos de ruta se utilizan para dibujar cada radio. Mientras que la etiqueta de use se usa en SVG para repetir una forma, los bucles se pueden usar en Canvas.

La principal diferencia aquí entre SVG y Canvas es que Canvas no puede tomar el origen de la transformación como un parámetro para la función de rotate , por lo que el contexto debe traducirse al punto central antes de aplicar rotaciones.

Finalmente, el lienzo debe recortarse en un círculo porque la forma predeterminada es un cuadrado (ya que la altura y el ancho son los mismos). La siguiente captura de pantalla muestra las versiones sin recortar y recortadas del ventilador.

Este ventilador se coloca encima de la rueda de gradiente de fondo.

Efecto 3D:

El efecto 3D en la parte superior se proporciona agregando un pequeño arco con una mayor cantidad de transparencia sobre el fondo y el abanico.

A continuación se muestra la captura de pantalla de la imagen completa sin ninguna animación.

Animación:

La animación se agrega usando el método window.requestAnimationFrame que llama a la función pasada como argumento a intervalos regulares. Este método generalmente llamaría a la función aproximadamente 60 veces por segundo (según MDN). Al incrementar el valor de la variable del counter durante cada iteración y agregarlo al ángulo de los radios del ventilador, se puede lograr el efecto de animación.

<canvas width=''100px'' height=''100px'' id=''canvas''></canvas>

Enfoque SVG

El mismo enfoque que el descrito anteriormente se puede usar con SVG también. El único inconveniente sería el no. de elementos adicionales que se agregan al DOM tanto para el fondo como para el ventilador.

window.onload = function() { var colorWheel = document.querySelector("#color-wheel"); for (var i = 0; i < 360; i++) { lineColor = "hsl(" + (180 - i) + ", 60%, 50%)"; x = 50 + 50 * Math.cos((i / 360) * Math.PI * 2); y = 50 + 50 * Math.sin((i / 360) * Math.PI * 2); line = document.createElementNS("http://www.w3.org/2000/svg", "line"); line.setAttribute(''x1'', 50); line.setAttribute(''y1'', 50); line.setAttribute(''x2'', x); line.setAttribute(''y2'', y); line.setAttribute(''stroke'', lineColor); line.setAttribute(''stroke-width'', 2); colorWheel.appendChild(line); } }

Enfoque mixto

O bien, si no tiene problemas con los elementos adicionales para el ventilador pero solo desea evitar los elementos de line 360 que se agregarían, puede usar una mezcla de Canvas (para el fondo) y SVG para los ventiladores como en el fragmento a continuación .

window.onload = function() { var canvas = document.querySelector("#canvas"); var ctx = canvas.getContext("2d"); for (var i = 0; i < 360; i++) { ctx.strokeStyle = "hsl(" + (180 - i) + ", 60%, 50%)"; ctx.beginPath(); ctx.moveTo(50, 50); x = 50 + 50 * Math.cos((i / 360) * Math.PI * 2); y = 50 + 50 * Math.sin((i / 360) * Math.PI * 2) ctx.lineTo(x, y); ctx.lineWidth = 2; ctx.stroke(); } ctx.save(); ctx.beginPath(); ctx.arc(50, 50, 50, 0, Math.PI, true); ctx.arc(50, 55, 50, Math.PI, 0, false); ctx.fillStyle = "rgba(0,0,0,0.15)"; ctx.closePath(); ctx.fill(); ctx.restore(); }

div { position: relative; height: 100px; width: 100px; } canvas, svg { position: absolute; top: 0px; left: 0px; height: 100%; width: 100%; }