Skip to content
Snippets Groups Projects
Select Git revision
  • hotfix/updateURL
  • develop
  • master default protected
  • 0.1.3
  • 0.1.2
  • 0.1.1
  • 0.1.0
  • 0.0.10
  • 0.0.9
  • 0.0.8
  • 0.0.7
  • 0.0.6
  • 0.0.5
  • 0.0.4
  • 0.0.3
  • 0.0.2
16 results
Compare
user avatar
Merge branch 'hotfix/0.1.2'
lcottret authored
83de40aa
History
user avatar 83de40aa
History
Name Last commit Last update
.storybook
cypress
lib
public
src
.gitignore
.gitlab-ci.yml
.npmrc
README.md
cypress.config.ts
env.d.ts
index.html
package-lock.json
package.json
tsconfig.json
tsconfig.node.json
tsconfig.vitest.json
vite.config.ts
README.md

LoadingMask Component

The LoadingMask component is a customizable loading overlay for Vue applications. It displays a loading message and a progress indicator (either linear or circular) while content is being loaded.

Demo

Storybook available here

Props

  • bgColor (String, default: 'black'): Background color of the loading mask.
  • fontColor (String, default: 'white'): Font color of the loading text.
  • fontSize (Number, default: 64): Font size of the loading text.
  • progressColor (String, default: '#04AA6D'): Color of the progress indicator.
  • bgOpacity (Number, default: 1): Opacity of the background.
  • progressStyle (String, default: 'linear'): Style of the progress indicator. Can be either 'linear' or 'circular'.

Slots

  • loading-text: Slot for custom loading text. Default is "Loading...".
  • loading-image: Slot for custom loading image or progress indicator. Default is a progress indicator based on progressStyle.

Examples

Default

<LoadingMask />

Change background, font, progress bar color, font size, or background opacity

<LoadingMask 
	bg-color="green"
	font-color="white"
	progress-color="yellow"
	:bg-opacity="0.6"
	:font-size="12" />

Select circular or linear progress bar

<LoadingMask progress-style="circular" />

Use a slot to put anything else at the place of the text

<LoadingMask>
	<template v-slot:loading-text>
		<h2>This is loading...</h2>
		<h3>Please be patient.................</h3>
	</template>
</LoadingMask>

### Use a slot to replace the progress bar by anthything else

<LoadingMask>
	<template v-slot:loading-image>
		<svg xmlns="http://www.w3.org/2000/svg">
			<circle fill="#FF156D" stroke="#FF156D" stroke-width="15" r="15" cx="35"
				cy="30">
				<animate attributeName="cx" calcMode="spline" dur="2"
					values="35;165;165;35;35"
					keySplines="0 .1 .5 1;0 .1 .5 1;0 .1 .5 1;0 .1 .5 1"
					repeatCount="indefinite" begin="0"></animate>
			</circle>
			<circle fill="#FF156D" stroke="#FF156D" stroke-width="15" opacity=".8" r="15"
				cx="35" cy="30">
				<animate attributeName="cx" calcMode="spline" dur="2"
					values="35;165;165;35;35"
					keySplines="0 .1 .5 1;0 .1 .5 1;0 .1 .5 1;0 .1 .5 1"
					repeatCount="indefinite" begin="0.05"></animate>
			</circle>
			<circle fill="#FF156D" stroke="#FF156D" stroke-width="15" opacity=".6" r="15"
				cx="35" cy="30">
				<animate attributeName="cx" calcMode="spline" dur="2"
					values="35;165;165;35;35"
					keySplines="0 .1 .5 1;0 .1 .5 1;0 .1 .5 1;0 .1 .5 1"
					repeatCount="indefinite" begin=".1"></animate>
			</circle>
			<circle fill="#FF156D" stroke="#FF156D" stroke-width="15" opacity=".4" r="15"
				cx="35" cy="30">
				<animate attributeName="cx" calcMode="spline" dur="2"
					values="35;165;165;35;35"
					keySplines="0 .1 .5 1;0 .1 .5 1;0 .1 .5 1;0 .1 .5 1"
					repeatCount="indefinite" begin=".15"></animate>
			</circle>
			<circle fill="#FF156D" stroke="#FF156D" stroke-width="15" opacity=".2" r="15"
				cx="35" cy="30">
				<animate attributeName="cx" calcMode="spline" dur="2"
					values="35;165;165;35;35"
					keySplines="0 .1 .5 1;0 .1 .5 1;0 .1 .5 1;0 .1 .5 1"
					repeatCount="indefinite" begin=".2"></animate>
			</circle>
		</svg>
	</template>
</Loading-mask>

Contents

This component includes :

Files to modify for the npm packaging

This template is configured to build and publish an npm package on GitLab, following this tutorial.

Replace 'ComponentExample' with the name of the component to publish in these files :

  • lib/main.js
  • package.json
  • vite.config.ts

The package will be published with the GitLab CI.

Use the package in another project

npm i -D @metabohub/LoadingMask

If your project is not using vuetify, you need to import it in src/main.ts :

import { createApp } from 'vue'
import App from './App.vue'
import { vuetify } from "@metabohub/LoadingMask";

createApp(App).use(vuetify).mount('#app')

Use the component :

<script setup lang="ts">
import { ComponentExample } from "@metabohub/LoadingMask";
import "@metabohub/LoadingMask/dist/style.css";
</script>

<template>
  <ComponentExample />
</template>

Project Setup

npm install

Compile and Hot-Reload for Development

npm run dev

Type-Check, Compile and Minify for Production

npm run build

Run Unit Tests with Vitest 

npm run test:unit

Check the coverage :

npm run coverage

Lint with ESLint 

npm run lint

View stories with Storybook 

npm run storybook