Vuejs Top Loader Component Yapımı

Vuejs Top Loader Component Yapımı

Herkese merhabalar bu yazımızda sizlerle beraber Vuejs kullanarak top loader componenti yapmaya çalışacağız dilerseniz hemen başlayalım.

Proje Oluşturma;

Vue Cli kullanarak proje oluşturmak için 
vue create hello-world

projemizi oluşturduktan sonra src/components/TopLoader.vue dosyamızı oluşturuyoruz.

<div class="topLoader">
<span class="loader" :style="{width:topLoaderWidth+'%'}"></span></div>

ve template içerisine ilgili html elementlerimizi oluşturuyoruz, daha sonra style içerisine

<style scoped>
.loader{
position: absolute;
top: 0;
bottom: 0;
left: 0;
transition: all 500ms;
background: linear-gradient(to right,red,blue);
}
.topLoader{
background: transparent;
height: 4px;
position: fixed;
top: 0px;
left: 0px;
right: 0px;
z-index: 500;
transition: all 500ms;
}
</style>

ilgili css lerimizi yazdıktan sonra script tagları içerisinde ilgili props tanımımızı yapıyoruz.

<script>
export default {
props:['topLoaderWidth']
}
</script>

ardından src/app.vue dosyamıza gelip componentimizi import edip width değerini props olarak geçiyoruz işte bu kadar.

<template>
<div id="app">
<top-loader v-if="visible" :topLoaderWidth="loaderWidth" />
<button @click="fetchData">Verileri Getir </button>
</div>
</template>
<script>
import TopLoader from './components/TopLoader.vue'
export default {
name: 'App',
data(){
return{
loaderWidth:0,
visible:false
}},
watch:{
loaderWidth(val){
if(val===100){
setTimeout(()=>{
this.visible=false
},1000)
}}
},
methods:{
fetchData(){
this.visible=true
this.loaderWidth=Math.floor(Math.random()*40+1)
setTimeout(()=>{
this.loaderWidth+=Math.floor(Math.random()*40+1)
},1000)
setTimeout(()=>{
this.loaderWidth+=Math.floor(Math.random()*10+1)
},2000)
setTimeout(()=>{
this.loaderWidth=100
},3000)
}
},
components:{
TopLoader
}
}
</script>

Herkese İyi Çalışmalar Dilerim.