SkLoading

Vue component for a loading animation.

Example Usage

Example

<script setup>
import { ref } from 'vue';

const loading = ref(true);
const loadingType = ref('fancy');

function swapLoading() {
  if (loadingType.value === 'fancy') loadingType.value = 'base';
  else loadingType.value = 'fancy';
}
</script>

<template>
  <SkIcon
    name="close-circle"
    :active="true"
    fill="orange"
    style="z-index: 1000"
    @click="loading = !loading"
  />
  <SkIcon
    name="swap"
    :active="true"
    fill="orange"
    style="z-index: 1000; top: 20px"
    @click="swapLoading"
  />

  <SkLoader :loading="loading" :loader-type="loadingType" class="!z-10" @click="loading = false" />
</template>

<style lang="scss"></style>

Properties

Name	Type	Default	Description
loading	Boolean	false	Toggles the loading animation visibility
loader-type	String	'fancy'	Sets the loading animation type

Loader Types

Name	Description
fancy	A bookshelf-themed loading animation with a book that moves left and right
base	A simple loading animation with a rotating circle