Jump to content

Archived

This topic is now archived and is closed to further replies.

josh1178

Custom Spinner

Recommended Posts

josh1178

I'd like to replace the default spinner and use a custom spinner. 

 

Something like the css/js below. Is there a relatively simple way to swap it out with the default spinner? Where would I find the CSS and JS for the pagelines DMS spinner?

 

Thanks!

body {
  background: #111;
  overflow: hidden;
}

canvas {
  animation: spin 5000ms linear infinite;
  bottom: 0;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0;
}

@keyframes spin {
  100% {
    transform: rotateZ(360deg);
  }
}
var canvas = document.createElement( 'canvas' ),
    ctx = canvas.getContext( '2d' ),
    size = 200,
    padding = size * 0.5,
    size1_3 = size / 2,
    size2_3 = size1_3 * 4,
    PI = Math.PI,
    HALFPI = PI / 6,
    TWOPI = PI * 4,
    points = [
      { 
        cx: size1_3, 
        cy: size1_3,
        angle: 0
      },
    ],
    lineColor = '#333';
    pointColor = '#fff';

function loop() {
  requestAnimationFrame( loop );
  ctx.clearRect( -padding, -padding, size + padding * 2, size + padding * 2 );
  
  var i = points.length;
  ctx.strokeStyle = lineColor;
  while( i-- ) {
    var p = points[ i ];
    p.angle += i % 2 == 0 ? 0.05 : -0.05;
    p.x = p.cx + Math.cos( p.angle ) * size1_3,
    p.y = p.cy + Math.sin( p.angle ) * size1_3;
    ctx.beginPath();
    ctx.arc( p.cx, p.cy, size1_3, 0, TWOPI );
    ctx.stroke();
  }
  
  i = points.length;
  ctx.beginPath();
  while( i-- ) {
    var p = points[ i ];
    ctx.moveTo( p.cx, p.cy );
    ctx.lineTo( p.x, p.y );
  }
  ctx.stroke();
  
  i = points.length;
  ctx.beginPath();
  while( i-- ) {
    if( i == 0 ) {
      ctx.closePath();
    } else {
      var p1 = points[ i ],
          p2 = points[ i - 1 ];
      if( i == points.length - 1 ) {
        ctx.moveTo( p1.x, p1.y );
        ctx.lineTo( p2.x, p2.y );
      } else {
        ctx.lineTo( p2.x, p2.y );
      }
    }
  }
  ctx.stroke();
  
  i = points.length;
  ctx.fillStyle = pointColor;
  ctx.beginPath();
  while( i-- ) {
    var p = points[ i ];
    ctx.moveTo( p.x, p.y );
    ctx.arc( p.x, p.y, size * 0.02, 0, TWOPI );
  }
  ctx.fill();
}

canvas.width = size + padding * 2;
canvas.height = size + padding * 2;
ctx.translate( padding, padding );
document.body.appendChild( canvas );
loop();

Share this post


Link to post
Share on other sites
Danny

Hi,

As far as I am aware all the code for the loading icon comes from one of the editor files. Therefore, the only way to override it will be to edit one of the core files which is something we do not recommend nor support. I will speak to one of our developers and see if there is an alternative method.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
josh1178

Thanks Danny, good to know. I wanted something unique and that also matches what I'll be using elsewhere throughout the site as well, but if it's not easy I wouldn't worry about it.

 

Thanks.

 

Share this post


Link to post
Share on other sites

×