{"version":3,"sources":["webpack:///./src/views/components/vuesax/loading/Loading.vue","webpack:///./src/views/components/vuesax/loading/LoadingDefault.vue","webpack:///src/views/components/vuesax/loading/LoadingDefault.vue","webpack:///./src/views/components/vuesax/loading/LoadingDefault.vue?4ae7","webpack:///./src/views/components/vuesax/loading/LoadingDefault.vue?40a1","webpack:///./src/views/components/vuesax/loading/LoadingType.vue","webpack:///src/views/components/vuesax/loading/LoadingType.vue","webpack:///./src/views/components/vuesax/loading/LoadingType.vue?b7f3","webpack:///./src/views/components/vuesax/loading/LoadingType.vue?e987","webpack:///./src/views/components/vuesax/loading/LoadingColor.vue","webpack:///src/views/components/vuesax/loading/LoadingColor.vue","webpack:///./src/views/components/vuesax/loading/LoadingColor.vue?a3f1","webpack:///./src/views/components/vuesax/loading/LoadingColor.vue?9d12","webpack:///./src/views/components/vuesax/loading/LoadingBackground.vue","webpack:///src/views/components/vuesax/loading/LoadingBackground.vue","webpack:///./src/views/components/vuesax/loading/LoadingBackground.vue?72c4","webpack:///./src/views/components/vuesax/loading/LoadingBackground.vue?2ce9","webpack:///./src/views/components/vuesax/loading/LoadingContained.vue","webpack:///src/views/components/vuesax/loading/LoadingContained.vue","webpack:///./src/views/components/vuesax/loading/LoadingContained.vue?af94","webpack:///./src/views/components/vuesax/loading/LoadingContained.vue?0c32","webpack:///src/views/components/vuesax/loading/Loading.vue","webpack:///./src/views/components/vuesax/loading/Loading.vue?199a","webpack:///./src/views/components/vuesax/loading/Loading.vue?4dab","webpack:///./src/views/components/vuesax/loading/Loading.vue?8d03"],"names":["render","_vm","this","_c","_self","attrs","staticRenderFns","_v","staticClass","on","openLoading","slot","methods","_this","$vs","loading","setTimeout","close","component","_l","types","type","key","class","activeLoading","concat","$event","data","mounted","forEach","container","text","_this2","directives","name","rawName","value","colorLoading","expression","domProps","target","composing","openLoadingColor","color","backgroundLoading","openLoadingBackground","background","ref","openLoadingContained","openLoadingInDiv","scale","components","LoadingDefault","LoadingType","LoadingColor","LoadingBackground","LoadingContained"],"mappings":"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","file":"js/chunk-f75e4a8a.0b9c80b5.js","sourcesContent":["var render = function render(){var _vm=this,_c=_vm._self._c;return _c('div',{attrs:{\"id\":\"loading-demo\"}},[_c('loading-default'),_c('loading-type'),_c('loading-color'),_c('loading-background'),_c('loading-contained')],1)\n}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","var render = function render(){var _vm=this,_c=_vm._self._c;return _c('vx-card',{attrs:{\"title\":\"Default\",\"code-toggler\":\"\"}},[_c('p',[_vm._v(\"To add a loading in any part of your application we have the global function \"),_c('code',[_vm._v(\"$vs.loading()\")]),_vm._v(\", and then when you want to remove it we have \"),_c('code',[_vm._v(\"$vs.loading.close()\")])]),_c('vs-alert',{staticClass:\"mt-5\",attrs:{\"color\":\"primary\",\"icon\":\"new_releases\",\"active\":\"true\"}},[_c('p',[_vm._v(\"For the examples, the request or the delay is simulated with \"),_c('code',[_vm._v(\"setTimeout\")])])]),_c('div',{staticClass:\"mt-5\"},[_c('vs-button',{attrs:{\"type\":\"filled\",\"color\":\"primary\"},on:{\"click\":_vm.openLoading}},[_vm._v(\"Loading Default\")])],1),_c('template',{slot:\"codeContainer\"},[_vm._v(\" <template> <div class=\\\"demo-alignment\\\"> <vs-button @click=\\\"openLoading\\\" type=\\\"filled\\\" color=\\\"primary\\\">Loading Default</vs-button> </div> </template> <script> export default { methods:{ openLoading(){ this.$vs.loading() setTimeout( ()=> { this.$vs.loading.close() }, 2000); }, } } </script> \")])],2)\n}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<!-- =========================================================================================\r\n    File Name: LoadingDefault.vue\r\n    Description: Add default loading to your application\r\n    ----------------------------------------------------------------------------------------\r\n    Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template\r\n      Author: Miguel Arenas\r\n    Author URL: http://github.com/mxaxaxbx\r\n========================================================================================== -->\r\n\r\n\r\n<template>\r\n    <vx-card title=\"Default\" code-toggler>\r\n\r\n        <p>To add a loading in any part of your application we have the global function <code>$vs.loading()</code>, and then when you want to remove it we have <code>$vs.loading.close()</code></p>\r\n\r\n        <vs-alert color=\"primary\" icon=\"new_releases\" active=\"true\" class=\"mt-5\">\r\n            <p>For the examples, the request or the delay is simulated with <code>setTimeout</code></p>\r\n        </vs-alert>\r\n\r\n        <div class=\"mt-5\">\r\n            <vs-button @click=\"openLoading\" type=\"filled\" color=\"primary\">Loading Default</vs-button>\r\n        </div>\r\n\r\n        <template slot=\"codeContainer\">\r\n&lt;template&gt;\r\n  &lt;div class=&quot;demo-alignment&quot;&gt;\r\n    &lt;vs-button @click=&quot;openLoading&quot; type=&quot;filled&quot; color=&quot;primary&quot;&gt;Loading Default&lt;/vs-button&gt;\r\n  &lt;/div&gt;\r\n&lt;/template&gt;\r\n\r\n&lt;script&gt;\r\nexport default {\r\n  methods:{\r\n    openLoading(){\r\n      this.$vs.loading()\r\n      setTimeout( ()=&gt; {\r\n        this.$vs.loading.close()\r\n      }, 2000);\r\n    },\r\n  }\r\n}\r\n&lt;/script&gt;\r\n        </template>\r\n\r\n    </vx-card>\r\n</template>\r\n\r\n<script>\r\nexport default {\r\n    methods: {\r\n        openLoading() {\r\n            this.$vs.loading();\r\n            setTimeout(() => {\r\n                this.$vs.loading.close()\r\n            }, 2000);\r\n        },\r\n    }\r\n}\r\n</script>\r\n","import mod from \"-!../../../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../../../node_modules/thread-loader/dist/cjs.js!../../../../../node_modules/babel-loader/lib/index.js!../../../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../../../node_modules/@vue/cli-service/node_modules/vue-loader/lib/index.js??vue-loader-options!./LoadingDefault.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../../../node_modules/thread-loader/dist/cjs.js!../../../../../node_modules/babel-loader/lib/index.js!../../../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../../../node_modules/@vue/cli-service/node_modules/vue-loader/lib/index.js??vue-loader-options!./LoadingDefault.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./LoadingDefault.vue?vue&type=template&id=085231ea&\"\nimport script from \"./LoadingDefault.vue?vue&type=script&lang=js&\"\nexport * from \"./LoadingDefault.vue?vue&type=script&lang=js&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../../../node_modules/@vue/cli-service/node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  null,\n  null\n  \n)\n\nexport default component.exports","var render = function render(){var _vm=this,_c=_vm._self._c;return _c('vx-card',{attrs:{\"title\":\"Type\",\"code-toggler\":\"\"}},[_c('p',[_vm._v(\"You can change the type of animation with the type property and the animations so far are:\")]),_c('div',{staticClass:\"demo-alignment\"},[_c('div',{staticClass:\"fill-row-loading\"},_vm._l((_vm.types),function(type){return _c('div',{key:type,staticClass:\"vs-con-loading__container loading-example\",class:{'activeLoading':_vm.activeLoading},attrs:{\"id\":[`loading-${type}`]},on:{\"click\":function($event){return _vm.openLoading(type)}}})}),0)]),_c('template',{slot:\"codeContainer\"},[_vm._v(\" <template lang=\\\"html\\\"> <div class=\\\"demo-alignment\\\"> <div class=\\\"fill-row-loading\\\"> <div :class=\\\"{'activeLoading':activeLoading}\\\" @click=\\\"openLoading(type)\\\" v-for=\\\"type in types\\\" :id=\\\"[`loading-${type}`]\\\" class=\\\"vs-con-loading__container loading-example\\\"> </div> </div> </div> </template> <script> export default { data:()=>({ types:[ 'default', 'point', 'radius', 'corners', 'border', 'sound', 'material', ], activeLoading:false, }), mounted(){ this.types.forEach((type)=>{ this.$vs.loading({ container: `#loading-${type}`, type, text:type }) }) }, methods:{ openLoading(type){ this.activeLoading = true this.$vs.loading({ type:type, }) setTimeout( ()=> { this.activeLoading = false this.$vs.loading.close() }, 3000); }, } } </script> <style lang=\\\"scss\\\"> .fill-row-loading { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; .loading-example { width: 120px; float: left; height: 120px; box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.05); border-radius: 10px; margin: 8px; transition: all 0.3s ease; cursor: pointer; &:hover { box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.05); transform: translate(0, 4px); } h4 { z-index: 40000; position: relative; text-align: center; padding: 10px; } &.activeLoading { opacity: 0 !important; transform: scale(0.5); } } } </style> \")])],2)\n}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<!-- =========================================================================================\r\n\tFile Name: LoadingType.vue\r\n\tDescription: Change the type of the animation\r\n\t----------------------------------------------------------------------------------------\r\n\tItem Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template\r\n\tAuthor: Miguel Arenas\r\n\tAuthor URL: http://github.com/mxaxaxbx\r\n========================================================================================== -->\r\n\r\n\r\n<template>\r\n\t<vx-card title=\"Type\" code-toggler>\r\n\r\n\t\t<p>You can change the type of animation with the type property and the animations so far are:</p>\r\n\r\n\t\t<div class=\"demo-alignment\">\r\n\r\n\t\t\t<div class=\"fill-row-loading\">\r\n\t\t\t\t<div\r\n\t\t\t\t\t:class=\"{'activeLoading':activeLoading}\"\r\n\t\t\t\t\t@click=\"openLoading(type)\"\r\n\t\t\t\t\tv-for=\"type in types\"\r\n\t\t\t\t\tv-bind:key=\"type\"\r\n\t\t\t\t\t:id=\"[`loading-${type}`]\"\r\n\t\t\t\t\tclass=\"vs-con-loading__container loading-example\">\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\r\n\t\t<template slot=\"codeContainer\">\r\n&lt;template lang=&quot;html&quot;&gt;\r\n  &lt;div class=&quot;demo-alignment&quot;&gt;\r\n      &lt;div class=&quot;fill-row-loading&quot;&gt;\r\n        &lt;div :class=&quot;{&apos;activeLoading&apos;:activeLoading}&quot; @click=&quot;openLoading(type)&quot; v-for=&quot;type in types&quot; :id=&quot;[&grave;loading-${type}&grave;]&quot; class=&quot;vs-con-loading__container loading-example&quot;&gt;\r\n        &lt;/div&gt;\r\n      &lt;/div&gt;\r\n  &lt;/div&gt;\r\n&lt;/template&gt;\r\n\r\n&lt;script&gt;\r\nexport default {\r\n  data:()=&gt;({\r\n    types:[\r\n      &apos;default&apos;,\r\n      &apos;point&apos;,\r\n      &apos;radius&apos;,\r\n      &apos;corners&apos;,\r\n      &apos;border&apos;,\r\n      &apos;sound&apos;,\r\n      &apos;material&apos;,\r\n    ],\r\n    activeLoading:false,\r\n  }),\r\n  mounted(){\r\n    this.types.forEach((type)=&gt;{\r\n      this.$vs.loading({\r\n        container: &grave;#loading-${type}&grave;,\r\n        type,\r\n        text:type\r\n      })\r\n    })\r\n  },\r\n  methods:{\r\n    openLoading(type){\r\n      this.activeLoading = true\r\n      this.$vs.loading({\r\n        type:type,\r\n      })\r\n      setTimeout( ()=&gt; {\r\n        this.activeLoading = false\r\n        this.$vs.loading.close()\r\n      }, 3000);\r\n    },\r\n  }\r\n}\r\n&lt;/script&gt;\r\n\r\n&lt;style lang=&quot;scss&quot;&gt;\r\n.fill-row-loading {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  flex-wrap: wrap;\r\n  .loading-example {\r\n    width: 120px;\r\n    float: left;\r\n    height: 120px;\r\n    box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.05);\r\n    border-radius: 10px;\r\n    margin: 8px;\r\n    transition: all 0.3s ease;\r\n    cursor: pointer;\r\n    &amp;:hover {\r\n      box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.05);\r\n      transform: translate(0, 4px);\r\n    }\r\n    h4 {\r\n      z-index: 40000;\r\n      position: relative;\r\n      text-align: center;\r\n      padding: 10px;\r\n    }\r\n    &amp;.activeLoading {\r\n      opacity: 0 !important;\r\n      transform: scale(0.5);\r\n    }\r\n  }\r\n}\r\n&lt;/style&gt;\r\n\t\t</template>\r\n\r\n\t</vx-card>\r\n</template>\r\n\r\n<script>\r\nexport default {\r\n  data:()=>({\r\n    types:[\r\n      'default',\r\n      'point',\r\n      'radius',\r\n      'corners',\r\n      'border',\r\n      'sound',\r\n      'material',\r\n    ],\r\n    activeLoading:false,\r\n  }),\r\n  mounted(){\r\n    this.types.forEach((type)=>{\r\n      this.$vs.loading({\r\n        container: `#loading-${type}`,\r\n        type,\r\n        text:type\r\n      })\r\n    })\r\n  },\r\n  methods:{\r\n    openLoading(type){\r\n      this.activeLoading = true\r\n      this.$vs.loading({\r\n        type:type,\r\n      })\r\n      setTimeout( ()=> {\r\n        this.activeLoading = false\r\n        this.$vs.loading.close()\r\n      }, 3000);\r\n    },\r\n  }\r\n}\r\n</script>\r\n","import mod from \"-!../../../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../../../node_modules/thread-loader/dist/cjs.js!../../../../../node_modules/babel-loader/lib/index.js!../../../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../../../node_modules/@vue/cli-service/node_modules/vue-loader/lib/index.js??vue-loader-options!./LoadingType.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../../../node_modules/thread-loader/dist/cjs.js!../../../../../node_modules/babel-loader/lib/index.js!../../../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../../../node_modules/@vue/cli-service/node_modules/vue-loader/lib/index.js??vue-loader-options!./LoadingType.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./LoadingType.vue?vue&type=template&id=0723526f&\"\nimport script from \"./LoadingType.vue?vue&type=script&lang=js&\"\nexport * from \"./LoadingType.vue?vue&type=script&lang=js&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../../../node_modules/@vue/cli-service/node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  null,\n  null\n  \n)\n\nexport default component.exports","var render = function render(){var _vm=this,_c=_vm._self._c;return _c('vx-card',{attrs:{\"title\":\"Color\",\"code-toggler\":\"\"}},[_c('p',[_vm._v(\"You can change the color of the loading with the property \"),_c('code',[_vm._v(\"color\")])]),_c('div',{staticClass:\"demo-alignment mt-3\"},[_c('input',{directives:[{name:\"model\",rawName:\"v-model\",value:(_vm.colorLoading),expression:\"colorLoading\"}],attrs:{\"type\":\"color\",\"name\":\"\",\"value\":\"\"},domProps:{\"value\":(_vm.colorLoading)},on:{\"input\":function($event){if($event.target.composing)return;_vm.colorLoading=$event.target.value}}}),_c('vs-button',{attrs:{\"type\":\"filled\",\"color\":_vm.colorLoading},on:{\"click\":_vm.openLoadingColor}},[_vm._v(\"Loading\")])],1),_c('template',{slot:\"codeContainer\"},[_vm._v(\" <template lang=\\\"html\\\"> <div class=\\\"demo-alignment\\\"> <input type=\\\"color\\\" v-model=\\\"colorLoading\\\" name=\\\"\\\" value=\\\"\\\"> <vs-button @click=\\\"openLoadingColor\\\" type=\\\"filled\\\" :color=\\\"colorLoading\\\">Loading</vs-button> </div> </template> <script> export default { data() { return { colorLoading: '#ff8000', } }, methods: { openLoadingColor() { this.$vs.loading({ color: this.colorLoading }) setTimeout(() => { this.$vs.loading.close() }, 2000); }, } } </script> \")])],2)\n}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<!-- =========================================================================================\r\n    File Name: LoadingColor.vue\r\n    Description: Change color of loading animation\r\n    ----------------------------------------------------------------------------------------\r\n    Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template\r\n      Author: Miguel Arenas\r\n    Author URL: http://github.com/mxaxaxbx\r\n========================================================================================== -->\r\n\r\n\r\n<template>\r\n    <vx-card title=\"Color\" code-toggler>\r\n\r\n        <p>You can change the color of the loading with the property <code>color</code></p>\r\n\r\n        <div class=\"demo-alignment mt-3\">\r\n            <input type=\"color\" v-model=\"colorLoading\" name=\"\" value=\"\">\r\n            <vs-button @click=\"openLoadingColor\" type=\"filled\" :color=\"colorLoading\">Loading</vs-button>\r\n        </div>\r\n\r\n        <template slot=\"codeContainer\">\r\n&lt;template lang=&quot;html&quot;&gt;\r\n  &lt;div class=&quot;demo-alignment&quot;&gt;\r\n\r\n    &lt;input type=&quot;color&quot; v-model=&quot;colorLoading&quot; name=&quot;&quot; value=&quot;&quot;&gt;\r\n    &lt;vs-button @click=&quot;openLoadingColor&quot; type=&quot;filled&quot; :color=&quot;colorLoading&quot;&gt;Loading&lt;/vs-button&gt;\r\n\r\n  &lt;/div&gt;\r\n&lt;/template&gt;\r\n\r\n&lt;script&gt;\r\nexport default {\r\n  data() {\r\n    return {\r\n      colorLoading: &apos;#ff8000&apos;,\r\n    }\r\n  },\r\n  methods: {\r\n    openLoadingColor() {\r\n      this.$vs.loading({ color: this.colorLoading })\r\n      setTimeout(() =&gt; {\r\n        this.$vs.loading.close()\r\n      }, 2000);\r\n    },\r\n  }\r\n}\r\n&lt;/script&gt;\r\n        </template>\r\n\r\n    </vx-card>\r\n</template>\r\n\r\n<script>\r\nexport default {\r\n    data() {\r\n        return {\r\n            colorLoading: '#ff8000',\r\n        }\r\n    },\r\n    methods: {\r\n        openLoadingColor() {\r\n            this.$vs.loading({ color: this.colorLoading })\r\n            setTimeout(() => {\r\n                this.$vs.loading.close()\r\n            }, 2000);\r\n        },\r\n    }\r\n}\r\n</script>\r\n","import mod from \"-!../../../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../../../node_modules/thread-loader/dist/cjs.js!../../../../../node_modules/babel-loader/lib/index.js!../../../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../../../node_modules/@vue/cli-service/node_modules/vue-loader/lib/index.js??vue-loader-options!./LoadingColor.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../../../node_modules/thread-loader/dist/cjs.js!../../../../../node_modules/babel-loader/lib/index.js!../../../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../../../node_modules/@vue/cli-service/node_modules/vue-loader/lib/index.js??vue-loader-options!./LoadingColor.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./LoadingColor.vue?vue&type=template&id=71ad8303&\"\nimport script from \"./LoadingColor.vue?vue&type=script&lang=js&\"\nexport * from \"./LoadingColor.vue?vue&type=script&lang=js&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../../../node_modules/@vue/cli-service/node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  null,\n  null\n  \n)\n\nexport default component.exports","var render = function render(){var _vm=this,_c=_vm._self._c;return _c('vx-card',{attrs:{\"title\":\"Background\",\"code-toggler\":\"\"}},[_c('p',[_vm._v(\"If you need to change the background of the loading, you can use the property \"),_c('code',[_vm._v(\"background\")])]),_c('vs-alert',{staticClass:\"mt-5\",attrs:{\"icon\":\"warning\",\"active\":\"true\",\"color\":\"warning\"}},[_c('span',[_vm._v(\"Only \"),_c('strong',[_vm._v(\"RGB\")]),_vm._v(\" and \"),_c('strong',[_vm._v(\"HEX\")]),_vm._v(\" colors are supported.\")])]),_c('div',{staticClass:\"demo-alignment mt-3\"},[_c('input',{directives:[{name:\"model\",rawName:\"v-model\",value:(_vm.backgroundLoading),expression:\"backgroundLoading\"}],attrs:{\"type\":\"color\",\"name\":\"\",\"value\":\"\"},domProps:{\"value\":(_vm.backgroundLoading)},on:{\"input\":function($event){if($event.target.composing)return;_vm.backgroundLoading=$event.target.value}}}),_c('vs-button',{attrs:{\"type\":\"gradient\",\"color\":\"success\"},on:{\"click\":_vm.openLoadingBackground}},[_vm._v(\"Success\")])],1),_c('template',{slot:\"codeContainer\"},[_vm._v(\" <template lang=\\\"html\\\"> <div class=\\\"demo-alignment\\\"> <input type=\\\"color\\\" v-model=\\\"backgroundLoading\\\" name=\\\"\\\" value=\\\"\\\"> <vs-button @click=\\\"openLoadingBackground\\\" type=\\\"gradient\\\" color=\\\"success\\\">Success</vs-button> </div> </template> <script> export default { data() { return { backgroundLoading: '#22c16b', } }, methods: { openLoadingBackground() { this.$vs.loading({ background: this.backgroundLoading, color: 'rgb(255, 255, 255)' }) setTimeout(() => { this.$vs.loading.close() }, 3000); }, } } </script> \")])],2)\n}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<!-- =========================================================================================\r\n    File Name: LoadingBackground.vue\r\n    Description: Change background color of loading animation\r\n    ----------------------------------------------------------------------------------------\r\n    Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template\r\n      Author: Miguel Arenas\r\n    Author URL: http://github.com/mxaxaxbx\r\n========================================================================================== -->\r\n\r\n\r\n<template>\r\n    <vx-card title=\"Background\" code-toggler>\r\n\r\n        <p>If you need to change the background of the loading, you can use the property <code>background</code></p>\r\n\r\n        <vs-alert icon=\"warning\" active=\"true\" color=\"warning\" class=\"mt-5\">\r\n            <span>Only <strong>RGB</strong> and <strong>HEX</strong> colors are supported.</span>\r\n        </vs-alert>\r\n\r\n        <div class=\"demo-alignment mt-3\">\r\n            <input type=\"color\" v-model=\"backgroundLoading\" name=\"\" value=\"\">\r\n            <vs-button @click=\"openLoadingBackground\" type=\"gradient\" color=\"success\">Success</vs-button>\r\n        </div>\r\n\r\n        <template slot=\"codeContainer\">\r\n&lt;template lang=&quot;html&quot;&gt;\r\n  &lt;div class=&quot;demo-alignment&quot;&gt;\r\n\r\n    &lt;input type=&quot;color&quot; v-model=&quot;backgroundLoading&quot; name=&quot;&quot; value=&quot;&quot;&gt;\r\n    &lt;vs-button @click=&quot;openLoadingBackground&quot; type=&quot;gradient&quot; color=&quot;success&quot;&gt;Success&lt;/vs-button&gt;\r\n\r\n  &lt;/div&gt;\r\n&lt;/template&gt;\r\n\r\n&lt;script&gt;\r\nexport default {\r\n  data() {\r\n    return {\r\n      backgroundLoading: &apos;#22c16b&apos;,\r\n    }\r\n  },\r\n  methods: {\r\n    openLoadingBackground() {\r\n      this.$vs.loading({ background: this.backgroundLoading, color: &apos;rgb(255, 255, 255)&apos; })\r\n      setTimeout(() =&gt; {\r\n        this.$vs.loading.close()\r\n      }, 3000);\r\n    },\r\n  }\r\n}\r\n&lt;/script&gt;\r\n        </template>\r\n\r\n    </vx-card>\r\n</template>\r\n\r\n<script>\r\nexport default {\r\n    data() {\r\n        return {\r\n            backgroundLoading: '#22c16b',\r\n        }\r\n    },\r\n    methods: {\r\n        openLoadingBackground() {\r\n            this.$vs.loading({ background: this.backgroundLoading, color: 'rgb(255, 255, 255)' })\r\n            setTimeout(() => {\r\n                this.$vs.loading.close()\r\n            }, 3000);\r\n        },\r\n    }\r\n}\r\n</script>\r\n","import mod from \"-!../../../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../../../node_modules/thread-loader/dist/cjs.js!../../../../../node_modules/babel-loader/lib/index.js!../../../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../../../node_modules/@vue/cli-service/node_modules/vue-loader/lib/index.js??vue-loader-options!./LoadingBackground.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../../../node_modules/thread-loader/dist/cjs.js!../../../../../node_modules/babel-loader/lib/index.js!../../../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../../../node_modules/@vue/cli-service/node_modules/vue-loader/lib/index.js??vue-loader-options!./LoadingBackground.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./LoadingBackground.vue?vue&type=template&id=28721a34&\"\nimport script from \"./LoadingBackground.vue?vue&type=script&lang=js&\"\nexport * from \"./LoadingBackground.vue?vue&type=script&lang=js&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../../../node_modules/@vue/cli-service/node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  null,\n  null\n  \n)\n\nexport default component.exports","var render = function render(){var _vm=this,_c=_vm._self._c;return _c('vx-card',{attrs:{\"title\":\"Contained\",\"code-toggler\":\"\"}},[_c('p',[_vm._v(\"To add a loading within a container, call the \"),_c('code',[_vm._v(\"$vs.loading()\")]),_vm._v(\" global function passing the \"),_c('code',[_vm._v(\"container\")]),_vm._v(\" and the \"),_c('code',[_vm._v(\"scale\")]),_vm._v(\" parameters. When you want to remove it we have \"),_c('code',[_vm._v(\"$vs.loading.close()\")]),_vm._v(\", passing the same \"),_c('code',[_vm._v(\"container\")]),_vm._v(\" parameter\")]),_c('vs-alert',{staticClass:\"mt-5\",attrs:{\"color\":\"primary\",\"icon\":\"new_releases\",\"active\":\"true\"}},[_c('p',[_vm._v(\"For the examples, the request or the delay is simulated with \"),_c('code',[_vm._v(\"setTimeout\")])])]),_c('div',{staticClass:\"demo-alignment mt-3\"},[_c('vs-button',{ref:\"loadableButton\",staticClass:\"vs-con-loading__container\",attrs:{\"id\":\"button-with-loading\",\"type\":\"relief\",\"vslor\":\"primary\"},on:{\"click\":_vm.openLoadingContained}},[_vm._v(\" Button with Loading \")]),_c('vs-button',{attrs:{\"type\":\"relief\",\"vslor\":\"primary\"},on:{\"click\":_vm.openLoadingInDiv}},[_vm._v(\"Div with Loading\")]),_c('div',{staticClass:\"contained-example-container\"},[_c('div',{staticClass:\"vs-con-loading__container\",attrs:{\"id\":\"div-with-loading\"}},[_vm._v(\"Load Me!\")])])],1),_c('template',{slot:\"codeContainer\"},[_vm._v(\" <template> <vs-button ref=\\\"loadableButton\\\" id=\\\"button-with-loading\\\" class=\\\"vs-con-loading__container\\\" @click=\\\"openLoadingContained\\\" type=\\\"relief\\\" vslor=\\\"primary\\\"> Button with Loading </vs-button> <vs-button @click=\\\"openLoadingInDiv\\\" type=\\\"relief\\\" vslor=\\\"primary\\\">Div with Loading</vs-button> <div class=\\\"contained-example-container\\\"> <div id=\\\"div-with-loading\\\" class=\\\"vs-con-loading__container\\\">Load Me!</div> </div> </template> <script> export default { data(){ return { backgroundLoading:'primary', colorLoading:'#fff', } }, methods:{ openLoadingContained(){ this.$vs.loading({ background: this.backgroundLoading, color: this.colorLoading, container: \\\"#button-with-loading\\\", scale: 0.45 }) setTimeout( ()=> { this.$vs.loading.close(\\\"#button-with-loading > .con-vs-loading\\\") }, 3000); }, openLoadingInDiv(){ this.$vs.loading({ container: '#div-with-loading', scale: 0.6 }) setTimeout( ()=> { this.$vs.loading.close('#div-with-loading > .con-vs-loading') }, 3000); }, } } </script> \")])],2)\n}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<!-- =========================================================================================\r\n\tFile Name: LoadingContained.vue\r\n\tDescription: Create loading animation inside container\r\n\t----------------------------------------------------------------------------------------\r\n\tItem Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template\r\n\tAuthor: Miguel Arenas\r\n\tAuthor URL: http://github.com/mxaxaxbx\r\n========================================================================================== -->\r\n\r\n\r\n<template>\r\n\t<vx-card title=\"Contained\" code-toggler>\r\n\r\n\t\t<p>To add a loading within a container, call the <code>$vs.loading()</code> global function passing the <code>container</code> and the <code>scale</code> parameters. When you want to remove it we have <code>$vs.loading.close()</code>, passing the same <code>container</code> parameter</p>\r\n\r\n\t\t<vs-alert color=\"primary\" icon=\"new_releases\" active=\"true\" class=\"mt-5\">\r\n\t\t\t<p>For the examples, the request or the delay is simulated with <code>setTimeout</code></p>\r\n\t\t</vs-alert>\r\n\r\n\t\t<div class=\"demo-alignment mt-3\">\r\n\r\n\t\t\t<vs-button ref=\"loadableButton\" id=\"button-with-loading\" class=\"vs-con-loading__container\" @click=\"openLoadingContained\" type=\"relief\" vslor=\"primary\">\r\n\t\t\t\tButton with Loading\r\n\t\t\t</vs-button>\r\n\t\t\t<vs-button @click=\"openLoadingInDiv\" type=\"relief\" vslor=\"primary\">Div with Loading</vs-button>\r\n\r\n\t\t\t<div class=\"contained-example-container\">\r\n\t\t\t\t<div id=\"div-with-loading\" class=\"vs-con-loading__container\">Load Me!</div>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\r\n\t\t<template slot=\"codeContainer\">\r\n&lt;template&gt;\r\n  &lt;vs-button ref=&quot;loadableButton&quot; id=&quot;button-with-loading&quot; class=&quot;vs-con-loading__container&quot; @click=&quot;openLoadingContained&quot; type=&quot;relief&quot; vslor=&quot;primary&quot;&gt;\r\n    Button with Loading\r\n  &lt;/vs-button&gt;\r\n  &lt;vs-button @click=&quot;openLoadingInDiv&quot; type=&quot;relief&quot; vslor=&quot;primary&quot;&gt;Div with Loading&lt;/vs-button&gt;\r\n\r\n  &lt;div class=&quot;contained-example-container&quot;&gt;\r\n    &lt;div id=&quot;div-with-loading&quot; class=&quot;vs-con-loading__container&quot;&gt;Load Me!&lt;/div&gt;\r\n  &lt;/div&gt;\r\n&lt;/template&gt;\r\n\r\n&lt;script&gt;\r\nexport default {\r\n  data(){\r\n    return {\r\n      backgroundLoading:'primary',\r\n      colorLoading:'#fff',\r\n    }\r\n  },\r\n  methods:{\r\n    openLoadingContained(){\r\n      this.$vs.loading({\r\n        background: this.backgroundLoading,\r\n        color: this.colorLoading,\r\n        container: &quot;#button-with-loading&quot;,\r\n        scale: 0.45\r\n      })\r\n      setTimeout( ()=&gt; {\r\n        this.$vs.loading.close(&quot;#button-with-loading &gt; .con-vs-loading&quot;)\r\n      }, 3000);\r\n    },\r\n    openLoadingInDiv(){\r\n      this.$vs.loading({\r\n        container: '#div-with-loading',\r\n        scale: 0.6\r\n      })\r\n      setTimeout( ()=&gt; {\r\n        this.$vs.loading.close('#div-with-loading &gt; .con-vs-loading')\r\n      }, 3000);\r\n    },\r\n  }\r\n}\r\n&lt;/script&gt;\r\n\t\t</template>\r\n\r\n\t</vx-card>\r\n</template>\r\n\r\n<script>\r\nexport default {\r\n  data(){\r\n    return {\r\n      backgroundLoading:'primary',\r\n      colorLoading:'#fff',\r\n    }\r\n  },\r\n  methods:{\r\n    openLoadingContained(){\r\n      this.$vs.loading({\r\n        background: this.backgroundLoading,\r\n        color: this.colorLoading,\r\n        container: \"#button-with-loading\",\r\n        scale: 0.45\r\n      })\r\n      setTimeout( ()=> {\r\n        this.$vs.loading.close(\"#button-with-loading > .con-vs-loading\")\r\n      }, 3000);\r\n    },\r\n    openLoadingInDiv(){\r\n      this.$vs.loading({\r\n        container: '#div-with-loading',\r\n        scale: 0.6\r\n      })\r\n      setTimeout( ()=> {\r\n        this.$vs.loading.close('#div-with-loading > .con-vs-loading')\r\n      }, 3000);\r\n    },\r\n  }\r\n}\r\n</script>\r\n","import mod from \"-!../../../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../../../node_modules/thread-loader/dist/cjs.js!../../../../../node_modules/babel-loader/lib/index.js!../../../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../../../node_modules/@vue/cli-service/node_modules/vue-loader/lib/index.js??vue-loader-options!./LoadingContained.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../../../node_modules/thread-loader/dist/cjs.js!../../../../../node_modules/babel-loader/lib/index.js!../../../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../../../node_modules/@vue/cli-service/node_modules/vue-loader/lib/index.js??vue-loader-options!./LoadingContained.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./LoadingContained.vue?vue&type=template&id=460b9980&\"\nimport script from \"./LoadingContained.vue?vue&type=script&lang=js&\"\nexport * from \"./LoadingContained.vue?vue&type=script&lang=js&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../../../node_modules/@vue/cli-service/node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  null,\n  null\n  \n)\n\nexport default component.exports","<!-- =========================================================================================\r\n    File Name: Loading.vue\r\n    Description: Loading - Imports all page portions\r\n    ----------------------------------------------------------------------------------------\r\n    Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template\r\n      Author: Miguel Arenas\r\n    Author URL: http://github.com/mxaxaxbx\r\n========================================================================================== -->\r\n\r\n\r\n<template>\r\n    <div id=\"loading-demo\">\r\n        <loading-default></loading-default>\r\n        <loading-type></loading-type>\r\n        <loading-color></loading-color>\r\n        <loading-background></loading-background>\r\n        <loading-contained></loading-contained>\r\n    </div>\r\n</template>\r\n\r\n<script>\r\nimport LoadingDefault from './LoadingDefault.vue'\r\nimport LoadingType from './LoadingType.vue'\r\nimport LoadingColor from './LoadingColor.vue'\r\nimport LoadingBackground from './LoadingBackground.vue'\r\nimport LoadingContained from './LoadingContained.vue'\r\n\r\nexport default{\r\n    components: {\r\n        LoadingDefault,\r\n        LoadingType,\r\n        LoadingColor,\r\n        LoadingBackground,\r\n        LoadingContained,\r\n    }\r\n}\r\n</script>\r\n\r\n<style lang=\"scss\">\r\n@import \"@/assets/scss/vuexy/pages/loading.scss\";\r\n</style>\r\n","import mod from \"-!../../../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../../../node_modules/thread-loader/dist/cjs.js!../../../../../node_modules/babel-loader/lib/index.js!../../../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../../../node_modules/@vue/cli-service/node_modules/vue-loader/lib/index.js??vue-loader-options!./Loading.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../../../node_modules/thread-loader/dist/cjs.js!../../../../../node_modules/babel-loader/lib/index.js!../../../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../../../node_modules/@vue/cli-service/node_modules/vue-loader/lib/index.js??vue-loader-options!./Loading.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./Loading.vue?vue&type=template&id=b702a1ac&\"\nimport script from \"./Loading.vue?vue&type=script&lang=js&\"\nexport * from \"./Loading.vue?vue&type=script&lang=js&\"\nimport style0 from \"./Loading.vue?vue&type=style&index=0&id=b702a1ac&prod&lang=scss&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../../../node_modules/@vue/cli-service/node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  null,\n  null\n  \n)\n\nexport default component.exports","export * from \"-!../../../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--9-oneOf-1-0!../../../../../node_modules/css-loader/dist/cjs.js??ref--9-oneOf-1-1!../../../../../node_modules/@vue/cli-service/node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../../../node_modules/postcss-loader/src/index.js??ref--9-oneOf-1-2!../../../../../node_modules/sass-loader/dist/cjs.js??ref--9-oneOf-1-3!../../../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../../../node_modules/@vue/cli-service/node_modules/vue-loader/lib/index.js??vue-loader-options!./Loading.vue?vue&type=style&index=0&id=b702a1ac&prod&lang=scss&\""],"sourceRoot":""}