Pen Settings

HTML

CSS

CSS Base

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

Vue

              
                <!-- ALL THE HTML -->
<template>
  <div id="app">
   <div
      v-for="(item, index) in clouds"
      class="cloud"
      :id="'cloud-' + index"
      :style="makeStarStyles(index)"
         ></div>
    <!--<button class="testbtn" @click="changeDisplay">Fire!</button> -->
    <div id="holoLoader" :class="displayMode ? 'active' : 'notActive'">
      <div class="holoLayer" id="core"><canvas id="coreCanvas" /></div>
      <div class="holoLayer" id="firstCircle">
        <canvas width="450" height="450" id="secondCanvas" />
      </div>
      <div class="holoLayer" id="secondCircle">
        <div class="slider a">
        <div class="sliderPoint a">
          <!-- <div v-for="item in sparks" class="spark" /> -->
          </div>
          </div>
        </div>
      <div class="holoLayer" id="thirdCircle"></div>
     <div class="holoLayer" id="fourthCircle"></div>
     <div class="holoLayer" id="fifthCircle">
       <canvas id="firstCanvas" />
     </div>
     <div class="holoLayer" id="sixthCircle"></div>
    </div>
   <canvas width="470" height="200" id="shootingParticles" :class="displayMode ? 'active' : 'notActive'"/>
  </div>
