Vue 3 UI preloader - Vue.js Nourished #.\n\nvue3-ui-preloader is a Pre Loader components for Vue 3.\n\nDemo as well as recreation space.\nReside demonstration - https:\/\/vue3-ui-preloader.netlify.app\/.\nPlay area Web site.\nReadjust the environments utilizing the playing field choices. On the bottom of the webpage you will definitely discover the source code that you can directly use in your task or even you may by hand transform the props.\nnpm link - https:\/\/www.npmjs.com\/package\/vue3-ui-preloader.\nVue 3 strike link - https:\/\/stackblitz.com\/edit\/vue-caijgu?file=src%2FApp.vue.\nInstallation.\n# use yarn.\nyarn add vue3-ui-preloader.\n# make use of npm.\nnpm put in-- save vue3-ui-preloader.\nUsage.\nVue 3 strike link - https:\/\/stackblitz.com\/edit\/vue-caijgu?file=src%2FApp.vue.\nIn your main.js.\nimport createApp from 'vue'.\nbring in Application from '.\/ App.vue'.\nimport loading machine from \"vue3-ui-preloader\".\n\n\/\/ Import the CSS or use your very own!\nimport \"vue3-ui-preloader\/dist\/loader. css\".\n\nconst app = createApp( App).\n\napp.component(' loader', loading machine).\n\napp.mount(' #app').\nIn your template.\n\n\n\n\nKEEP IN MIND: The best means to manage the loader is to possess a flag and utilize it in a v-if or even v-show statement.You can either use the play area internet site to instantly obtain all the props established or even you can easily set them manaully using the below set checklist. You can easily likewise turn to not passing any type of prop, in this instance the preloader will definitely make use of default settings.\n\nVia CDN.\nCDN demo link - https:\/\/jsfiddle.net\/1t0jyeqh\/10\/.\nIn your index.html.\n\n\nIn your theme.\n\n\n\nIn your main.js.\nconst createApp = Vue.\n\nconst application = createApp( loader).\n\napp.mount(' #app').\nProps.\nCall.\nStyle.\nNonpayment.\nExplanation.\nname.\nstring.\n' turning'.\nmakes a decision the kind of loader. (Ex-boyfriend: spinning, dots, packing, rounded, package).\nitem.\nstrand.\n' #ff 9633'.\nset the shade of the loaders. (Ex lover: hex or even different colors).\nloadingText.\nstring.\n' PACKING ...'.\nspecified the text of some loaders.\ntextColor.\ncord.\n' #ffffff'.\nset the shade of the loadingText. (Ex: hex or different colors).\ntextSize.\nnumber.\n' 15'.\nestablished the dimension of the loadingText.\ntextWeight.\nnumber\/string.\n' 800'.\nput the weight of the loadingText. (Ex-boyfriend: 800, strong).\ncolor1.\nstrand.\njust for rounded.\nprepared the shade of the rounded loader disk1. (Ex lover: hex or even shade).\ncolor2.\nstring.\nonly for circular.\nspecified the color of the rounded loading machine disk2. (Ex: hex or even colour).\ndimension.\nvariety.\n5.\nset the size of loading machine.\nbg.\nstrand.\n' # 343a40'.\nprepared the different colors of the loading machine history. (Ex-spouse: hex or even color).\nobjectbg.\ncord.\n'
999793'.prepared the colour of the loading machine object history. (Ex-spouse: hex or even shade).opacity.amount.80.established the opacity of history.velocity.amount.2.animation rate in seconds.disableScrolling.boolean.misleading.disable page scrolling when preloader is open.
Articles You Can Be Interested In