基于Vue封装酷炫进度条插件

Bertha 。 2023-09-27 12:03 184阅读 0赞

**目录**

效果如下：

源码：

--------------------

### 效果如下： ###

![b0b0acd77c014750964e430c35bf701b.gif][]

### 源码： ###

新建script.js

var script = {
      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();
          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 startAng = Math.floor(Math.random() * 360);
            let endAng = startAng + Math.random() * 50 + 50;
            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);
        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;
        document.getElementById("secondCanvas");
        canvas2.width = document.getElementById("firstCircle").offsetWidth;
        canvas2.height = document.getElementById("firstCircle").offsetHeight;
        }, true);
        //Let's start this!
        //we go!
        this.loop();
      }
    };
    
    function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier /* server only */, shadowMode, createInjector, createInjectorSSR, createInjectorShadow) {
        if (typeof shadowMode !== 'boolean') {
            createInjectorSSR = createInjector;
            createInjector = shadowMode;
            shadowMode = false;
        }
        // Vue.extend constructor export interop.
        const options = typeof script === 'function' ? script.options : script;
        // render functions
        if (template && template.render) {
            options.render = template.render;
            options.staticRenderFns = template.staticRenderFns;
            options._compiled = true;
            // functional template
            if (isFunctionalTemplate) {
                options.functional = true;
            }
        }
        // scopedId
        if (scopeId) {
            options._scopeId = scopeId;
        }
        let hook;
        if (moduleIdentifier) {
            // server build
            hook = function (context) {
                // 2.3 injection
                context =
                    context || // cached call
                        (this.$vnode && this.$vnode.ssrContext) || // stateful
                        (this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext); // functional
                // 2.2 with runInNewContext: true
                if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
                    context = __VUE_SSR_CONTEXT__;
                }
                // inject component styles
                if (style) {
                    style.call(this, createInjectorSSR(context));
                }
                // register component module identifier for async chunk inference
                if (context && context._registeredComponents) {
                    context._registeredComponents.add(moduleIdentifier);
                }
            };
            // used by ssr in case component is cached and beforeCreate
            // never gets called
            options._ssrRegister = hook;
        }
        else if (style) {
            hook = shadowMode
                ? function (context) {
                    style.call(this, createInjectorShadow(context, this.$root.$options.shadowRoot));
                }
                : function (context) {
                    style.call(this, createInjector(context));
                };
        }
        if (hook) {
            if (options.functional) {
                // register for functional component in vue file
                const originalRender = options.render;
                options.render = function renderWithStyleInjection(h, context) {
                    hook.call(context);
                    return originalRender(h, context);
                };
            }
            else {
                // inject component registration as beforeCreate hook
                const existing = options.beforeCreate;
                options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
            }
        }
        return script;
    }
    
    const isOldIE = typeof navigator !== 'undefined' &&
        /msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());
    function createInjector(context) {
        return (id, style) => addStyle(id, style);
    }
    let HEAD;
    const styles = {};
    function addStyle(id, css) {
        const group = isOldIE ? css.media || 'default' : id;
        const style = styles[group] || (styles[group] = { ids: new Set(), styles: [] });
        if (!style.ids.has(id)) {
            style.ids.add(id);
            let code = css.source;
            if (css.map) {
                // https://developer.chrome.com/devtools/docs/javascript-debugging
                // this makes source maps inside style tags work properly in Chrome
                code += '\n/*# sourceURL=' + css.map.sources[0] + ' */';
                // http://stackoverflow.com/a/26603875
                code +=
                    '\n/*# sourceMappingURL=data:application/json;base64,' +
                        btoa(unescape(encodeURIComponent(JSON.stringify(css.map)))) +
                        ' */';
            }
            if (!style.element) {
                style.element = document.createElement('style');
                style.element.type = 'text/css';
                if (css.media)
                    style.element.setAttribute('media', css.media);
                if (HEAD === undefined) {
                    HEAD = document.head || document.getElementsByTagName('head')[0];
                }
                HEAD.appendChild(style.element);
            }
            if ('styleSheet' in style.element) {
                style.styles.push(code);
                style.element.styleSheet.cssText = style.styles
                    .filter(Boolean)
                    .join('\n');
            }
            else {
                const index = style.ids.size - 1;
                const textNode = document.createTextNode(code);
                const nodes = style.element.childNodes;
                if (nodes[index])
                    style.element.removeChild(nodes[index]);
                if (nodes.length)
                    style.element.insertBefore(textNode, nodes[index]);
                else
                    style.element.appendChild(textNode);
            }
        }
    }
    
    /* script */
    const __vue_script__ = script;
    
    /* template */
    var __vue_render__ = function() {
      var _vm = this;
      var _h = _vm.$createElement;
      var _c = _vm._self._c || _h;
      return _c(
        "div",
        { attrs: { id: "app" } },
        [
          _vm._l(_vm.clouds, function(item, index) {
            return _c("div", {
              staticClass: "cloud",
              style: _vm.makeStarStyles(index),
              attrs: { id: "cloud-" + index }
            })
          }),
          _vm._v(" "),
          _c(
            "div",
            {
              class: _vm.displayMode ? "active" : "notActive",
              attrs: { id: "holoLoader" }
            },
            [
              _vm._m(0),
              _vm._v(" "),
              _vm._m(1),
              _vm._v(" "),
              _vm._m(2),
              _vm._v(" "),
              _c("div", { staticClass: "holoLayer", attrs: { id: "thirdCircle" } }),
              _vm._v(" "),
              _c("div", {
                staticClass: "holoLayer",
                attrs: { id: "fourthCircle" }
              }),
              _vm._v(" "),
              _vm._m(3),
              _vm._v(" "),
              _c("div", { staticClass: "holoLayer", attrs: { id: "sixthCircle" } })
            ]
          ),
          _vm._v(" "),
          _c("canvas", {
            class: _vm.displayMode ? "active" : "notActive",
            attrs: { width: "470", height: "200", id: "shootingParticles" }
          })
        ],
        2
      )
    };
    var __vue_staticRenderFns__ = [
      function() {
        var _vm = this;
        var _h = _vm.$createElement;
        var _c = _vm._self._c || _h;
        return _c("div", { staticClass: "holoLayer", attrs: { id: "core" } }, [
          _c("canvas", { attrs: { id: "coreCanvas" } })
        ])
      },
      function() {
        var _vm = this;
        var _h = _vm.$createElement;
        var _c = _vm._self._c || _h;
        return _c(
          "div",
          { staticClass: "holoLayer", attrs: { id: "firstCircle" } },
          [
            _c("canvas", {
              attrs: { width: "450", height: "450", id: "secondCanvas" }
            })
          ]
        )
      },
      function() {
        var _vm = this;
        var _h = _vm.$createElement;
        var _c = _vm._self._c || _h;
        return _c(
          "div",
          { staticClass: "holoLayer", attrs: { id: "secondCircle" } },
          [
            _c("div", { staticClass: "slider a" }, [
              _c("div", { staticClass: "sliderPoint a" })
            ])
          ]
        )
      },
      function() {
        var _vm = this;
        var _h = _vm.$createElement;
        var _c = _vm._self._c || _h;
        return _c(
          "div",
          { staticClass: "holoLayer", attrs: { id: "fifthCircle" } },
          [_c("canvas", { attrs: { id: "firstCanvas" } })]
        )
      }
    ];
    __vue_render__._withStripped = true;
    
      /* style */
      const __vue_inject_styles__ = function (inject) {
        if (!inject) return
        inject("data-v-c170eec2_0", { source: "\n:root {\n  --main-blue-color: #13aeff;\n  --main-white-color: #ffffff;\n  --main-orange-color: #d66b18;\n}\nbody {\n    width:100vw;\n    height:100vh;\n    margin:0;\n    padding:0;\n    overflow:hidden;\n    background-image: radial-gradient( circle farthest-corner at 10% 20%,  rgba(28,38,47,1) 0%, rgba(37,47,57,1) 90% );\n}\n.testbtn {\n    position: absolute;\n    top: 20px;\n    left: calc(50vw - 25px);\n    height: 20px;\n    box-shadow: 0px 0px 15px 0px rgba(255, 255, 255, 0.5);\n    text-transform: uppercase;\n    height: 25px;\n    width: 70px;\n    background-color: transparent;\n    z-index: 10000000000000;\n    color: white;\n    border: 1px solid white;\n}\n.cloud {\n    z-index:-1;\n    opacity:0.5;\n    animation:cloudFade;\n}\n@keyframes cloudFade {\n0%    {opacity:0.5;}\n50%   {opacity:0;}\n100%  {opacity:0.5;}\n}\n@keyframes reverseRotate {\nfrom { transform:rotate(0deg)\n}\nto { transform:rotate(360deg)\n}\n}\n@keyframes rotate {\nfrom { transform:rotate(360deg)\n}\nto { transform:rotate(0deg)\n}\n}\n#secondCircle .slider {\n    background-color: transparent;\n    width: calc(50% + 4px);\n    box-sizing: border-box;\n    height: 8px;\n    top:calc(50% - 4px);\n    left:calc(50% - 4px);\n    position: relative;\n    animation:rotate 8s infinite linear;\n    transform-origin: 4px 4px;\n}\n#secondCircle .sliderPoint.a {\n    box-shadow: 0px 0px 3px 2px rgba(255,255,255,0.55);\n    left: calc(100% - 2px);\n    width: 4px;\n    background-color: rgba(255,255,255,0.55);\n    position:relative;\n    box-sizing: border-box;\n    border-radius: 100%;\n    height: 4px;\n}\n#secondCircle .sliderPoint.a:before {\n    content: '';\n    box-shadow: 0px 0px 3px 2px rgba(255,255,255,0.55);\n    width: 4px;\n    position: relative;\n   \ttop: 183px;\n\t  left: -285px;\n    border-radius: 90px;\n    height: 4px;\n    display: block;\n    background-color: rgba(255,255,255,0.55);\n}\n#secondCircle .sliderPoint.a:after {\n    content: '';\n    box-shadow: 0px 0px 3px 2px rgba(255,255,255,0.55);\n    width: 4px;\n    position: relative;\n    top: -190px;\n\t  left: -270px;\n    border-radius: 90px;\n    height: 4px;\n    display: block;\n    background-color: rgba(255,255,255,0.55);\n}\n#holoLoader.active .sliderPoint.a:after {\n    animation:sparks 3s infinite linear 0s;\n}\n#holoLoader.active .sliderPoint.a:before {\n    animation:sparks 3s infinite linear 1.2s;\n}\n#holoLoader.active .sliderPoint.a {\n    animation:sparks 3s infinite linear 0.3s;\n}\n@keyframes sparks {\n0% {\n     box-shadow: 0px 0px 5px 3px rgba(255,255,255,0.75);\n}\n60% {\n     box-shadow: 0px 0px 5px 3px rgba(255,255,255,0.75);\n}\n61% {\n     box-shadow: 0px 0px 5px 8px rgba(255,255,255,0.75);\n}\n62% {\n     box-shadow: 0px 0px 5px 3px rgba(255,255,255,0.75);\n}\n84% {\n     box-shadow: 0px 0px 5px 3px rgba(255,255,255,0.75);\n}\n85% {\n     box-shadow: 0px 0px 5px 8px rgba(255,255,255,0.75);\n}\n86% {\n     box-shadow: 0px 0px 5px 3px rgba(255,255,255,0.75);\n}\n}\n#holoLoader {\n    z-index:1;\n    //box-shadow: 0px 0px 39px 0px rgba(148,255,241,1);\n    position:relative;\n    border-radius:50%;\n    background-color:rgba(255,255,255,0);\n    width:500px;\n    height:500px;\n    margin:auto;\n    margin-top:calc(50vh - 250px);\n    transition:all 0.5s ease-in-out 0.4s;\n    //transform: perspective(1000px) rotateX(30deg) rotateY(-50deg) rotateZ(0deg);\n}\n.holoLayer {\n    //background: radial-gradient(circle, rgba(255,255,255,0) 0%, rgba(202,226,255,0) 65%, rgba(147,196,255,1) 100%);\n    //box-shadow: 0px 0px 39px 0px rgba(148,255,241,0.3);\n    border-radius:360px;\n    transition:all 0.5s ease-in-out 0s;\n}\n#holoLoader.active {\n    transform: perspective(1000px) rotateX(30deg) rotateY(-50deg) rotateZ(0deg);\n    transition:all 0.5s ease-in-out;\n}\n#core {\n    width:100%;\n    height:100%;\n    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%)\n}\n#coreCanvas, #firstCanvas, #secondCanvas {\n   width:100%;\n   height:100%;\n}\n#firstCircle {\n    position:absolute;\n    top:0px;\n    width:90%;\n    height:90%;\n    margin:5%;\n}\n@keyframes stutterMovement {\n0% {\n      transform:rotate(0deg)\n}\n10% {\n      transform:rotate(50deg)\n}\n30% {\n      transform:rotate(50deg)\n}\n40% {\n      transform:rotate(50deg)\n}\n45% {\n      transform:rotate(70deg)\n}\n60% {\n      transform:rotate(-20deg)\n}\n70% {\n      transform:rotate(0deg)\n}\n85% {\n      transform:rotate(20deg)\n}\n90% {\n      transform:rotate(0deg)\n}\n100% {\n      transform:rotate(0deg)\n}\n}\n#holoLoader.active #firstCircle {\n    transform: translateX(-130px) translateY(-80px);\n    transition:all 0.5s ease-in-out 0.4s;\n}\n#secondCircle {\n    position:absolute;\n    top:0px;\n    width:80%;\n    height:80%;\n    margin:10%;\n    border:1px solid var(--main-orange-color);\n}\n#secondCircle:before {\n    transition:all 0.5s ease-in-out 0s;\n    content:'';\n    border:7px dotted rgba(79, 223, 255,0.3);\n    position:absolute;\n    top:0px;\n    width:100%;\n    height:100%;\n    top: 0px;\n    left: 0px;\n    border-radius:360%;\n    opacity:0;\n}\n#secondCircle:after {\n    transition:all 0.5s ease-in-out 0s;\n    content:'';\n    border:5px solid rgba(79, 223, 255,0.7);\n    position:absolute;\n    top:0px;\n    width:100%;\n    height:100%;\n    border-radius:360%;\n    opacity:0;\n}\n#holoLoader.active #secondCircle {\n    border:2px solid rgba(255, 255, 255,0.5);\n    transform:translateX(-180px) translateY(-120px);\n    transition:all 0.5s ease-in-out 0.4s;\n}\n#holoLoader.active #secondCircle:before {\n    opacity:1;\n    top: -55px;\n    left: -75px;\n    transition:all 0.5s ease-in-out 0.4s;\n    animation: rotation 5s linear 0s infinite;\n    transformation-origin:100% 100%;\n}\n@keyframes rotation {\n0% {\n      transform:rotateZ(0deg)\n}\n100% {\n      transform:rotateZ(360deg)\n}\n}\n#holoLoader.active #secondCircle:after {\n    opacity:1;\n    transform: translateX(45px) translateY(35px);\n    transition:all 0.5s ease-in-out 0.4s;\n}\n#thirdCircle {\n    position:absolute;\n    top:0px;\n    width:70%;\n    height:70%;\n    margin:15%;\n    border:0px solid white;\n    opacity:0;\n    transition:all 0.5s ease-in-out 0s;\n}\n#holoLoader.active #thirdCircle:before {\n    content:'';\n    display:block;\n    width:100%;\n    height:100%;\n    position:absolute;\n}\n#holoLoader.active #thirdCircle:after {\n    content:'';\n    position:absolute;\n    display:block;\n    border-radius:180%;\n    width:100%;\n    height:100%;\n}\n#holoLoader.active #thirdCircle {\n    border:5px solid white;\n    opacity:1;\n    transform: translateX(-520px) translateY(-330px);\n    transition:all 0.5s ease-in-out 0.4s;\n}\n#fourthCircle {\n    position:absolute;\n    top:0px;\n    width:60%;\n    height:60%;\n    margin:20%;\n}\n#holoLoader.active #fourthCircle {\n    transform: translateX(-810px) translateY(-540px);\n    transition:all 0.5s ease-in-out 0.4s;\n}\n#fifthCircle {\n    position:absolute;\n    top:0px;\n    width:50%;\n    height:50%;\n    margin:25%;\n    animation: stutterMovement 5s infinite linear;\n}\n#holoLoader.active #fifthCircle {\n    transform: translateX(-600px) translateY(-400px);\n    transition:all 0.5s ease-in-out 0.4s;\n}\n#sixthCircle {\n    position:absolute;\n    top:0px;\n    width:40%;\n    height:40%;\n    margin:30%;\n    border:1px dashed var(--main-orange-color);\n    border-radius:180%;\n}\n#holoLoader.active #sixthCircle {\n    border:3px solid var(--main-white-color);\n    transition:all 0.5s ease-in-out 0.4s;\n}\n#holoLoader.active #sixthCircle:before {\n    position:absolute;\n    width:40%;\n    height:40%;\n    margin:30%;\n    top:-5px;\n    left:-5px;\n    border:1px dashed var(--main-white-color);\n    border-radius:180%;\n    transition: all 0.5s ease-in-out 0s;\n    animation: bubbleEffect 4s infinite linear;\n    box-shadow: 0px 0px 0px rgba(255,255,255,0);\n}\n#sixthCircle:before {\n    content:'';\n    position:absolute;\n    border-radius:180%;\n    width:20%;\n   \tdisplay: block;\n    height:20%;\n    margin:40%;\n    top: -5px;\n\t  left: -5px;\n    border:1px solid var(--main-white-color);\n    box-shadow: 0px 0px 5px 2px rgba(214,107,24,1), inset 0 0px 5px rgba(214,107,24,1);\n    transition:all 0.5s ease-in-out 0.4s;\n    animation: rotationY 4s infinite linear;\n}\n#holoLoader.active #sixthCircle:after {\n    position:absolute;\n    width:40%;\n    height:40%;\n    margin:30%;\n    top:-5px;\n    left:-5px;\n    border:1px dashed var(--main-white-color);\n    border-radius:180%;\n    transition: all 0.5s ease-in-out 0s;\n    animation: bubbleEffect 4s infinite linear;\n    box-shadow: 0px 0px 0px rgba(255,255,255,0);\n}\n#sixthCircle:after {\n    content:'';\n    position:absolute;\n    display: block;\n    width:20%;\n    height:20%;\n    border-radius:180%;\n    margin:40%;\n    top: -5px;\n\t  left: -5px;\n    box-shadow: 0px 0px 5px 2px var(--main-orange-color), inset 0 0px 5px var(--main-orange-color);\n    border:1px solid var(--main-white-color);\n    transition:all 0.5s ease-in-out 0.4s;\n    animation: rotationX 8s infinite linear;\n}\n@keyframes rotationX {\n0% {\n      transform:rotateX(0deg) rotateY(0deg) scale(1);\n}\n100% {\n      transform:rotateX(360deg) rotateY(-360deg) scale(1);\n}\n}\n@keyframes rotationY {\n0% {\n      transform:rotateY(0deg) rotateX(0deg) scale(1)\n}\n100% {\n      transform:rotateY(360deg) rotateX(360deg) scale(1)\n}\n}\n@keyframes bubbleEffect {\n0% {\n      animation-timing-function: linear;\n      transform:scale(1);\n}\n25% {\n      animation-timing-function: linear;\n      opacity:1;\n      transform:scale(1.2);\n}\n50% {\n      animation-timing-function: linear;\n      opacity:0.5;\n      transform:scale(1);\n}\n75% {\n      animation-timing-function: linear;\n      opacity:0.5;\n      transform:scale(0.8);\n}\n100%{\n      animation-timing-function: linear;\n      opacity:1;\n      transform:scale(1);\n}\n}\n#shootingParticles {\n    opacity:0;\n    width: 470px;\n    height: 200px;\n    z-index:1;\n    position: absolute;\n    top: calc(50vh - 168px);\n\t  left: calc(50vw - 460px);\n    transform: rotateZ(18deg);\n    transition:all 0.5s linear 0.5s;\n}\n#shootingParticles.active {\n     transition:all 0.5s linear 1s;\n     opacity:1;\n}\n", map: {"version":3,"sources":["/tmp/codepen/vuejs/src/pen.vue"],"names":[],"mappings":";AAgbA;EACA,0BAAA;EACA,2BAAA;EACA,4BAAA;AACA;AACA;IACA,WAAA;IACA,YAAA;IACA,QAAA;IACA,SAAA;IACA,eAAA;IACA,kHAAA;AACA;AACA;IACA,kBAAA;IACA,SAAA;IACA,uBAAA;IACA,YAAA;IACA,qDAAA;IACA,yBAAA;IACA,YAAA;IACA,WAAA;IACA,6BAAA;IACA,uBAAA;IACA,YAAA;IACA,uBAAA;AACA;AACA;IACA,UAAA;IACA,WAAA;IACA,mBAAA;AACA;AACA;AACA,OAAA,WAAA,CAAA;AACA,OAAA,SAAA,CAAA;AACA,OAAA,WAAA,CAAA;AACA;AAEA;AACA,OAAA;AAAA;AACA,KAAA;AAAA;AACA;AACA;AACA,OAAA;AAAA;AACA,KAAA;AAAA;AACA;AAEA;IACA,6BAAA;IACA,sBAAA;IACA,sBAAA;IACA,WAAA;IACA,mBAAA;IACA,oBAAA;IACA,kBAAA;IACA,mCAAA;IACA,yBAAA;AAEA;AAEA;IACA,kDAAA;IACA,sBAAA;IACA,UAAA;IACA,wCAAA;IACA,iBAAA;IACA,sBAAA;IACA,mBAAA;IACA,WAAA;AACA;AAEA;IACA,WAAA;IACA,kDAAA;IACA,UAAA;IACA,kBAAA;IACA,UAAA;GACA,YAAA;IACA,mBAAA;IACA,WAAA;IACA,cAAA;IACA,wCAAA;AACA;AACA;IACA,WAAA;IACA,kDAAA;IACA,UAAA;IACA,kBAAA;IACA,WAAA;GACA,YAAA;IACA,mBAAA;IACA,WAAA;IACA,cAAA;IACA,wCAAA;AACA;AACA;IACA,sCAAA;AACA;AACA;IACA,wCAAA;AACA;AACA;IACA,wCAAA;AACA;AAEA;AACA;KACA,kDAAA;AACA;AACA;KACA,kDAAA;AACA;AACA;KACA,kDAAA;AACA;AACA;KACA,kDAAA;AACA;AACA;KACA,kDAAA;AACA;AACA;KACA,kDAAA;AACA;AACA;KACA,kDAAA;AACA;AACA;AAEA;IACA,SAAA;IACA,kDAAA;IACA,iBAAA;IACA,iBAAA;IACA,oCAAA;IACA,WAAA;IACA,YAAA;IACA,WAAA;IACA,6BAAA;IACA,oCAAA;IACA,6EAAA;AAEA;AAEA;IACA,gHAAA;IACA,oDAAA;IACA,mBAAA;IACA,kCAAA;AACA;AAEA;IACA,2EAAA;IACA,+BAAA;AACA;AAEA;IACA,UAAA;IACA,WAAA;IACA;AACA;AACA;GACA,UAAA;GACA,WAAA;AACA;AACA;IACA,iBAAA;IACA,OAAA;IACA,SAAA;IACA,UAAA;IACA,SAAA;AACA;AAEA;AACA;MACA;AACA;AACA;MACA;AACA;AACA;MACA;AACA;AACA;MACA;AACA;AACA;MACA;AACA;AACA;MACA;AACA;AACA;MACA;AACA;AACA;MACA;AACA;AACA;MACA;AACA;AACA;MACA;AACA;AACA;AAEA;IACA,+CAAA;IACA,oCAAA;AACA;AACA;IACA,iBAAA;IACA,OAAA;IACA,SAAA;IACA,UAAA;IACA,UAAA;IACA,yCAAA;AACA;AAEA;IACA,kCAAA;IACA,UAAA;IACA,wCAAA;IACA,iBAAA;IACA,OAAA;IACA,UAAA;IACA,WAAA;IACA,QAAA;IACA,SAAA;IACA,kBAAA;IACA,SAAA;AACA;AACA;IACA,kCAAA;IACA,UAAA;IACA,uCAAA;IACA,iBAAA;IACA,OAAA;IACA,UAAA;IACA,WAAA;IACA,kBAAA;IACA,SAAA;AACA;AACA;IACA,wCAAA;IACA,+CAAA;IACA,oCAAA;AACA;AAEA;IACA,SAAA;IACA,UAAA;IACA,WAAA;IACA,oCAAA;IACA,yCAAA;IACA,+BAAA;AACA;AAEA;AACA;MACA;AACA;AACA;MACA;AACA;AACA;AACA;IACA,SAAA;IACA,4CAAA;IACA,oCAAA;AAEA;AACA;IACA,iBAAA;IACA,OAAA;IACA,SAAA;IACA,UAAA;IACA,UAAA;IACA,sBAAA;IACA,SAAA;IACA,kCAAA;AACA;AACA;IACA,UAAA;IACA,aAAA;IACA,UAAA;IACA,WAAA;IACA,iBAAA;AACA;AACA;IACA,UAAA;IACA,iBAAA;IACA,aAAA;IACA,kBAAA;IACA,UAAA;IACA,WAAA;AACA;AACA;IACA,sBAAA;IACA,SAAA;IACA,gDAAA;IACA,oCAAA;AACA;AACA;IACA,iBAAA;IACA,OAAA;IACA,SAAA;IACA,UAAA;IACA,UAAA;AACA;AACA;IACA,gDAAA;IACA,oCAAA;AACA;AACA;IACA,iBAAA;IACA,OAAA;IACA,SAAA;IACA,UAAA;IACA,UAAA;IACA,6CAAA;AACA;AACA;IACA,gDAAA;IACA,oCAAA;AACA;AACA;IACA,iBAAA;IACA,OAAA;IACA,SAAA;IACA,UAAA;IACA,UAAA;IACA,0CAAA;IACA,kBAAA;AACA;AACA;IACA,wCAAA;IACA,oCAAA;AACA;AAEA;IACA,iBAAA;IACA,SAAA;IACA,UAAA;IACA,UAAA;IACA,QAAA;IACA,SAAA;IACA,yCAAA;IACA,kBAAA;IACA,mCAAA;IACA,0CAAA;IACA,2CAAA;AACA;AACA;IACA,UAAA;IACA,iBAAA;IACA,kBAAA;IACA,SAAA;IACA,cAAA;IACA,UAAA;IACA,UAAA;IACA,SAAA;GACA,UAAA;IACA,wCAAA;IACA,kFAAA;IACA,oCAAA;IACA,uCAAA;AACA;AACA;IACA,iBAAA;IACA,SAAA;IACA,UAAA;IACA,UAAA;IACA,QAAA;IACA,SAAA;IACA,yCAAA;IACA,kBAAA;IACA,mCAAA;IACA,0CAAA;IACA,2CAAA;AACA;AACA;IACA,UAAA;IACA,iBAAA;IACA,cAAA;IACA,SAAA;IACA,UAAA;IACA,kBAAA;IACA,UAAA;IACA,SAAA;GACA,UAAA;IACA,8FAAA;IACA,wCAAA;IACA,oCAAA;IACA,uCAAA;AACA;AAEA;AACA;MACA,8CAAA;AACA;AACA;MACA,mDAAA;AACA;AACA;AAEA;AACA;MACA;AACA;AACA;MACA;AACA;AACA;AAEA;AACA;MACA,iCAAA;MACA,kBAAA;AACA;AACA;MACA,iCAAA;MACA,SAAA;MACA,oBAAA;AACA;AACA;MACA,iCAAA;MACA,WAAA;MACA,kBAAA;AACA;AACA;MACA,iCAAA;MACA,WAAA;MACA,oBAAA;AACA;AACA;MACA,iCAAA;MACA,SAAA;MACA,kBAAA;AACA;AACA;AAEA;IACA,SAAA;IACA,YAAA;IACA,aAAA;IACA,SAAA;IACA,kBAAA;IACA,uBAAA;GACA,wBAAA;IACA,yBAAA;IACA,+BAAA;AACA;AAEA;KACA,6BAAA;KACA,SAAA;AACA","file":"pen.vue","sourcesContent":["\n<template>\n  <div id=\"app\">\n   <div\n      v-for=\"(item, index) in clouds\"\n      class=\"cloud\"\n      :id=\"'cloud-' + index\"\n      :style=\"makeStarStyles(index)\"\n         ></div>\n    \n    <div id=\"holoLoader\" :class=\"displayMode ? 'active' : 'notActive'\">\n      <div class=\"holoLayer\" id=\"core\"><canvas id=\"coreCanvas\" /></div>\n      <div class=\"holoLayer\" id=\"firstCircle\">\n        <canvas width=\"450\" height=\"450\" id=\"secondCanvas\" />\n      </div>\n      <div class=\"holoLayer\" id=\"secondCircle\">\n        <div class=\"slider a\">\n        <div class=\"sliderPoint a\">\n          \n          </div>\n          </div>\n        </div>\n      <div class=\"holoLayer\" id=\"thirdCircle\"></div>\n     <div class=\"holoLayer\" id=\"fourthCircle\"></div>\n     <div class=\"holoLayer\" id=\"fifthCircle\">\n       <canvas id=\"firstCanvas\" />\n     </div>\n     <div class=\"holoLayer\" id=\"sixthCircle\"></div>\n    </div>\n   <canvas width=\"470\" height=\"200\" id=\"shootingParticles\" :class=\"displayMode ? 'active' : 'notActive'\"/>\n  </div>\n</template>\n\n<script>\nexport default {\n  data() {\n    return {\n      clouds: 50,\n      particles:300,\n      particleArray:[],\n      shootingParticles:100,\n      shootingParticlesArray:[],\n      ringNumber:8,\n      stylesArray:[],\n      ringArray:[],\n      instances: 4,\n      count:300,\n      countArray:[],\n      start:65,\n      then: Date.now(),\n      displayModeEngage:Date.now(),\n      displayMode:false,\n      angles:[[0,25,10,'rgba(255,255,255,1)'],\n              [50,76,10,'rgba(255,255,255,1)'],\n              [101,126,10,'rgba(255,255,255,1)'],\n              [152,177,10,'rgba(255,255,255,1)'],\n              [203,227,10,'rgba(255,255,255,1)'],\n              [258,279,10,'rgba(255,255,255,1)'],\n              [305,334,10,'rgba(255,255,255,1)'],\n             ],\n    };\n  },\n  methods: {\n    changeDisplay() {\n      this.displayMode = !this.displayMode\n      this.displayModeEngage = Date.now();\n      //console.log(\"changed display!\")\n    },\n    loop() {\n      let now = Date.now();\n      let delta = now - this.then;\n      this.update();\n      this.render();\n      this.then = now;\n      requestAnimationFrame(this.loop);\n    },\n    update() {\n      if(this.displayMode === false) {\n        this.start = this.start + 0.2;\n        this.start >= 100 ? (this.changeDisplay(), this.start = 100) : null;\n      }\n      else {\n        this.start = this.start - 0.4;\n        this.start <= 0 ? (this.changeDisplay(), this.start = 0) : null;\n      }\n      //console.log(this.start)\n      this.particleArray.forEach((item, index) => {\n        this.adjustLength(item);\n        this.moveParticle(item);\n      })\n      this.shootingParticlesArray.forEach((item, index) => {\n        this.moveShootingParticle(item)  \n      })\n      this.ringArray.forEach((item, index) => {\n        this.updateRings(item)  \n      })\n      this.countArray.forEach((item, index) => {\n        this.updateCount(item)  \n      })\n      //console.log(\"we updating!\")\n    },\n    render() {\n      let canvas1 = document.getElementById(\"coreCanvas\");\n      let canvas2 = document.getElementById(\"firstCanvas\");\n      let canvas3 = document.getElementById(\"secondCanvas\");\n      let canvas4 = document.getElementById(\"shootingParticles\")\n      let ctx = canvas1.getContext(\"2d\");\n      let ctx2 = canvas2.getContext(\"2d\");\n      let ctx3 = canvas3.getContext(\"2d\");\n      let ctx4 = canvas4.getContext(\"2d\");\n      ctx.globalCompositeOperation = 'screen'; //test */\n      ctx4.globalCompositeOperation = 'screen'; //test */\n      ctx.clearRect(0, 0, canvas1.width, canvas1.height);\n      this.particleArray.forEach((item, index) => {\n        this.renderParticle(item, ctx)\n      })\n      ctx2.clearRect(0, 0, canvas2.width, canvas2.height);\n      this.drawCircularPlate(this.angles, ctx2);\n      ctx3.clearRect(0, 0, canvas3.width, canvas3.height);\n      this.countArray.forEach((item, index) => {\n        this.drawCounter(item, ctx3)\n      })\n      this.drawShootTime(this.start, ctx3)\n      this.drawOuterRing(this.ringArray, ctx3);\n      ctx4.clearRect(0,0,canvas4.width, canvas4.height);\n      this.shootingParticlesArray.forEach((item, index) => {\n        this.renderShootingParticles(item, ctx4)\n      })\n      /* ctx.clearRect(0, 0, canvas.width, canvas.height);\n      ctx.globalCompositeOperation = 'lighten'; //test */\n      //console.log(\"we rendering!\")\n    },\n    createShootingParticles(number) {\n      for(let n=0;n<number;n++) {\n        let obj = {\n          x:470,\n          y:95 + (Math.random() * 12 - 6),\n          radius:Math.random() * 5 + 15,\n          speed:Math.random() * 7 + 1,\n          opacity:1,\n          delay:Math.floor(Math.random() * 1000),\n        }\n        this.shootingParticlesArray.push(obj);\n      }\n    },\n    drawCounterInitiation(number) {\n      for(let n=0; n<number; n++) {\n        let obj = {\n          number: n,\n          opacity:Math.random(),\n          reverse:true,\n          start: n * (360/number),\n          finish:(n + 1) * (360/number) ,\n          fill: \"transparent\",\n          shadow: \"rgba(255,255,255,0.5)\",\n          strokeStyle:\"255,255,255\",\n          lineWidth: Math.floor(Math.random() * 5 + 3)\n        }\n        this.countArray.push(obj)\n      }\n    },\n    drawShootTime(start, ctx) {\n      let finish = 360/100 * start - 90;\n      ctx.strokeStyle = \"rgba(255,255,255,\" + start/100 + \")\";\n      ctx.beginPath();\n      ctx.arc(450/2, 450/2, 185, -90 * (Math.PI / 180), finish * (Math.PI / 180));  \n      ctx.stroke();\n      ctx.closePath();\n      //X = Math.cos(angle*Math.PI/180) * length + startPointX\n      let calculateX = Math.cos((finish+5)*Math.PI/180) * 185 + (450/2)\n      //Y = Math.sin(angle*Math.PI/180) * length + startPointY    \n      let calculateY = Math.sin((finish+5)*Math.PI/180) * 185 + (450/2)\n      ctx.fillStyle = \"white\";\n      ctx.textAlign = \"center\";\n      ctx.font = \"10px Arial\";\n      ctx.fillText(start.toString().substring(0,2) + \"%\", calculateX, calculateY);\n    },\n    updateCount(item) {\n      if(item.reverse === true) {\n        item.opacity -= 0.01;\n        item.opacity < 0.1 ? item.reverse = false : null\n      }\n      if(item.reverse === false) {\n        item.opacity += 0.01;\n        item.opacity > 0.9 ? item.reverse = true : null\n      }\n    },\n    drawCounter(item, ctx) {\n        if(item.number % 2) {\n        ctx.beginPath();\n        ctx.strokeStyle = \"rgba(\" + item.strokeStyle + \",\" + item.opacity + \")\";\n        ctx.arc(450/2, 450/2, 215 + (item.lineWidth/2), item.start * (Math.PI / 180), item.finish * (Math.PI / 180));\n        ctx.fillStyle = item.fill;\n        ctx.fill();\n        ctx.shadowColor = item.shadow;\n        ctx.shadowBlur = 8;\n        ctx.lineWidth = item.lineWidth\n        ctx.strokeStyle = 1;\n        ctx.stroke();\n        ctx.closePath();\n      }\n    },\n    createCoreParticles(number) {\n      for(let n=0;n<number;n++) {\n        let angle = Math.floor(Math.random() * 360);\n        let ring = Math.floor(Math.random() * 25);\n        let length = 80 + Math.random() * 40;\n        let speed = Math.random() - 0.5;\n        speed > 0.3 ? speed = 0.3 : speed = speed;\n        let particle = {\n          x:250 + (length + ring * Math.cos(angle * (Math.PI / 180))),\n          y:250 + (length + ring * Math.sin(angle * (Math.PI / 180))),\n          radius:Math.random() * 2 + 2,\n          startRadius:Math.random() * 2 + 2,\n          length:length,\n          speed:speed,\n          usedLength:length,\n          grow:Math.random() > 0.5 ? true : false,\n          startAngle:angle,\n          number:n,\n          usedAngle:angle,\n          ring: ring,\n          color: Math.random() > 0.5 ? \"rgba(255, 255, 255,0.3)\" : \"rgba(214,107,24,0.3)\",\n          shadow:\"rgba(0, 0, 0,1)\",\n          number:n,\n        }\n        this.particleArray.push(particle);\n      }\n    },\n    makeStarStyles(cloud) {\n      if(document.getElementById(\"cloud-\" + cloud) === null) {\n      let radius = Math.floor(Math.random() * 230 + 130);\n      let x = \"top:\" + Math.floor(Math.random() * document.body.clientHeight - radius/2) + \"px\";\n      let y = \"left:\" + Math.floor(Math.random() * document.body.clientWidth - radius/2) + \"px\";\n      let animationTime = Math.floor(Math.random() * 10 + 5);\n      let animationDelay = Math.floor(Math.random() * 15);\n      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%)\";\n      let style = \"position:absolute;\" + x + \";\" + y + \";\" + \"height:\" + radius + \"px;\" + \"width:\" + radius + \"px;\" + \"border-radius:180px;\" + background + \";animation-duration: \" + animationTime + \"s;animation-delay:\" + animationDelay + \"s;\";\n        this.stylesArray.push(style)\n      //console.log(style)\n      return style;\n      }\n      else {\n        return this.stylesArray[cloud]\n      }\n    },\n    renderParticle(particle, ctx) {\n      var grd = ctx.createRadialGradient(particle.x, particle.y, 1, particle.x,   particle.y, particle.radius-particle.radius/10);\n      grd.addColorStop(0,particle.color);\n      grd.addColorStop(1,\"rgba(255,255,255,0)\");\n      ctx.fillStyle = grd;\n      ctx.beginPath();\n      ctx.arc(particle.x, particle.y, particle.radius, 0, 2 * Math.PI);\n      ctx.closePath();\n      ctx.fill();\n    },\n    renderShootingParticles(particle, ctx) {\n      if(particle.x < 470) {\n      ctx.fillStyle = \"rgba(255,255,255,\" + particle.opacity + \")\";\n      ctx.beginPath();\n      ctx.arc(particle.x, particle.y, particle.radius, 0, 2 * Math.PI);\n      ctx.closePath();\n      ctx.fill();\n      }\n    },\n    moveShootingParticle(item) {\n      if(this.displayMode === true && Date.now() > this.displayModeEngage + 1000) {\n        item.opacity = item.x/470;\n        item.x/470 * 10 > 0 ? item.radius = item.x/470 * 10 : item.radius = 0;\n        if(item.x > 0) {\n          if(Date.now() > this.displayModeEngage + 1000 + item.delay) {\n            item.x = item.x - item.speed\n          }\n        }\n        else {\n          item.x = 470\n        }\n      }\n      else if(this.displayMode === false && Date.now() < this.displayModeEngage + 1500) {\n          item.opacity = item.x/470;\n          item.x/470 * 10 > 0 ? item.radius = item.x/470 * 10 : item.radius = 0;\n          item.x = item.x - item.speed\n      }\n      else if(this.displayMode === false && Date.now() > this.displayModeEngage + 1500) {\n        item.x = 470;\n      }\n    },\n    createRings(rings, array) {\n      //console.logs\n      for(let i = 0; i < rings ; i ++) {\n        let distance = (360/rings)\n        let startAng = Math.floor(Math.random() * 360)\n        let endAng = startAng + Math.random() * 50 + 50;\n        //let distance = Math.floor(Math.random() * 50 + 50)\n        let distandeDrawn = (360/rings) /  100 * 90\n        let distanceTransparent = (360/rings) /  100 * 10\n        let obj = {\n           startAng: startAng * (Math.PI / 180),\n           endAng: endAng * (Math.PI / 180),\n           length: 120 + 7 * i,\n           shown:true,\n           moveDirection:Math.random() > 0.5 ? true : false,\n           moveDone:false,\n          }\n        array.push(obj);\n        console.log(obj)\n      }\n    },\n    updateRings(ring) {\n      if(ring.moveDone === false) {\n        ring.moveDirection ?\n         (ring.startAng -= 0.01, ring.endAng -= 0.01) : \n         (ring.startAng += 0.01, ring.endAng += 0.01);\n         Math.random() < 0.02 ? ring.moveDone = true : null;\n      }\n      else {\n        ring.moveDirection = !ring.moveDirection;       \n        ring.moveDone = false\n      }\n    },\n    drawOuterRing(points, ctx) {\n      points.forEach(item => {\n         if(item.shown === true) {\n           //console.log(item.startAng, item.endAng)\n            ctx.beginPath();\n            ctx.arc(450/2, 450/2, item.length, item.startAng, item.endAng, 0, 2 * Math.PI);\n            ctx.fillStyle = 'transparent'\n            ctx.fill();\n            ctx.shadowColor = 'rgba(255,255,255,1)';\n            ctx.shadowBlur = 15;\n            ctx.lineWidth = 5;\n            ctx.strokeStyle = \"rgba(255,255,255,1)\";\n            ctx.stroke();\n            ctx.closePath();\n         }\n      })\n    },\n    adjustLength(particle) {\n      //particle.number === 0 ? console.log(particle.grow) : null\n      if(particle.grow && !this.displayMode) {\n        particle.usedLength += Math.abs(particle.speed) / 2;\n        particle.usedLength > particle.length + 20 ? particle.grow = false : null;\n        particle.radius > particle.startRadius ? (particle.radius -= 0.5, particle.usedLength += particle.radius / 3) : null;\n      }\n      else if(!particle.grow && !this.displayMode) {\n        particle.usedLength -= Math.abs(particle.speed) / 2;\n        particle.usedLength < particle.length - 20 ? particle.grow = true : null;\n        particle.radius > particle.startRadius ? (particle.radius -= 1) : null;\n      }\n      else if(this.displayMode) {\n        !particle.grow ? particle.grow = true : null;\n        particle.usedLength > 0 ? particle.usedLength -= particle.radius / 10 : null;\n        particle.radius < 25 ? particle.radius += 1 : null;\n      }\n    },\n    moveParticle(particle) {\n      //Math.random() < 0.5 ? particle.usedLength++ : particle.usedLength--;\n      particle.usedAngle = particle.usedAngle + particle.speed;\n      particle.x = 250 + particle.usedLength * Math.cos(particle.usedAngle * (Math.PI / 180));\n      particle.y = 250 + particle.usedLength * Math.sin(particle.usedAngle * (Math.PI / 180));\n    },\n    drawCircularPlate(angles,ctx) {\n      angles.forEach((item) => {     \n        ctx.beginPath();\n        ctx.arc(450/2, 450/2, 150, item[0] * (Math.PI / 180), item[1] * (Math.PI / 180));\n        ctx.fillStyle = 'transparent'\n        ctx.fill();\n        ctx.shadowColor = item[3];\n        ctx.shadowBlur = 15;\n        ctx.lineWidth = item[2];\n        ctx.strokeStyle = item[3];\n        ctx.stroke();\n        ctx.closePath();\n      })\n        ctx.beginPath();\n        ctx.arc(450/2, 450/2, 138, 0, 2 * Math.PI);\n        ctx.fillStyle = 'transparent'\n        ctx.fill();\n        ctx.shadowColor = 'rgba(255,255,255,1)';\n        ctx.shadowBlur = 15;\n        ctx.lineWidth = 2;\n        ctx.strokeStyle = 'rgba(255,255,255,1)';\n        ctx.stroke();\n        ctx.closePath();\n      \n        ctx.beginPath();\n        ctx.arc(450/2, 450/2, 163, 0, 2 * Math.PI);\n        ctx.fillStyle = 'transparent'\n        ctx.fill();\n        ctx.shadowColor = 'rgba(255,255,255,1)';\n        ctx.shadowBlur = 15;\n        ctx.lineWidth = 2;\n        ctx.strokeStyle = 'rgba(255,255,255,1)';\n        ctx.stroke();\n        ctx.closePath();\n    }\n  },\n  mounted() {\n    this.drawCounterInitiation(this.count);\n    this.createCoreParticles(this.particles);\n    this.createShootingParticles(this.shootingParticles);\n    this.createRings(this.ringNumber,this.ringArray);\n    let canvas1 = document.getElementById(\"coreCanvas\");\n    canvas1.width = document.getElementById(\"core\").offsetWidth;\n    canvas1.height = document.getElementById(\"core\").offsetHeight;\n    let canvas2 = document.getElementById(\"firstCanvas\");\n    canvas2.width = document.getElementById(\"firstCircle\").offsetWidth;\n    canvas2.height = document.getElementById(\"firstCircle\").offsetHeight;\n    let ctx2 = canvas2.getContext(\"2d\");\n    this.drawCircularPlate(this.angles, ctx2);\n    let canvas3 = document.getElementById(\"secondCanvas\");\n    canvas2.width = document.getElementById(\"firstCircle\").offsetWidth;\n    canvas2.height = document.getElementById(\"firstCircle\").offsetHeight;\n    window.addEventListener(\"resize\", function(){\n    let canvas1 = document.getElementById(\"coreCanvas\");\n    canvas1.width = document.getElementById(\"core\").offsetWidth;\n    canvas1.height = document.getElementById(\"core\").offsetHeight;\n    let canvas2 = document.getElementById(\"firstCanvas\");\n    canvas2.width = document.getElementById(\"firstCircle\").offsetWidth;\n    canvas2.height = document.getElementById(\"firstCircle\").offsetHeight;\n    let canvas3 = document.getElementById(\"secondCanvas\");\n    canvas2.width = document.getElementById(\"firstCircle\").offsetWidth;\n    canvas2.height = document.getElementById(\"firstCircle\").offsetHeight;\n    }, true);\n    //Let's start this!\n    //we go!\n    this.loop();\n  }\n};\n</script>\n\n<style>\n  :root {\n  --main-blue-color: #13aeff;\n  --main-white-color: #ffffff;\n  --main-orange-color: #d66b18;\n}\n  body {\n    width:100vw;\n    height:100vh;\n    margin:0;\n    padding:0;\n    overflow:hidden;\n    background-image: radial-gradient( circle farthest-corner at 10% 20%,  rgba(28,38,47,1) 0%, rgba(37,47,57,1) 90% );\n  }\n  .testbtn {\n    position: absolute;\n    top: 20px;\n    left: calc(50vw - 25px);\n    height: 20px;\n    box-shadow: 0px 0px 15px 0px rgba(255, 255, 255, 0.5);\n    text-transform: uppercase;\n    height: 25px;\n    width: 70px;\n    background-color: transparent;\n    z-index: 10000000000000;\n    color: white;\n    border: 1px solid white;\n  }\n  .cloud {\n    z-index:-1;\n    opacity:0.5;\n    animation:cloudFade;\n  }\n @keyframes cloudFade {\n  0%    {opacity:0.5;}\n  50%   {opacity:0;}\n  100%  {opacity:0.5;}\n}\n  \n  @keyframes reverseRotate {\n  from { transform:rotate(0deg) } \n  to { transform:rotate(360deg) } \n}\n    @keyframes rotate {\n  from { transform:rotate(360deg) } \n  to { transform:rotate(0deg) } \n}\n  \n  #secondCircle .slider {\n    background-color: transparent;\n    width: calc(50% + 4px);\n    box-sizing: border-box;\n    height: 8px;\n    top:calc(50% - 4px);\n    left:calc(50% - 4px);\n    position: relative;\n    animation:rotate 8s infinite linear;\n    transform-origin: 4px 4px;\n\n  }\n  \n  #secondCircle .sliderPoint.a {\n    box-shadow: 0px 0px 3px 2px rgba(255,255,255,0.55);\n    left: calc(100% - 2px);\n    width: 4px;\n    background-color: rgba(255,255,255,0.55);\n    position:relative;\n    box-sizing: border-box;\n    border-radius: 100%;\n    height: 4px;\n  }\n  \n  #secondCircle .sliderPoint.a:before {\n    content: '';\n    box-shadow: 0px 0px 3px 2px rgba(255,255,255,0.55);\n    width: 4px;\n    position: relative;\n   \ttop: 183px;\n\t  left: -285px;\n    border-radius: 90px;\n    height: 4px;\n    display: block;\n    background-color: rgba(255,255,255,0.55);\n  }\n  #secondCircle .sliderPoint.a:after {\n    content: '';\n    box-shadow: 0px 0px 3px 2px rgba(255,255,255,0.55);\n    width: 4px;\n    position: relative;\n    top: -190px;\n\t  left: -270px;\n    border-radius: 90px;\n    height: 4px;\n    display: block;\n    background-color: rgba(255,255,255,0.55);\n  }\n  #holoLoader.active .sliderPoint.a:after {\n    animation:sparks 3s infinite linear 0s;\n  }\n  #holoLoader.active .sliderPoint.a:before {\n    animation:sparks 3s infinite linear 1.2s;\n  }\n  #holoLoader.active .sliderPoint.a {\n    animation:sparks 3s infinite linear 0.3s;\n  }\n  \n  @keyframes sparks {\n    0% {\n     box-shadow: 0px 0px 5px 3px rgba(255,255,255,0.75);\n    }\n    60% {\n     box-shadow: 0px 0px 5px 3px rgba(255,255,255,0.75); \n    }\n    61% {\n     box-shadow: 0px 0px 5px 8px rgba(255,255,255,0.75); \n    }\n    62% {\n     box-shadow: 0px 0px 5px 3px rgba(255,255,255,0.75); \n    }\n    84% {\n     box-shadow: 0px 0px 5px 3px rgba(255,255,255,0.75); \n    }\n    85% {\n     box-shadow: 0px 0px 5px 8px rgba(255,255,255,0.75); \n    }\n    86% {\n     box-shadow: 0px 0px 5px 3px rgba(255,255,255,0.75); \n    }\n  }\n  \n  #holoLoader {\n    z-index:1;\n    //box-shadow: 0px 0px 39px 0px rgba(148,255,241,1);\n    position:relative;\n    border-radius:50%;\n    background-color:rgba(255,255,255,0);\n    width:500px;\n    height:500px;\n    margin:auto;\n    margin-top:calc(50vh - 250px);\n    transition:all 0.5s ease-in-out 0.4s;\n    //transform: perspective(1000px) rotateX(30deg) rotateY(-50deg) rotateZ(0deg);\n\n  }\n  \n  .holoLayer {\n    //background: radial-gradient(circle, rgba(255,255,255,0) 0%, rgba(202,226,255,0) 65%, rgba(147,196,255,1) 100%);\n    //box-shadow: 0px 0px 39px 0px rgba(148,255,241,0.3);\n    border-radius:360px;\n    transition:all 0.5s ease-in-out 0s;\n  }\n  \n  #holoLoader.active {\n    transform: perspective(1000px) rotateX(30deg) rotateY(-50deg) rotateZ(0deg);\n    transition:all 0.5s ease-in-out;\n  }\n  \n  #core {\n    width:100%;\n    height:100%;\n    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%)\n  }\n  #coreCanvas, #firstCanvas, #secondCanvas {\n   width:100%;\n   height:100%;\n  }\n  #firstCircle {\n    position:absolute;\n    top:0px;\n    width:90%;\n    height:90%;\n    margin:5%;\n  }\n  \n  @keyframes stutterMovement {\n    0% {\n      transform:rotate(0deg)\n    }\n    10% {\n      transform:rotate(50deg)\n    }\n    30% {\n      transform:rotate(50deg)\n    }\n    40% {\n      transform:rotate(50deg)\n    }\n    45% {\n      transform:rotate(70deg)\n    }\n    60% {\n      transform:rotate(-20deg)\n    }\n    70% {\n      transform:rotate(0deg)\n    }\n    85% {\n      transform:rotate(20deg)\n    }\n    90% {\n      transform:rotate(0deg)\n    }\n    100% {\n      transform:rotate(0deg)\n    }\n  }\n  \n  #holoLoader.active #firstCircle {\n    transform: translateX(-130px) translateY(-80px);\n    transition:all 0.5s ease-in-out 0.4s;\n  }\n  #secondCircle {\n    position:absolute;\n    top:0px;\n    width:80%;\n    height:80%;\n    margin:10%;\n    border:1px solid var(--main-orange-color);\n  }\n \n  #secondCircle:before {\n    transition:all 0.5s ease-in-out 0s;\n    content:'';\n    border:7px dotted rgba(79, 223, 255,0.3);\n    position:absolute;\n    top:0px;\n    width:100%;\n    height:100%;\n    top: 0px;\n    left: 0px;\n    border-radius:360%;\n    opacity:0;\n  }\n  #secondCircle:after {\n    transition:all 0.5s ease-in-out 0s;\n    content:'';\n    border:5px solid rgba(79, 223, 255,0.7);\n    position:absolute;\n    top:0px;\n    width:100%;\n    height:100%;\n    border-radius:360%;\n    opacity:0;\n  }\n  #holoLoader.active #secondCircle {\n    border:2px solid rgba(255, 255, 255,0.5);\n    transform:translateX(-180px) translateY(-120px);\n    transition:all 0.5s ease-in-out 0.4s;\n  }\n  \n  #holoLoader.active #secondCircle:before {\n    opacity:1;\n    top: -55px;\n    left: -75px;\n    transition:all 0.5s ease-in-out 0.4s;\n    animation: rotation 5s linear 0s infinite;\n    transformation-origin:100% 100%;\n  }\n  \n  @keyframes rotation {\n    0% {\n      transform:rotateZ(0deg)\n    }\n    100% {\n      transform:rotateZ(360deg)\n    }\n  }\n  #holoLoader.active #secondCircle:after {\n    opacity:1;\n    transform: translateX(45px) translateY(35px);\n    transition:all 0.5s ease-in-out 0.4s;\n    \n  }\n  #thirdCircle {\n    position:absolute;\n    top:0px;\n    width:70%;\n    height:70%;\n    margin:15%;\n    border:0px solid white;\n    opacity:0;\n    transition:all 0.5s ease-in-out 0s;\n  }\n  #holoLoader.active #thirdCircle:before {\n    content:'';\n    display:block;\n    width:100%;\n    height:100%;\n    position:absolute;\n  }\n  #holoLoader.active #thirdCircle:after {\n    content:'';\n    position:absolute;\n    display:block;\n    border-radius:180%;\n    width:100%;\n    height:100%;\n  }\n  #holoLoader.active #thirdCircle {\n    border:5px solid white;\n    opacity:1;\n    transform: translateX(-520px) translateY(-330px);\n    transition:all 0.5s ease-in-out 0.4s;\n  }\n  #fourthCircle {\n    position:absolute;\n    top:0px;\n    width:60%;\n    height:60%;\n    margin:20%;\n  }\n   #holoLoader.active #fourthCircle {\n    transform: translateX(-810px) translateY(-540px);\n    transition:all 0.5s ease-in-out 0.4s;\n  }\n  #fifthCircle {\n    position:absolute;\n    top:0px;\n    width:50%;\n    height:50%;\n    margin:25%;\n    animation: stutterMovement 5s infinite linear;\n  }\n  #holoLoader.active #fifthCircle {\n    transform: translateX(-600px) translateY(-400px);\n    transition:all 0.5s ease-in-out 0.4s;\n  }\n  #sixthCircle {\n    position:absolute;\n    top:0px;\n    width:40%;\n    height:40%;\n    margin:30%;\n    border:1px dashed var(--main-orange-color);\n    border-radius:180%;\n  }\n  #holoLoader.active #sixthCircle {\n    border:3px solid var(--main-white-color);\n    transition:all 0.5s ease-in-out 0.4s;\n  }\n  \n  #holoLoader.active #sixthCircle:before {\n    position:absolute;\n    width:40%;\n    height:40%;\n    margin:30%;\n    top:-5px;\n    left:-5px;\n    border:1px dashed var(--main-white-color);\n    border-radius:180%;\n    transition: all 0.5s ease-in-out 0s;\n    animation: bubbleEffect 4s infinite linear;\n    box-shadow: 0px 0px 0px rgba(255,255,255,0);\n  }\n   #sixthCircle:before {\n    content:'';\n    position:absolute;\n    border-radius:180%;\n    width:20%;\n   \tdisplay: block;\n    height:20%;\n    margin:40%;\n    top: -5px;\n\t  left: -5px;\n    border:1px solid var(--main-white-color);\n    box-shadow: 0px 0px 5px 2px rgba(214,107,24,1), inset 0 0px 5px rgba(214,107,24,1);\n    transition:all 0.5s ease-in-out 0.4s;\n    animation: rotationY 4s infinite linear;\n  }\n  #holoLoader.active #sixthCircle:after {\n    position:absolute;\n    width:40%;\n    height:40%;\n    margin:30%;\n    top:-5px;\n    left:-5px;\n    border:1px dashed var(--main-white-color);\n    border-radius:180%;\n    transition: all 0.5s ease-in-out 0s;\n    animation: bubbleEffect 4s infinite linear;\n    box-shadow: 0px 0px 0px rgba(255,255,255,0);\n  }\n  #sixthCircle:after {\n    content:'';\n    position:absolute;\n    display: block;\n    width:20%;\n    height:20%;\n    border-radius:180%;\n    margin:40%;\n    top: -5px;\n\t  left: -5px;\n    box-shadow: 0px 0px 5px 2px var(--main-orange-color), inset 0 0px 5px var(--main-orange-color);\n    border:1px solid var(--main-white-color);\n    transition:all 0.5s ease-in-out 0.4s;\n    animation: rotationX 8s infinite linear;\n  }\n  \n  @keyframes rotationX {\n    0% {\n      transform:rotateX(0deg) rotateY(0deg) scale(1);\n    }\n    100% {\n      transform:rotateX(360deg) rotateY(-360deg) scale(1);\n    }\n  }\n  \n  @keyframes rotationY {\n     0% {\n      transform:rotateY(0deg) rotateX(0deg) scale(1)\n    }\n    100% {\n      transform:rotateY(360deg) rotateX(360deg) scale(1)\n    }\n  }\n  \n  @keyframes bubbleEffect {\n    0% {\n      animation-timing-function: linear;\n      transform:scale(1);\n    }\n    25% {\n      animation-timing-function: linear;\n      opacity:1;\n      transform:scale(1.2);\n    }\n    50% {\n      animation-timing-function: linear;\n      opacity:0.5;\n      transform:scale(1);\n    }\n    75% {\n      animation-timing-function: linear;\n      opacity:0.5;\n      transform:scale(0.8);\n    }\n    100%{\n      animation-timing-function: linear;\n      opacity:1;\n      transform:scale(1);\n    }\n  }\n  \n  #shootingParticles {\n    opacity:0;\n    width: 470px;\n    height: 200px;\n    z-index:1;\n    position: absolute;\n    top: calc(50vh - 168px);\n\t  left: calc(50vw - 460px);\n    transform: rotateZ(18deg);\n    transition:all 0.5s linear 0.5s;\n  }\n  \n  #shootingParticles.active {\n     transition:all 0.5s linear 1s;\n     opacity:1;\n  }\n</style>\n"]}, media: undefined });
    
      };
      /* scoped */
      const __vue_scope_id__ = undefined;
      /* module identifier */
      const __vue_module_identifier__ = undefined;
      /* functional template */
      const __vue_is_functional_template__ = false;
      /* style inject SSR */
      
      /* style inject shadow dom */
      
    
      
      const __vue_component__ = /*#__PURE__*/normalizeComponent(
        { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
        __vue_inject_styles__,
        __vue_script__,
        __vue_scope_id__,
        __vue_is_functional_template__,
        __vue_module_identifier__,
        false,
        createInjector,
        undefined,
        undefined
      );
    
    export default __vue_component__;

2.html

<!DOCTYPE html>
    <html lang="en" >
    <head>
      <meta charset="UTF-8">
      <title>炫酷感科技感旋转vuejs特效</title>
      
    
      <script src="vue.js"></script>
    </head>
    <body>
    
      <div id="app"></div>
    
      <script type="module">
        import CodePenVueComponent from "./script.js";
        new Vue(CodePenVueComponent).$mount('#app');
      </script>
    </body>
    </html>

[b0b0acd77c014750964e430c35bf701b.gif]: https://img-blog.csdnimg.cn/b0b0acd77c014750964e430c35bf701b.gif

发表评论取消回复

表情：

评论列表（有 0 条评论，184人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue 添加NProgress进度条插件

NProgress NProgress是页面跳转是出现在浏览器顶部的进度条。官网：[http://ricostacruz.com/nprogress][http_ri

悠悠/ 2024年04月07日 12:04/ 0 赞/ 92 阅读

相关基于Vue封装酷炫进度条插件

目录效果如下：源码： -------------------- 效果如下： ![b0b0acd77c014750964e430c35bf701b.gif][

Bertha 。/ 2023年09月27日 12:03/ 0 赞/ 185 阅读

相关 idea 炫酷插件

，今天介绍一下IDEA的一些炫酷的插件，IDEA强大的插件库，不仅能给我们带来一些开发的便捷，还能体现我们的与众不同。 0|11.插件的安装打开setting

骑猪看日落/ 2023年06月20日 14:59/ 0 赞/ 31 阅读

相关收集炫酷可视化插件

1、WEBGL WebGL (Web图形库) 是一种JavaScript API，用于在任何兼容的Web浏览器中呈现交互式3D和2D图形，而无需使用插件。WebGL通过引入

梦里梦外;/ 2022年02月17日 06:28/ 0 赞/ 378 阅读

相关各种 IntelliJ IDEA 酷炫插件推荐

今天介绍一下IDEA的一些炫酷的插件，IDEA强大的插件库，不仅能给我们带来一些开发的便捷，还能体现我们的与众不同。 1.插件的安装打开setting文件选择Plugin

迈不过友情╰/ 2022年01月30日 12:55/ 0 赞/ 356 阅读

相关 IDEA的一些炫酷的插件

转自： [https://blog.csdn.net/mathew\_leung/article/details/83275064][https_blog.csdn.net_m

冷不防/ 2022年01月22日 14:53/ 0 赞/ 322 阅读

相关各种 IntelliJ IDEA 酷炫插件推荐

转自： [http://www.iocoder.cn/Fight/IntelliJ-IDEA-cool-plugin-recommendations/?tdsourcetag

我就是我/ 2022年01月07日 12:11/ 0 赞/ 348 阅读

相关进度条插件

进度条插件一、NProgress 一、NProgress 使用 <link rel='sylesheet' href='nprogress.cs

╰半夏微凉°/ 2021年09月07日 06:12/ 0 赞/ 623 阅读

相关封装环形加载进度条（Vue插件版和原生js版）

1、效果预览 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9tYW9

电玩女神/ 2021年08月13日 11:04/ 0 赞/ 374 阅读

相关在vue中使用进度条插件nprogress

一，安装nprogress cnpm i -S nprogress 二，在router/index.js中引入 import NProgress

- 日理万妓/ 2021年07月25日 11:18/ 0 赞/ 1029 阅读