Finally, implement a Busy
indicator in the page by taking the following steps:
- Implement the
Busy
component:- Create the file
/src/components/common/Busy.vue
- Write the following code:
- Create the file
<template> <div class="loader-container"> <div class="loader"></div> </div> </template> <script> export default { name: 'Busy', } </script> <style scoped> .loader-container { position: absolute; left: 0; right: 0; top: 0; bottom: 0; background-color: azure; opacity: 0.5; display: flex; align-items: center; justify-content: center; } .loader { border: 16px solid #f3f3f3; border-top: 16px solid #3498db; border-radius: 50%; width: 80px; height: 80px; animation: spin 2s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } </style>
- Modify the
ProductsPage
component:- Add the
busy
dataset to false as the default starting state - Change the
busy
state when...
- Add the