Add component to show material design loading icon

Signed-off-by: Raimund Schlüßler <raimund.schluessler@mailbox.org>

src/components/LoadingIcon/LoadingIcon.vue

@@ -0,0 +1,57 @@
+<!--
+ - @copyright Copyright (c) 2022 Raimund Schlüßler <raimund.schluessler@mailbox.org>
+ -
+ - @author Raimund Schlüßler <raimund.schluessler@mailbox.org>
+ -
+ - @license GNU AGPL version 3 or any later version
+ -
+ - This program is free software: you can redistribute it and/or modify
+ - it under the terms of the GNU Affero General Public License as
+ - published by the Free Software Foundation, either version 3 of the
+ - License, or (at your option) any later version.
+ -
+ - This program is distributed in the hope that it will be useful,
+ - but WITHOUT ANY WARRANTY; without even the implied warranty of
+ - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ - GNU Affero General Public License for more details.
+ -
+ - You should have received a copy of the GNU Affero General Public License
+ - along with this program. If not, see <http://www.gnu.org/licenses/>.
+ -
+ -->
+
+<docs>
+# Usage
+
+```
+<LoadingIcon />
+```
+</docs>
+
+<template>
+	<Loading :size="size" />
+</template>
+
+<script>
+import Loading from 'vue-material-design-icons/Loading'
+
+export default {
+	name: 'LoadingIcon',
+	components: {
+		Loading,
+	},
+	props: {
+		size: {
+			type: Number,
+			default: 20,
+		},
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+.material-design-icon::v-deep svg {
+	animation: rotate var(--animation-duration, 0.8s) linear infinite;
+	color: var(--color-loading-dark);
+}
+</style>

src/components/LoadingIcon/index.js

@@ -0,0 +1,25 @@
+/**
+ * @copyright Copyright (c) 2022 Raimund Schlüßler <raimund.schluessler@mailbox.org>
+ *
+ * @author Raimund Schlüßler <raimund.schluessler@mailbox.org>
+ *
+ * @license AGPL-3.0-or-later
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+
+import LoadingIcon from './LoadingIcon.vue'
+
+export default LoadingIcon

src/components/index.js

@@ -61,6 +61,7 @@ export { default as DatetimePicker } from './DatetimePicker/index.js'
 export { default as EmptyContent } from './EmptyContent/index.js'
 export { default as ListItem } from './ListItem/index.js'
 export { default as ListItemIcon } from './ListItemIcon/index.js'
+export { default as LoadingIcon } from './LoadingIcon/index.js'
 export { default as Modal } from './Modal/index.js'
 export { default as Multiselect } from './Multiselect/index.js'
 export { default as MultiselectTags } from './MultiselectTags/index.js'