Loading.js 1018 B

123456789101112131415161718192021222324252627282930313233343536373839404142
  1. Vue.component('Loading', {
  2. template: `
  3. <div id='loadingbar' class="spinner" v-if='isShowLoadingBar'>
  4. <div class="spinner-container container1">
  5. <div class="circle1"></div>
  6. <div class="circle2"></div>
  7. <div class="circle3"></div>
  8. <div class="circle4"></div>
  9. </div>
  10. <div class="spinner-container container2">
  11. <div class="circle1"></div>
  12. <div class="circle2"></div>
  13. <div class="circle3"></div>
  14. <div class="circle4"></div>
  15. </div>
  16. <div class="spinner-container container3">
  17. <div class="circle1"></div>
  18. <div class="circle2"></div>
  19. <div class="circle3"></div>
  20. <div class="circle4"></div>
  21. </div>
  22. </div>
  23. `,
  24. props: {
  25. isShow: {
  26. default: true
  27. }
  28. },
  29. data() {
  30. return {
  31. isShowLoadingBar: this.isShow,
  32. }
  33. },
  34. methods: {
  35. hide() {
  36. this.isShowLoadingBar = false
  37. },
  38. show() {
  39. this.isShowLoadingBar = true;
  40. }
  41. }
  42. })