</template>
<!-- ALL THE JAVASRIPT -->
<script>
export default {
  data() {
    return {
      clouds: 50,
      particles:300,
      particleArray:[],
      shootingParticles:100,
      shootingParticlesArray:[],
      ringNumber:8,
      stylesArray:[],
      ringArray:[],
      instances: 4,
      count:300,
      countArray:[],
      start:65,
      then: Date.now(),
      displayModeEngage:Date.now(),
      displayMode:false,
      angles:[[0,25,10,'rgba(255,255,255,1)'],
              [50,76,10,'rgba(255,255,255,1)'],
              [101,126,10,'rgba(255,255,255,1)'],
              [152,177,10,'rgba(255,255,255,1)'],
              [203,227,10,'rgba(255,255,255,1)'],
              [258,279,10,'rgba(255,255,255,1)'],
              [305,334,10,'rgba(255,255,255,1)'],
             ],
    };
  },
  methods: {
    changeDisplay() {
      this.displayMode = !this.displayMode
      this.displayModeEngage = Date.now();
      //console.log("changed display!")
    },
    loop() {
      let now = Date.now();
      let delta = now - this.then;
      this.update();
      this.render();
      this.then = now;
      requestAnimationFrame(this.loop);
    },
    update() {
      if(this.displayMode === false) {
        this.start = this.start + 0.2;
        this.start >= 100 ? (this.changeDisplay(), this.start = 100) : null;
      }
      else {
        this.start = this.start - 0.4;
        this.start <= 0 ? (this.changeDisplay(), this.start = 0) : null;
      }
      //console.log(this.start)
      this.particleArray.forEach((item, index) => {
        this.adjustLength(item);
        this.moveParticle(item);
      })
      this.shootingParticlesArray.forEach((item, index) => {
        this.moveShootingParticle(item)  
      })
      this.ringArray.forEach((item, index) => {
        this.updateRings(item)  
      })
      this.countArray.forEach((item, index) => {
        this.updateCount(item)  
      })
      //console.log("we updating!")
    },
    render() {
      let canvas1 = document.getElementById("coreCanvas");
      let canvas2 = document.getElementById("firstCanvas");
      let canvas3 = document.getElementById("secondCanvas");
      let canvas4 = document.getElementById("shootingParticles")
      let ctx = canvas1.getContext("2d");
      let ctx2 = canvas2.getContext("2d");
      let ctx3 = canvas3.getContext("2d");
      let ctx4 = canvas4.getContext("2d");
      ctx.globalCompositeOperation = 'screen'; //test */
      ctx4.globalCompositeOperation = 'screen'; //test */
      ctx.clearRect(0, 0, canvas1.width, canvas1.height);
      this.particleArray.forEach((item, index) => {
        this.renderParticle(item, ctx)
      })
      ctx2.clearRect(0, 0, canvas2.width, canvas2.height);
      this.drawCircularPlate(this.angles, ctx2);
      ctx3.clearRect(0, 0, canvas3.width, canvas3.height);
      this.countArray.forEach((item, index) => {
        this.drawCounter(item, ctx3)
      })
      this.drawShootTime(this.start, ctx3)
      this.drawOuterRing(this.ringArray, ctx3);
      ctx4.clearRect(0,0,canvas4.width, canvas4.height);
      this.shootingParticlesArray.forEach((item, index) => {
        this.renderShootingParticles(item, ctx4)
      })
      /* ctx.clearRect(0, 0, canvas.width, canvas.height);
      ctx.globalCompositeOperation = 'lighten'; //test */
      //console.log("we rendering!")
    },
    createShootingParticles(number) {
      for(let n=0;n<number;n++) {
        let obj = {
          x:470,
          y:95 + (Math.random() * 12 - 6),
          radius:Math.random() * 5 + 15,
          speed:Math.random() * 7 + 1,
          opacity:1,
          delay:Math.floor(Math.random() * 1000),
        }
        this.shootingParticlesArray.push(obj);
      }
    },
    drawCounterInitiation(number) {
      for(let n=0; n<number; n++) {
        let obj = {
          number: n,
          opacity:Math.random(),
          reverse:true,
          start: n * (360/number),
          finish:(n + 1) * (360/number) ,
          fill: "transparent",
          shadow: "rgba(255,255,255,0.5)",
          strokeStyle:"255,255,255",
          lineWidth: Math.floor(Math.random() * 5 + 3)
        }
        this.countArray.push(obj)
      }
    },
    drawShootTime(start, ctx) {
      let finish = 360/100 * start - 90;
      ctx.strokeStyle = "rgba(255,255,255," + start/100 + ")";
      ctx.beginPath();
      ctx.arc(450/2, 450/2, 185, -90 * (Math.PI / 180), finish * (Math.PI / 180));  
      ctx.stroke();
      ctx.closePath();
      //X = Math.cos(angle*Math.PI/180) * length + startPointX
      let calculateX = Math.cos((finish+5)*Math.PI/180) * 185 + (450/2)
      //Y = Math.sin(angle*Math.PI/180) * length + startPointY    
      let calculateY = Math.sin((finish+5)*Math.PI/180) * 185 + (450/2)
      ctx.fillStyle = "white";
      ctx.textAlign = "center";
      ctx.font = "10px Arial";
      ctx.fillText(start.toString().substring(0,2) + "%", calculateX, calculateY);
    },
    updateCount(item) {
      if(item.reverse === true) {
        item.opacity -= 0.01;
        item.opacity < 0.1 ? item.reverse = false : null
      }
      if(item.reverse === false) {
        item.opacity += 0.01;
        item.opacity > 0.9 ? item.reverse = true : null
      }
    },
    drawCounter(item, ctx) {
        if(item.number % 2) {
        ctx.beginPath();
        ctx.strokeStyle = "rgba(" + item.strokeStyle + "," + item.opacity + ")";
        ctx.arc(450/2, 450/2, 215 + (item.lineWidth/2), item.start * (Math.PI / 180), item.finish * (Math.PI / 180));
        ctx.fillStyle = item.fill;
        ctx.fill();
        ctx.shadowColor = item.shadow;
        ctx.shadowBlur = 8;
        ctx.lineWidth = item.lineWidth
        ctx.strokeStyle = 1;
        ctx.stroke();
        ctx.closePath();
      }
    },
    createCoreParticles(number) {
      for(let n=0;n<number;n++) {
        let angle = Math.floor(Math.random() * 360);
        let ring = Math.floor(Math.random() * 25);
        let length = 80 + Math.random() * 40;
        let speed = Math.random() - 0.5;
        speed > 0.3 ? speed = 0.3 : speed = speed;
        let particle = {
          x:250 + (length + ring * Math.cos(angle * (Math.PI / 180))),
          y:250 + (length + ring * Math.sin(angle * (Math.PI / 180))),
          radius:Math.random() * 2 + 2,
          startRadius:Math.random() * 2 + 2,
          length:length,
          speed:speed,
          usedLength:length,
          grow:Math.random() > 0.5 ? true : false,
          startAngle:angle,
          number:n,
          usedAngle:angle,
          ring: ring,
          color: Math.random() > 0.5 ? "rgba(255, 255, 255,0.3)" : "rgba(214,107,24,0.3)",
          shadow:"rgba(0, 0, 0,1)",
          number:n,
        }
        this.particleArray.push(particle);
      }
    },
    makeStarStyles(cloud) {
      if(document.getElementById("cloud-" + cloud) === null) {
      let radius = Math.floor(Math.random() * 230 + 130);
      let x = "top:" + Math.floor(Math.random() * document.body.clientHeight - radius/2) + "px";
      let y = "left:" + Math.floor(Math.random() * document.body.clientWidth - radius/2) + "px";
      let animationTime = Math.floor(Math.random() * 10 + 5);
      let animationDelay = Math.floor(Math.random() * 15);
      let background = "background:radial-gradient(circle, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.05) 34%, rgba(217,217,217,0.0) 70%)";
      let style = "position:absolute;" + x + ";" + y + ";" + "height:" + radius + "px;" + "width:" + radius + "px;" + "border-radius:180px;" + background + ";animation-duration: " + animationTime + "s;animation-delay:" + animationDelay + "s;";
        this.stylesArray.push(style)
      //console.log(style)
      return style;
      }
      else {
        return this.stylesArray[cloud]
      }
    },
    renderParticle(particle, ctx) {
      var grd = ctx.createRadialGradient(particle.x, particle.y, 1, particle.x,   particle.y, particle.radius-particle.radius/10);
      grd.addColorStop(0,particle.color);
      grd.addColorStop(1,"rgba(255,255,255,0)");
      ctx.fillStyle = grd;
      ctx.beginPath();
      ctx.arc(particle.x, particle.y, particle.radius, 0, 2 * Math.PI);
      ctx.closePath();
      ctx.fill();
    },
    renderShootingParticles(particle, ctx) {
      if(particle.x < 470) {
      ctx.fillStyle = "rgba(255,255,255," + particle.opacity + ")";
      ctx.beginPath();
      ctx.arc(particle.x, particle.y, particle.radius, 0, 2 * Math.PI);
      ctx.closePath();
      ctx.fill();
      }
    },
    moveShootingParticle(item) {
      if(this.displayMode === true && Date.now() > this.displayModeEngage + 1000) {
        item.opacity = item.x/470;
        item.x/470 * 10 > 0 ? item.radius = item.x/470 * 10 : item.radius = 0;
        if(item.x > 0) {
          if(Date.now() > this.displayModeEngage + 1000 + item.delay) {
            item.x = item.x - item.speed
          }
        }
        else {
          item.x = 470
        }
      }
      else if(this.displayMode === false && Date.now() < this.displayModeEngage + 1500) {
          item.opacity = item.x/470;
          item.x/470 * 10 > 0 ? item.radius = item.x/470 * 10 : item.radius = 0;
          item.x = item.x - item.speed
      }
      else if(this.displayMode === false && Date.now() > this.displayModeEngage + 1500) {
        item.x = 470;
      }
    },
    createRings(rings, array) {
      //console.logs
      for(let i = 0; i < rings ; i ++) {
        let distance = (360/rings)
        let startAng = Math.floor(Math.random() * 360)
        let endAng = startAng + Math.random() * 50 + 50;
        //let distance = Math.floor(Math.random() * 50 + 50)
        let distandeDrawn = (360/rings) /  100 * 90
        let distanceTransparent = (360/rings) /  100 * 10
        let obj = {
           startAng: startAng * (Math.PI / 180),
           endAng: endAng * (Math.PI / 180),
           length: 120 + 7 * i,
           shown:true,
           moveDirection:Math.random() > 0.5 ? true : false,
           moveDone:false,
          }
        array.push(obj);
        console.log(obj)
      }
    },
    updateRings(ring) {
      if(ring.moveDone === false) {
        ring.moveDirection ?
         (ring.startAng -= 0.01, ring.endAng -= 0.01) : 
         (ring.startAng += 0.01, ring.endAng += 0.01);
         Math.random() < 0.02 ? ring.moveDone = true : null;
      }
      else {
        ring.moveDirection = !ring.moveDirection;       
        ring.moveDone = false
      }
    },
    drawOuterRing(points, ctx) {
      points.forEach(item => {
         if(item.shown === true) {
           //console.log(item.startAng, item.endAng)
            ctx.beginPath();
            ctx.arc(450/2, 450/2, item.length, item.startAng, item.endAng, 0, 2 * Math.PI);
            ctx.fillStyle = 'transparent'
            ctx.fill();
            ctx.shadowColor = 'rgba(255,255,255,1)';
            ctx.shadowBlur = 15;
            ctx.lineWidth = 5;
            ctx.strokeStyle = "rgba(255,255,255,1)";
            ctx.stroke();
            ctx.closePath();
         }
      })
    },
    adjustLength(particle) {
      //particle.number === 0 ? console.log(particle.grow) : null
      if(particle.grow && !this.displayMode) {
        particle.usedLength += Math.abs(particle.speed) / 2;
        particle.usedLength > particle.length + 20 ? particle.grow = false : null;
        particle.radius > particle.startRadius ? (particle.radius -= 0.5, particle.usedLength += particle.radius / 3) : null;
      }
      else if(!particle.grow && !this.displayMode) {
        particle.usedLength -= Math.abs(particle.speed) / 2;
        particle.usedLength < particle.length - 20 ? particle.grow = true : null;
        particle.radius > particle.startRadius ? (particle.radius -= 1) : null;
      }
      else if(this.displayMode) {
        !particle.grow ? particle.grow = true : null;
        particle.usedLength > 0 ? particle.usedLength -= particle.radius / 10 : null;
        particle.radius < 25 ? particle.radius += 1 : null;
      }
    },
    moveParticle(particle) {
      //Math.random() < 0.5 ? particle.usedLength++ : particle.usedLength--;
      particle.usedAngle = particle.usedAngle + particle.speed;
      particle.x = 250 + particle.usedLength * Math.cos(particle.usedAngle * (Math.PI / 180));
      particle.y = 250 + particle.usedLength * Math.sin(particle.usedAngle * (Math.PI / 180));
    },
    drawCircularPlate(angles,ctx) {
      angles.forEach((item) => {     
        ctx.beginPath();
        ctx.arc(450/2, 450/2, 150, item[0] * (Math.PI / 180), item[1] * (Math.PI / 180));
        ctx.fillStyle = 'transparent'
        ctx.fill();
        ctx.shadowColor = item[3];
        ctx.shadowBlur = 15;
        ctx.lineWidth = item[2];
        ctx.strokeStyle = item[3];
        ctx.stroke();
        ctx.closePath();
      })
        ctx.beginPath();
        ctx.arc(450/2, 450/2, 138, 0, 2 * Math.PI);
        ctx.fillStyle = 'transparent'
        ctx.fill();
        ctx.shadowColor = 'rgba(255,255,255,1)';
        ctx.shadowBlur = 15;
        ctx.lineWidth = 2;
        ctx.strokeStyle = 'rgba(255,255,255,1)';
        ctx.stroke();
        ctx.closePath();
      
        ctx.beginPath();
        ctx.arc(450/2, 450/2, 163, 0, 2 * Math.PI);
        ctx.fillStyle = 'transparent'
        ctx.fill();
        ctx.shadowColor = 'rgba(255,255,255,1)';
        ctx.shadowBlur = 15;
        ctx.lineWidth = 2;
        ctx.strokeStyle = 'rgba(255,255,255,1)';
        ctx.stroke();
        ctx.closePath();
    }
  },
  mounted() {
    this.drawCounterInitiation(this.count);
    this.createCoreParticles(this.particles);
    this.createShootingParticles(this.shootingParticles);
    this.createRings(this.ringNumber,this.ringArray);
    let canvas1 = document.getElementById("coreCanvas");
    canvas1.width = document.getElementById("core").offsetWidth;
    canvas1.height = document.getElementById("core").offsetHeight;
    let canvas2 = document.getElementById("firstCanvas");
    canvas2.width = document.getElementById("firstCircle").offsetWidth;
    canvas2.height = document.getElementById("firstCircle").offsetHeight;
    let ctx2 = canvas2.getContext("2d");
    this.drawCircularPlate(this.angles, ctx2);
    let canvas3 = document.getElementById("secondCanvas");
    canvas2.width = document.getElementById("firstCircle").offsetWidth;
    canvas2.height = document.getElementById("firstCircle").offsetHeight;
    window.addEventListener("resize", function(){
    let canvas1 = document.getElementById("coreCanvas");
    canvas1.width = document.getElementById("core").offsetWidth;
    canvas1.height = document.getElementById("core").offsetHeight;
    let canvas2 = document.getElementById("firstCanvas");
    canvas2.width = document.getElementById("firstCircle").offsetWidth;
    canvas2.height = document.getElementById("firstCircle").offsetHeight;
    let canvas3 = document.getElementById("secondCanvas");
    canvas2.width = document.getElementById("firstCircle").offsetWidth;
    canvas2.height = document.getElementById("firstCircle").offsetHeight;
    }, true);
    //Let's start this!
    //we go!
    this.loop();
  }
};
</script>
<!-- ALL THE STYLES -->
<style>
  :root {
  --main-blue-color: #13aeff;
  --main-white-color: #ffffff;
  --main-orange-color: #d66b18;
}
  body {
    width:100vw;
    height:100vh;
    margin:0;
    padding:0;
    overflow:hidden;
    background-image: radial-gradient( circle farthest-corner at 10% 20%,  rgba(28,38,47,1) 0%, rgba(37,47,57,1) 90% );
  }
  .testbtn {
    position: absolute;
    top: 20px;
    left: calc(50vw - 25px);
    height: 20px;
    box-shadow: 0px 0px 15px 0px rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    height: 25px;
    width: 70px;
    background-color: transparent;
    z-index: 10000000000000;
    color: white;
    border: 1px solid white;
  }
  .cloud {
    z-index:-1;
    opacity:0.5;
    animation:cloudFade;
  }
 @keyframes cloudFade {
  0%    {opacity:0.5;}
  50%   {opacity:0;}
  100%  {opacity:0.5;}
}
  
  @keyframes reverseRotate {
  from { transform:rotate(0deg) } 
  to { transform:rotate(360deg) } 
}
    @keyframes rotate {
  from { transform:rotate(360deg) } 
  to { transform:rotate(0deg) } 
}
  
  #secondCircle .slider {
    background-color: transparent;
    width: calc(50% + 4px);
    box-sizing: border-box;
    height: 8px;
    top:calc(50% - 4px);
    left:calc(50% - 4px);
    position: relative;
    animation:rotate 8s infinite linear;
    transform-origin: 4px 4px;

  }
  
  #secondCircle .sliderPoint.a {
    box-shadow: 0px 0px 3px 2px rgba(255,255,255,0.55);
    left: calc(100% - 2px);
    width: 4px;
    background-color: rgba(255,255,255,0.55);
    position:relative;
    box-sizing: border-box;
    border-radius: 100%;
    height: 4px;
  }
  
  #secondCircle .sliderPoint.a:before {
    content: '';
    box-shadow: 0px 0px 3px 2px rgba(255,255,255,0.55);
    width: 4px;
    position: relative;
   	top: 183px;
	  left: -285px;
    border-radius: 90px;
    height: 4px;
    display: block;
    background-color: rgba(255,255,255,0.55);
  }
  #secondCircle .sliderPoint.a:after {
    content: '';
    box-shadow: 0px 0px 3px 2px rgba(255,255,255,0.55);
    width: 4px;
    position: relative;
    top: -190px;
	  left: -270px;
    border-radius: 90px;
    height: 4px;
    display: block;
    background-color: rgba(255,255,255,0.55);
  }
  #holoLoader.active .sliderPoint.a:after {
    animation:sparks 3s infinite linear 0s;
  }
  #holoLoader.active .sliderPoint.a:before {
    animation:sparks 3s infinite linear 1.2s;
  }
  #holoLoader.active .sliderPoint.a {
    animation:sparks 3s infinite linear 0.3s;
  }
  
  @keyframes sparks {
    0% {
     box-shadow: 0px 0px 5px 3px rgba(255,255,255,0.75);
    }
    60% {
     box-shadow: 0px 0px 5px 3px rgba(255,255,255,0.75); 
    }
    61% {
     box-shadow: 0px 0px 5px 8px rgba(255,255,255,0.75); 
    }
    62% {
     box-shadow: 0px 0px 5px 3px rgba(255,255,255,0.75); 
    }
    84% {
     box-shadow: 0px 0px 5px 3px rgba(255,255,255,0.75); 
    }
    85% {
     box-shadow: 0px 0px 5px 8px rgba(255,255,255,0.75); 
    }
    86% {
     box-shadow: 0px 0px 5px 3px rgba(255,255,255,0.75); 
    }
  }
  
  #holoLoader {
    z-index:1;
    //box-shadow: 0px 0px 39px 0px rgba(148,255,241,1);
    position:relative;
    border-radius:50%;
    background-color:rgba(255,255,255,0);
    width:500px;
    height:500px;
    margin:auto;
    margin-top:calc(50vh - 250px);
    transition:all 0.5s ease-in-out 0.4s;
    //transform: perspective(1000px) rotateX(30deg) rotateY(-50deg) rotateZ(0deg);

  }
  
  .holoLayer {
    //background: radial-gradient(circle, rgba(255,255,255,0) 0%, rgba(202,226,255,0) 65%, rgba(147,196,255,1) 100%);
    //box-shadow: 0px 0px 39px 0px rgba(148,255,241,0.3);
    border-radius:360px;
    transition:all 0.5s ease-in-out 0s;
  }
  
  #holoLoader.active {
    transform: perspective(1000px) rotateX(30deg) rotateY(-50deg) rotateZ(0deg);
    transition:all 0.5s ease-in-out;
  }
  
  #core {
    width:100%;
    height:100%;
    background:radial-gradient(circle, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 17%, rgba(147,196,255,0.1) 24%, rgba(255,255,255,0) 30%)
  }
  #coreCanvas, #firstCanvas, #secondCanvas {
   width:100%;
   height:100%;
  }
  #firstCircle {
    position:absolute;
    top:0px;
    width:90%;
    height:90%;
    margin:5%;
  }
  
  @keyframes stutterMovement {
    0% {
      transform:rotate(0deg)
    }
    10% {
      transform:rotate(50deg)
    }
    30% {
      transform:rotate(50deg)
    }
    40% {
      transform:rotate(50deg)
    }
    45% {
      transform:rotate(70deg)
    }
    60% {
      transform:rotate(-20deg)
    }
    70% {
      transform:rotate(0deg)
    }
    85% {
      transform:rotate(20deg)
    }
    90% {
      transform:rotate(0deg)
    }
    100% {
      transform:rotate(0deg)
    }
  }
  
  #holoLoader.active #firstCircle {
    transform: translateX(-130px) translateY(-80px);
    transition:all 0.5s ease-in-out 0.4s;
  }
  #secondCircle {
    position:absolute;
    top:0px;
    width:80%;
    height:80%;
    margin:10%;
    border:1px solid var(--main-orange-color);
  }
 
  #secondCircle:before {
    transition:all 0.5s ease-in-out 0s;
    content:'';
    border:7px dotted rgba(79, 223, 255,0.3);
    position:absolute;
    top:0px;
    width:100%;
    height:100%;
    top: 0px;
    left: 0px;
    border-radius:360%;
    opacity:0;
  }
  #secondCircle:after {
    transition:all 0.5s ease-in-out 0s;
    content:'';
    border:5px solid rgba(79, 223, 255,0.7);
    position:absolute;
    top:0px;
    width:100%;
    height:100%;
    border-radius:360%;
    opacity:0;
  }
  #holoLoader.active #secondCircle {
    border:2px solid rgba(255, 255, 255,0.5);
    transform:translateX(-180px) translateY(-120px);
    transition:all 0.5s ease-in-out 0.4s;
  }
  
  #holoLoader.active #secondCircle:before {
    opacity:1;
    top: -55px;
    left: -75px;
    transition:all 0.5s ease-in-out 0.4s;
    animation: rotation 5s linear 0s infinite;
    transformation-origin:100% 100%;
  }
  
  @keyframes rotation {
    0% {
      transform:rotateZ(0deg)
    }
    100% {
      transform:rotateZ(360deg)
    }
  }
  #holoLoader.active #secondCircle:after {
    opacity:1;
    transform: translateX(45px) translateY(35px);
    transition:all 0.5s ease-in-out 0.4s;
    
  }
  #thirdCircle {
    position:absolute;
    top:0px;
    width:70%;
    height:70%;
    margin:15%;
    border:0px solid white;
    opacity:0;
    transition:all 0.5s ease-in-out 0s;
  }
  #holoLoader.active #thirdCircle:before {
    content:'';
    display:block;
    width:100%;
    height:100%;
    position:absolute;
  }
  #holoLoader.active #thirdCircle:after {
    content:'';
    position:absolute;
    display:block;
    border-radius:180%;
    width:100%;
    height:100%;
  }
  #holoLoader.active #thirdCircle {
    border:5px solid white;
    opacity:1;
    transform: translateX(-520px) translateY(-330px);
    transition:all 0.5s ease-in-out 0.4s;
  }
  #fourthCircle {
    position:absolute;
    top:0px;
    width:60%;
    height:60%;
    margin:20%;
  }
   #holoLoader.active #fourthCircle {
    transform: translateX(-810px) translateY(-540px);
    transition:all 0.5s ease-in-out 0.4s;
  }
  #fifthCircle {
    position:absolute;
    top:0px;
    width:50%;
    height:50%;
    margin:25%;
    animation: stutterMovement 5s infinite linear;
  }
  #holoLoader.active #fifthCircle {
    transform: translateX(-600px) translateY(-400px);
    transition:all 0.5s ease-in-out 0.4s;
  }
  #sixthCircle {
    position:absolute;
    top:0px;
    width:40%;
    height:40%;
    margin:30%;
    border:1px dashed var(--main-orange-color);
    border-radius:180%;
  }
  #holoLoader.active #sixthCircle {
    border:3px solid var(--main-white-color);
    transition:all 0.5s ease-in-out 0.4s;
  }
  
  #holoLoader.active #sixthCircle:before {
    position:absolute;
    width:40%;
    height:40%;
    margin:30%;
    top:-5px;
    left:-5px;
    border:1px dashed var(--main-white-color);
    border-radius:180%;
    transition: all 0.5s ease-in-out 0s;
    animation: bubbleEffect 4s infinite linear;
    box-shadow: 0px 0px 0px rgba(255,255,255,0);
  }
   #sixthCircle:before {
    content:'';
    position:absolute;
    border-radius:180%;
    width:20%;
   	display: block;
    height:20%;
    margin:40%;
    top: -5px;
	  left: -5px;
    border:1px solid var(--main-white-color);
    box-shadow: 0px 0px 5px 2px rgba(214,107,24,1), inset 0 0px 5px rgba(214,107,24,1);
    transition:all 0.5s ease-in-out 0.4s;
    animation: rotationY 4s infinite linear;
  }
  #holoLoader.active #sixthCircle:after {
    position:absolute;
    width:40%;
    height:40%;
    margin:30%;
    top:-5px;
    left:-5px;
    border:1px dashed var(--main-white-color);
    border-radius:180%;
    transition: all 0.5s ease-in-out 0s;
    animation: bubbleEffect 4s infinite linear;
    box-shadow: 0px 0px 0px rgba(255,255,255,0);
  }
  #sixthCircle:after {
    content:'';
    position:absolute;
    display: block;
    width:20%;
    height:20%;
    border-radius:180%;
    margin:40%;
    top: -5px;
	  left: -5px;
    box-shadow: 0px 0px 5px 2px var(--main-orange-color), inset 0 0px 5px var(--main-orange-color);
    border:1px solid var(--main-white-color);
    transition:all 0.5s ease-in-out 0.4s;
    animation: rotationX 8s infinite linear;
  }
  
  @keyframes rotationX {
    0% {
      transform:rotateX(0deg) rotateY(0deg) scale(1);
    }
    100% {
      transform:rotateX(360deg) rotateY(-360deg) scale(1);
    }
  }
  
  @keyframes rotationY {
     0% {
      transform:rotateY(0deg) rotateX(0deg) scale(1)
    }
    100% {
      transform:rotateY(360deg) rotateX(360deg) scale(1)
    }
  }
  
  @keyframes bubbleEffect {
    0% {
      animation-timing-function: linear;
      transform:scale(1);
    }
    25% {
      animation-timing-function: linear;
      opacity:1;
      transform:scale(1.2);
    }
    50% {
      animation-timing-function: linear;
      opacity:0.5;
      transform:scale(1);
    }
    75% {
      animation-timing-function: linear;
      opacity:0.5;
      transform:scale(0.8);
    }
    100%{
      animation-timing-function: linear;
      opacity:1;
      transform:scale(1);
    }
  }
  
  #shootingParticles {
    opacity:0;
    width: 470px;
    height: 200px;
    z-index:1;
    position: absolute;
    top: calc(50vh - 168px);
	  left: calc(50vw - 460px);
    transform: rotateZ(18deg);
    transition:all 0.5s linear 0.5s;
  }
  
  #shootingParticles.active {
     transition:all 0.5s linear 1s;
     opacity:1;
  }
</style>

              
            
!
999px

Console