feat: change id and class name

jambonn · Jul 6, 2021 · 86d4c68 · 86d4c68
1 parent c290876
commit 86d4c68
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 12 deletions.
diff --git a/src/progressbar.js b/src/progressbar.js
@@ -84,14 +84,14 @@ const Progressbar = () => {
     return Progressbar.inc(Math.random() * 0.02);
   };
   Progressbar.render = (fromStart) => {
-    if (document.getElementById('vue-progressbar')) {
-      return document.getElementById('vue-progressbar');
+    if (document.getElementById('v-progressbar')) {
+      return document.getElementById('v-progressbar');
     }
 
     const progress = document.createElement('div');
-    progress.id = 'vue-progressbar';
+    progress.id = 'v-progressbar';
     progress.innerHTML =
-      '<div class="bar" role="bar"><div class="peg"></div></div><div class="spinner" role="spinner"><div class="spinner-icon"></div></div>';
+      '<div class="v-p-bar" role="bar"><div class="v-p-peg"></div></div><div class="v-p-spinner" role="spinner"><div class="v-p-spinner-icon"></div></div>';
 
     const bar = progress.querySelector('[role="bar"]');
     const perc = fromStart ? '-100' : toBarPerc(Progressbar.status || 0);
@@ -105,7 +105,7 @@ const Progressbar = () => {
     return progress;
   };
   Progressbar.remove = () => {
-    const progress = document.getElementById('vue-progressbar');
+    const progress = document.getElementById('v-progressbar');
     progress && removeElement(progress);
   };
 

diff --git a/src/progressbar.scss b/src/progressbar.scss
@@ -1,6 +1,6 @@
-[id='vue-progressbar'] {
+[id='v-progressbar'] {
   pointer-events: none;
-  .bar {
+  .v-p-bar {
     position: fixed;
     top: 0;
     left: 0;
@@ -9,7 +9,7 @@
     background: #29d;
     z-index: 1031;
   }
-  .peg {
+  .v-p-peg {
     display: block;
     position: absolute;
     right: 0;
@@ -19,26 +19,26 @@
     opacity: 1;
     transform: rotate(3deg) translate(0px, -4px);
   }
-  .spinner {
+  .v-p-spinner {
     display: block;
     position: fixed;
     top: 15px;
     right: 15px;
     z-index: 1031;
   }
-  .spinner-icon {
+  .v-p-spinner-icon {
     width: 18px;
     height: 18px;
     box-sizing: border-box;
     border: 2px solid transparent;
     border-top-color: #29d;
     border-left-color: #29d;
     border-radius: 50%;
-    animation: vue-progressbar-spinner .4s linear infinite;
+    animation: progressbarSpinner .4s linear infinite;
   }
 }
 
-@keyframes vue-progressbar-spinner {
+@keyframes progressbarSpinner {
   0%   { transform: rotate(0deg); }
   100% { transform: rotate(360deg); }
 }