title: Make a spinner stop and render the content after DOM loaded in vue
body: <p>I make a spinner component in my project and I pass some props to load the spinner and it's like this</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>Vue.component("Spinner", require("./components/Loading/Loading.vue").default, {
      props: ["loading"]
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.spinner {
      width: 100%;
      height: 100%;
      background-color: white;
      position: fixed;
      transition: 0.5s;
      z-index: 999;
  }
  
  
  
  
  .ring {
      position: absolute;
      top: 50%;
      left: 50%;
      margin: 0 auto;
      height: 100%;
      z-index: 1000;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;template&gt;
      &lt;div class="spinner"&gt;
          &lt;div class="ring"&gt;
              &lt;half-circle-spinner :size="60" color="#1ABC9C"/&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/template&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>and I call it in the other components like this:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;template&gt;
  
  
  
  
  &lt;Spinner key="list-key" :loading="true"/&gt;
  
  
  
  
  &lt;/template&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>The thing I need is to make <code>this.spin = false</code> when all the DOM elements are loaded on my page. please let me know your ideas. :)</p>