feat(loader): create UILoader component with animated dots

Steps:
- Create `UILoader.vue` component to display a loading animation.
- Implement animated dots using SCSS keyframes.
- Extract `loaderDots` animation into `_animations-loader-dots.scss` for reusability.

Author: beatrizsmerino

src/App.vue

@@ -118,4 +118,5 @@
 	// ANIMATIONS
 	// ----------------------------------------------------------------------
 	@use "@/assets/scss/animations/animations-vue-transitions";
+	@use "@/assets/scss/animations/animations-loader-dots";
 </style>

src/assets/scss/animations/_animations-loader-dots.scss

@@ -0,0 +1,25 @@
+// ANIMATIONS
+// LOADER-DOTS
+// =================================================
+
+@keyframes loaderDots {
+	0% {
+		content: "";
+	}
+
+	25% {
+		content: ".";
+	}
+
+	50% {
+		content: "..";
+	}
+
+	75% {
+		content: "...";
+	}
+
+	100% {
+		content: "";
+	}
+}

src/components/UI/UILoader.vue

@@ -0,0 +1,40 @@
+<template>
+	<div class="loading">
+		<p>
+			<span class="loading__text">
+				Loading
+			</span>
+			<span class="loading__dots"></span>
+		</p>
+	</div>
+</template>
+
+<style lang="scss">
+	.loading {
+		display: flex;
+		position: fixed;
+		z-index: 999;
+		top: 0;
+		right: 0;
+		align-items: center;
+		justify-content: center;
+		width: 100%;
+		height: 100%;
+		background-color: rgba($color-brand-2, 0.9);
+		color: $color-light;
+		font-family: $font-brand-1;
+		font-size: 3rem;
+
+		&__dots {
+			display: inline-block;
+			width: 1.5em;
+			text-align: left;
+
+			&:after {
+				content: "";
+				display: inline-block;
+				animation: loaderDots 2.5s infinite steps(4);
+			}
+		}
+	}
+</style>

stylelint.config.js

@@ -91,12 +91,12 @@ module.exports = {
 					"background-color": [
 						"/^rgba\\(\\$[a-zA-Z0-9-_]+,\\s*[0-9.]+\\)$/",
 					],
-					"box-shadow": [
-						"/^((inset\\s+)?[0-9.]+(px|rem|em|%)?\\s*){1,4}rgba\\(\\$[a-zA-Z0-9-_]+,\\s*[0-9.]+\\)$/",
-					],
 					"border": [
 						"/^[0-9.]+(px|rem|em|%)\\s+(solid|dashed|dotted)\\s+(\\$[a-zA-Z0-9-_]+|rgba\\(\\$[a-zA-Z0-9-_]+,\\s*[0-9.]+\\))$/",
 					],
+					"box-shadow": [
+						"/^((inset\\s+)?[0-9.]+(px|rem|em|%)?\\s*){1,4}rgba\\(\\$[a-zA-Z0-9-_]+,\\s*[0-9.]+\\)$/",
+					],
 				},
 			},
 		],