cwg999/vue_basic_loading_bar.html

## vue_basic_loading_bar.html
Here is just one simple way of controlling a loading overlay element. In this case "app" could be a higher level component that implements "loadingbar".
The "app" component references the loading bar using `this.$refs` which is more of a global reference for app. There are various other methods by passing down "props" to the child component, emitting an "event" that the child listens to, etc.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

    <html>
      <head>
        <title>Loading Bar</title>

        <!-- Compiled and minified CSS -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

        <!-- Compiled and minified JavaScript -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
        <script type="text/javascript" src="https://vuejs.org/js/vue.js"></script>
      </head>
      <body>
        <div id="app">
          Click the loading bar or button!
          <LoadingBar ref="myLoadingBar">Loading Bar</LoadingBar>
          <button class="btn" @click="doMainAppLoadingClick">Load More</button>
        </div>
        <script type="text/javascript">
          var loadingbar = Vue.component("LoadingBar", {
            template:
              `<div :style="styl" @click="loadMore">
                  <div v-if="!hide" class="progress"><div class="determinate" :style="widthCalc()">
                  </div></div>
                  <slot></slot>
               </div>`,
            data: function(){
              return {
                styl:{
                  width: "50%",
                },
                percent:0,
                hide:false
              };
            },
            methods: {
              loadMore: function() {
                if(this.percent<100) this.percent+=25;
                if(this.percent>=100) this.hide=true;
              },
              widthCalc(){
                return 'width: '+this.percent+'%';
              }
            }
          });
          var vm = new Vue({
            el: "#app",
            components:{loadingbar:loadingbar},
            methods:{
              doMainAppLoadingClick: function(){
                this.$refs.myLoadingBar.loadMore();
              }
            }
          });


        </script>
      </body>
    </html>

<!-- end snippet -->
	Here is just one simple way of controlling a loading overlay element. In this case "app" could be a higher level component that implements "loadingbar".
	The "app" component references the loading bar using `this.$refs` which is more of a global reference for app. There are various other methods by passing down "props" to the child component, emitting an "event" that the child listens to, etc.

	<!-- begin snippet: js hide: false console: true babel: false -->

	<!-- language: lang-html -->

	<html>
	<head>
	<title>Loading Bar</title>

	<!-- Compiled and minified CSS -->
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

	<!-- Compiled and minified JavaScript -->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
	<script type="text/javascript" src="https://vuejs.org/js/vue.js"></script>
	</head>
	<body>
	<div id="app">
	Click the loading bar or button!
	<LoadingBar ref="myLoadingBar">Loading Bar</LoadingBar>
	<button class="btn" @click="doMainAppLoadingClick">Load More</button>
	</div>
	<script type="text/javascript">
	var loadingbar = Vue.component("LoadingBar", {
	template:
	`<div :style="styl" @click="loadMore">
	<div v-if="!hide" class="progress"><div class="determinate" :style="widthCalc()">
	</div></div>
	<slot></slot>
	</div>`,
	data: function(){
	return {
	styl:{
	width: "50%",
	},
	percent:0,
	hide:false
	};
	},
	methods: {
	loadMore: function() {
	if(this.percent<100) this.percent+=25;
	if(this.percent>=100) this.hide=true;
	},
	widthCalc(){
	return 'width: '+this.percent+'%';
	}
	}
	});
	var vm = new Vue({
	el: "#app",
	components:{loadingbar:loadingbar},
	methods:{
	doMainAppLoadingClick: function(){
	this.$refs.myLoadingBar.loadMore();
	}
	}
	});


	</script>
	</body>
	</html>

	<!-- end snippet -->