Hiding vue.js template before it is rendered

Question

I am trying to hide the vue.js template\'s contents before it is fully rendered. Consider following template:

Answer 1

I've created a pure CSS solutions, building on @Maniruzzaman Akask solutions. (I don't have font awesome installed in my template, and the result is cool ;-)

Steps

1) Put the v-cloak tag inside your #app div (as reccomended in the answer above)

  


  
 
    
 
  

  
 
           
  

  
Content
 

2) Use a from https://tobiasahlin.com/spinkit/

3) Add the CSS of both elements

Css for the Spinner

.spinner {
  width: 40px;
  height: 40px;
  background-color: red;

  margin: 400px auto;
  -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
  animation: sk-rotateplane 1.2s infinite ease-in-out;
}

@-webkit-keyframes sk-rotateplane {
  0% { -webkit-transform: perspective(120px) }
  50% { -webkit-transform: perspective(120px) rotateY(180deg) }
  100% { -webkit-transform: perspective(120px) rotateY(180deg)  rotateX(180deg) }
}

@keyframes sk-rotateplane {
  0% { 
    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg) 
  } 50% { 
    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg) 
  } 100% { 
    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
  }
}

CSS for v-cloak

[v-cloak] .v-cloak--block {
  display: block;
}
[v-cloak] .v-cloak--inline {
  display: inline;
}
[v-cloak] .v-cloak--inlineBlock {
  display: inline-block;
}
[v-cloak] .v-cloak--hidden {
  display: none;
}
[v-cloak] .v-cloak--invisible {
  visibility: hidden;
}
.v-cloak--block,
.v-cloak--inline,
.v-cloak--inlineBlock {
  display: none;
}