Quasar is a popular Vue UI library for developing good looking Vue apps.
In this article, we’ll take a look at how to create Vue apps with the Quasar UI library.
Loading Indicator
We can add a loading indicator with the $q.loading object:
<!DOCTYPE html>
<html>
<head>
<link
href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"
rel="stylesheet"
type="text/css"
/>
<link
href="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.min.css"
rel="stylesheet"
type="text/css"
/>
</head>
<body class="body--dark">
<script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.umd.min.js"></script>
<div id="q-app">
<div class="q-pa-md"></div>
</div>
<script>
new Vue({
el: "#q-app",
data: {},
beforeMount() {
this.$q.loading.show({
delay: 400
});
setTimeout(() => {
this.$q.loading.hide();
}, 3000);
}
});
</script>
</body>
</html>
We call the $q.loading.show method with the delay property to delay the loading indicator’s display.
The number is in milliseconds.
Then we hide it with the $q.loading.hide method.
We can add a message with the message property:
<!DOCTYPE html>
<html>
<head>
<link
href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"
rel="stylesheet"
type="text/css"
/>
<link
href="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.min.css"
rel="stylesheet"
type="text/css"
/>
</head>
<body class="body--dark">
<script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.umd.min.js"></script>
<div id="q-app">
<div class="q-pa-md"></div>
</div>
<script>
new Vue({
el: "#q-app",
data: {},
beforeMount() {
this.$q.loading.show({
delay: 400,
message:
'Some important <b>process</b> is in progress.<br/><span class="text-primary">Hang on...</span>'
});
setTimeout(() => {
this.$q.loading.hide();
}, 3000);
}
});
</script>
</body>
</html>
We can set it to HTML.
We can add the sanitize property to the object to escape the HTML code.
We can add more customizations with more properties:
<!DOCTYPE html>
<html>
<head>
<link
href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"
rel="stylesheet"
type="text/css"
/>
<link
href="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.min.css"
rel="stylesheet"
type="text/css"
/>
</head>
<body class="body--dark">
<script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.umd.min.js"></script>
<div id="q-app">
<div class="q-pa-md"></div>
</div>
<script>
new Vue({
el: "#q-app",
data: {},
beforeMount() {
this.$q.loading.show({
spinner: Quasar.QSpinnerFacebook,
spinnerColor: "yellow",
spinnerSize: 140,
backgroundColor: "purple",
message: "Some important process is in progress. Hang on...",
messageColor: "black"
});
setTimeout(() => {
this.$q.loading.hide();
}, 3000);
}
});
</script>
</body>
</html>
spinner has the icon for the loading spinner,
spinnerColor sets the spinner color.
spinnerSize sets the spinner size.
backgroundColor sets the background color of the overlay.
messageColor sets the color of the message.
Loading Bar
We can add a loading bar with the $q.loadingBar object.
For instance, we can write:
<!DOCTYPE html>
<html>
<head>
<link
href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"
rel="stylesheet"
type="text/css"
/>
<link
href="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.min.css"
rel="stylesheet"
type="text/css"
/>
</head>
<body class="body--dark">
<script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.umd.min.js"></script>
<div id="q-app">
<div class="q-pa-md"></div>
</div>
<script>
new Vue({
el: "#q-app",
data: {},
beforeMount() {
this.$q.loadingBar.start();
setTimeout(() => {
this.$q.loadingBar.stop();
}, 3000);
}
});
</script>
</body>
</html>
We call start to show it and stop to stop it.
We can also call this.$q.loadingBar.increment(value) to change the progress value.
Also, we can change the options with the LoadingBar.setDefaults method:
<!DOCTYPE html>
<html>
<head>
<link
href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"
rel="stylesheet"
type="text/css"
/>
<link
href="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.min.css"
rel="stylesheet"
type="text/css"
/>
</head>
<body class="body--dark">
<script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.umd.min.js"></script>
<div id="q-app">
<div class="q-pa-md"></div>
</div>
<script>
new Vue({
el: "#q-app",
data: {},
beforeMount() {
Quasar.LoadingBar.setDefaults({
color: "purple",
size: "15px",
position: "bottom"
});
this.$q.loadingBar.start();
setTimeout(() => {
this.$q.loadingBar.stop();
}, 3000);
}
});
</script>
</body>
</html>
We set the color , size , and position to set those styles.
Conclusion
We can add a loading indicator with various styles into our Vue app with Quasar’s loading bar plugin.
