askbot-dragon 1.6.76-beta → 1.6.76

package/src/components/loadingProcess.vue

@@ -1,165 +1,165 @@
-<template>
-  <div id="loading-process">
-    <div class="bg-color"></div>
-    <ul class="display-container" >
-      <li class="note-display" :data-note="dataNodes">
-        <div class="circle">
-          <svg width="30" height="30" class="circle__svg" viewBox="0 0 90 90">
-            <circle cx="41" cy="41" r="38" class="circle__progress circle__progress--path"></circle>
-            <circle cx="41" cy="41" r="38" class="circle__progress circle__progress--fill"></circle>
-          </svg>
-        </div>
-      </li>
-    </ul>
-  </div>
-</template>
-
-<script>
-  const  transitionDuration = 1000
-  export default {
-    name: "loadingProcess",
-    data(){
-      return{
-        timer:null,
-        dataNodes:0
-      }
-    },
-    props:['dataNote','finished'],
-    methods:{
-      strokeTransition(display, note) {
-        let progress = display.querySelector('.circle__progress--fill');
-        let radius = progress.r.baseVal.value;
-        let circumference = 2 * Math.PI * radius;
-        let offset = circumference * (10 - note) / 10;
-        progress.style.setProperty('--initialStroke', circumference);
-        progress.style.setProperty('--transitionDuration', `${transitionDuration}ms`);
-
-        setTimeout(() => progress.style.strokeDashoffset = offset, 100);
-      },
-      increaseNumber(display, number, className) {
-        let element = display.querySelector(`.percent__${className}`),
-            decPoint = className === 'int' ? '' : '',
-            interval = transitionDuration / number,
-            counter = 0;
-        console.debug('element',element,counter,decPoint)
-        let increaseInterval = setInterval(() => {
-          if (counter === number) { window.clearInterval(increaseInterval); }
-/*
-          element.textContent = counter + decPoint;*/
-          counter++;
-        }, interval);
-      }
-    },
-    mounted() {
-      this.timer = setInterval(()=>{
-        const displays = document.querySelectorAll('.note-display');
-        displays.forEach(display => {
-          let note = parseFloat(display.dataset.note);
-          let [int, dec] = display.dataset.note.split('.');
-          [int, dec] = [Number(int), Number(dec)];
-          this.strokeTransition(display, note);
-          this.increaseNumber(display, this.dataNote, 'int');
-          /* this.increaseNumber(display, dec, 'dec');*/
-        })
-      },1000)
-    },
-    watch:{
-      dataNote:{
-        handler(val){
-          this.dataNodes = val
-          console.debug('this.dataNodes',val,this.dataNodes)
-        },
-        immediate:true,
-        deep:true
-      },
-      finished:{
-        handler(val){
-          if (val){
-            setTimeout(()=>{
-              clearInterval(this.timer)
-            },1000)
-          }
-        },
-        immediate:true
-      }
-    }
-  }
-</script>
-
-<style scoped lang="less">
-/*@import url('https://fonts.googleapis.com/css?family=Nixie+One|Raleway:200');*/
-#loading-process{
-  height: 100px;
-  width: 100px;
-  .bg-color{
-    background-color:#000000 ;
-    opacity: 0.4;
-    width: 100%;
-    height: 100%;
-  }
-  .display-container{
-    position: absolute;
-    top: calc(50% - 15px);
-    left: 10px;
-  }
-}
-* {
-  padding: 0;
-  margin: 0;
-  box-sizing: border-box;
-}
-/*
-body {
-  height: 100vh;
-  color: #fff;
-  display: flex;
-  background: #3E423A;
-  font-family: 'Nixie One', cursive;
-}
-*/
-
-.display-container {
-  margin: auto;
-  display: flex;
-  .note-display {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    margin: 0 25px;
-  }
-}
-.circle__progress {
-  fill: none;
-  stroke-width: 5;
-  stroke-opacity: 0.3;
-  stroke-linecap: round;
-}
-.note-display:nth-child(1) .circle__progress--fill{
-  stroke: #FFFFFF!important;
-  stroke-opacity: 1;
-}
-.circle__progress--path{
-    stroke: #EFEFEF!important;
-  stroke-opacity: 0.5;
-}
-.note-display:nth-child(1) .circle__progress { stroke: #AAFF00; }
-.note-display:nth-child(2) .circle__progress { stroke: #FF00AA; }
-.note-display:nth-child(3) .circle__progress { stroke: #AA00FF; }
-.note-display:nth-child(4) .circle__progress { stroke: #00AAFF; }
-.circle {
-  position: relative;
-}
-
-.percent {
-  width: 100%;
-  top: 50%;
-  left: 50%;
-  position: absolute;
-  font-weight: bold;
-  text-align: center;
-  /* line-height: 28px;*/
-  transform: translate(-50%, -50%);
-  font-size: 12px;
-}
-
+<template>
+  <div id="loading-process">
+    <div class="bg-color"></div>
+    <ul class="display-container" >
+      <li class="note-display" :data-note="dataNodes">
+        <div class="circle">
+          <svg width="30" height="30" class="circle__svg" viewBox="0 0 90 90">
+            <circle cx="41" cy="41" r="38" class="circle__progress circle__progress--path"></circle>
+            <circle cx="41" cy="41" r="38" class="circle__progress circle__progress--fill"></circle>
+          </svg>
+        </div>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+  const  transitionDuration = 1000
+  export default {
+    name: "loadingProcess",
+    data(){
+      return{
+        timer:null,
+        dataNodes:0
+      }
+    },
+    props:['dataNote','finished'],
+    methods:{
+      strokeTransition(display, note) {
+        let progress = display.querySelector('.circle__progress--fill');
+        let radius = progress.r.baseVal.value;
+        let circumference = 2 * Math.PI * radius;
+        let offset = circumference * (10 - note) / 10;
+        progress.style.setProperty('--initialStroke', circumference);
+        progress.style.setProperty('--transitionDuration', `${transitionDuration}ms`);
+
+        setTimeout(() => progress.style.strokeDashoffset = offset, 100);
+      },
+      increaseNumber(display, number, className) {
+        let element = display.querySelector(`.percent__${className}`),
+            decPoint = className === 'int' ? '' : '',
+            interval = transitionDuration / number,
+            counter = 0;
+        console.debug('element',element,counter,decPoint)
+        let increaseInterval = setInterval(() => {
+          if (counter === number) { window.clearInterval(increaseInterval); }
+/*
+          element.textContent = counter + decPoint;*/
+          counter++;
+        }, interval);
+      }
+    },
+    mounted() {
+      this.timer = setInterval(()=>{
+        const displays = document.querySelectorAll('.note-display');
+        displays.forEach(display => {
+          let note = parseFloat(display.dataset.note);
+          let [int, dec] = display.dataset.note.split('.');
+          [int, dec] = [Number(int), Number(dec)];
+          this.strokeTransition(display, note);
+          this.increaseNumber(display, this.dataNote, 'int');
+          /* this.increaseNumber(display, dec, 'dec');*/
+        })
+      },1000)
+    },
+    watch:{
+      dataNote:{
+        handler(val){
+          this.dataNodes = val
+          console.debug('this.dataNodes',val,this.dataNodes)
+        },
+        immediate:true,
+        deep:true
+      },
+      finished:{
+        handler(val){
+          if (val){
+            setTimeout(()=>{
+              clearInterval(this.timer)
+            },1000)
+          }
+        },
+        immediate:true
+      }
+    }
+  }
+</script>
+
+<style scoped lang="less">
+/*@import url('https://fonts.googleapis.com/css?family=Nixie+One|Raleway:200');*/
+#loading-process{
+  height: 100px;
+  width: 100px;
+  .bg-color{
+    background-color:#000000 ;
+    opacity: 0.4;
+    width: 100%;
+    height: 100%;
+  }
+  .display-container{
+    position: absolute;
+    top: calc(50% - 15px);
+    left: 10px;
+  }
+}
+* {
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+}
+/*
+body {
+  height: 100vh;
+  color: #fff;
+  display: flex;
+  background: #3E423A;
+  font-family: 'Nixie One', cursive;
+}
+*/
+
+.display-container {
+  margin: auto;
+  display: flex;
+  .note-display {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin: 0 25px;
+  }
+}
+.circle__progress {
+  fill: none;
+  stroke-width: 5;
+  stroke-opacity: 0.3;
+  stroke-linecap: round;
+}
+.note-display:nth-child(1) .circle__progress--fill{
+  stroke: #FFFFFF!important;
+  stroke-opacity: 1;
+}
+.circle__progress--path{
+    stroke: #EFEFEF!important;
+  stroke-opacity: 0.5;
+}
+.note-display:nth-child(1) .circle__progress { stroke: #AAFF00; }
+.note-display:nth-child(2) .circle__progress { stroke: #FF00AA; }
+.note-display:nth-child(3) .circle__progress { stroke: #AA00FF; }
+.note-display:nth-child(4) .circle__progress { stroke: #00AAFF; }
+.circle {
+  position: relative;
+}
+
+.percent {
+  width: 100%;
+  top: 50%;
+  left: 50%;
+  position: absolute;
+  font-weight: bold;
+  text-align: center;
+  /* line-height: 28px;*/
+  transform: translate(-50%, -50%);
+  font-size: 12px;
+}
+
 </style>