<template>
  <!-- README: Tools needed are ['vuex/store', 'mapStateVModel', 'logo icons (must be stored in @/assets/images/logo_symbol/color/)'] -->
  <div class="w-100 h-100 b-bk_30 p-f t-0 l-0 z-10000 p-r">
      <div class="p-a cen d-fx jc-c ai-c" 
        style="animation: tyle-loading-animation 1.7s infinite; animation-timing-function: ease-in-out;">

        <i :class="`icon-${this.site} c-${this.colors.first} perspective-150px ml-_${this.negative_left_align}px f-${this.logo_size}px`" 
          :alt="`${this.site}`"></i>
      </div>
  </div>
</template>

<script>
export default {
  name: 'Ic_loader',
  extends: {},
  props: {
    site: {
      type: String,
      required: true
    }, 
    colors: Object,
    logo_size: { //Logo height
      default: "38",
      type: String
    }, 
    negative_left_align: String // Logo width/2
    },
  data(){
    return{
      publicPath: process.env.BASE_URL
    };
  },
  components: {},
  computed: {},
  watch: {},
  methods: {},
  beforeCreate(){},
  mounted(){}
}
</script>

<style>
  @-webkit-keyframes tyle-loading-animation {
    from {
      -webkit-transform: rotateY(0deg);
    }
    to {
      -webkit-transform: rotateY(360deg);
    }
  }

  @-moz-keyframes tyle-loading-animation {
    from {
      -moz-transform: rotateY(0deg);
    }
    to {
      -moz-transform: rotateY(360deg);
    }
  }

  @-ms-keyframes tyle-loading-animation {
    from {
      -ms-transform: rotateY(0deg);
    }
    to {
      -ms-transform: rotateY(360deg);
    }
  }

  @-o-keyframes tyle-loading-animation {
    from {
      -o-transform: rotateY(0deg);
    }
    to {
      -o-transform: rotateY(360deg);
    }
  }

  @keyframes tyle-loading-animation {
    from {
      transform: rotateY(0deg);
    }
    to {
      transform: rotateY(360deg);
    }
  }
</style>

