Начало перехода от Element-UI на Quasar

client/components/Reader/ProgressPage/ProgressPage.vue

@@ -1,7 +1,21 @@
 <template>
     <div v-show="visible" class="main">
         <div class="center">
-            <el-progress type="circle" :width="100" :stroke-width="6" color="#0F9900" :percentage="percentage"></el-progress>
+            <!--el-progress type="circle" :width="100" :stroke-width="6" color="#0F9900" :percentage="percentage"></el-progress-->
+            <q-circular-progress
+                show-value
+                instant-feedback
+                font-size="14px"
+                :value="percentage"
+                size="100px"
+                :thickness="0.12"
+                color="green-7"
+                track-color="grey-4"
+                class="q-ma-md"
+            >
+              {{ percentage }}%
+            </q-circular-progress>
+
             <p class="text">{{ text }}</p>
         </div>
     </div>
@@ -84,7 +98,7 @@ class ProgressPage extends Vue {
     align-items: center;
 
     color: white;
-    height: 300px;
+    height: 250px;
 }
 
 .text {

client/main.js

@@ -3,6 +3,7 @@ import Vue from 'vue';
 import router from './router';
 import store from './store';
 import './element';
+import './quasar';
 
 import App from './components/App.vue';
 //Vue.config.productionTip = false;

client/quasar.js

@@ -0,0 +1,19 @@
+import Vue from 'vue';
+
+import 'quasar/dist/quasar.css';
+import Quasar, {
+    QColor,
+    QCircularProgress
+} from 'quasar';
+
+Vue.use(Quasar, {
+    config: {},
+    components: {
+        QColor,
+        QCircularProgress
+    },
+    directives: {
+    },
+    plugins: {
+    }
+});

package-lock.json

@@ -10411,6 +10411,11 @@
       "resolved": "https://registry.npmjs.org/qs/-/qs-6.7.0.tgz",
       "integrity": "sha512-VCdBRNFTX1fyE7Nb6FYoURo/SPe62QCaAyzJvUjwRaIsc+NePBEniHlvxFmmX56+HZphIGtV0XeCirBtpDrTyQ=="
     },
+    "quasar": {
+      "version": "1.6.1",
+      "resolved": "https://registry.npmjs.org/quasar/-/quasar-1.6.1.tgz",
+      "integrity": "sha512-0FHNK6vzozboFcnonwjFO8pvxUncPxXX+tcV8P1vi8hlzxgeKkYgKTkCb7rWDH/ip1T8nxjYsD0+2w4IkCiW0w=="
+    },
     "querystring": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/querystring/-/querystring-0.2.0.tgz",

package.json

@@ -74,6 +74,7 @@
     "node-stream-zip": "^1.8.2",
     "pako": "^1.0.10",
     "path-browserify": "^1.0.0",
+    "quasar": "^1.6.1",
     "safe-buffer": "^5.2.0",
     "sjcl": "^1.0.8",
     "sql-template-strings": "^2.2.2",