Loading

Default

Generate a loading with the Sax Design function

Copied

import { SLoading, SLoadingFn } from 'sax-design-vue'

SLoadingFn(options)

// Or use via service
SLoading.service(options)

Code copied

<template>
  <div class="center">
    <s-button type="flat" @click="openLoading"> Open Loading </s-button>
  </div>
</template>

<script lang="ts" setup>
import { SLoadingFn } from 'sax-design-vue'

const openLoading = () => {
  const loadingInstance = SLoadingFn()
  setTimeout(() => {
    loadingInstance.close()
  }, 3000)
}
</script>

Type Update

Change the type of loading with the option type

Tipos de loading:

• atom
• ball
• scale
• waves
• border
• points
• square
• circles
• corners
• default
• gradient
• rectangle
• square-rotate

Click on the example loading to open it in the whole page

Code copied

<template>
  <div :class="{ hasOpenLoading }" class="center">
    <div
      v-for="(type, index) in types"
      :key="index"
      :ref="(el) => $refs.push(el)"
      class="box-loading"
      @click="handleClickLoading(type)"
    />
  </div>
</template>

<script lang="ts" setup>
import { onBeforeUpdate, onMounted, reactive, ref } from 'vue'
import { SLoadingFn } from 'sax-design-vue'
import type { LoadingType } from 'sax-design-vue'

const types: LoadingType[] = [
  'atom',
  'ball',
  'scale',
  'waves',
  'border',
  'points',
  'square',
  'circles',
  'corners',
  'default',
  'gradient',
  'rectangle',
  'square-rotate',
]

const hasOpenLoading = ref(false)
let $refs = reactive([]) // refs HTMLElement

const handleClickLoading = (type: LoadingType) => {
  const loadingInstance = SLoadingFn({
    type,
  })
  hasOpenLoading.value = true
  setTimeout(() => {
    loadingInstance.close()
    hasOpenLoading.value = false
  }, 3000)
}
const openLoading = (type: LoadingType, ref: string) => {
  SLoadingFn({
    target: ref,
    text: type,
    type,
  })
}

onBeforeUpdate(() => {
  $refs = []
})

onMounted(() => {
  types.forEach((type, i) => {
    openLoading(type, $refs[i])
  })
})
</script>

Color

Change the color of the loading animation with the property color, the colors can be the main ones of Sax Design or (RGB, HEX)

Code copied

<template>
  <div :class="{ hasOpenLoading }" class="center">
    <div :style="`background: ${color};`" class="con-input">
      <input v-model="color" type="color" />
      <s-icon  name="bxs:color-fill" />
    </div>
    <div ref="$loadings" class="con-loadings">
      <div
        v-for="(type, index) in types"
        :key="index"
        :ref="(el) => $refs.push(el)"
        class="box-loading"
        @click="handleClickLoading(type)"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onBeforeUpdate, onMounted, reactive, ref, watch } from 'vue'
import { SLoadingFn } from 'sax-design-vue'
import type { Color, LoadingType } from 'sax-design-vue'

const types: LoadingType[] = [
  'atom',
  'ball',
  'scale',
  'waves',
  'border',
  'points',
  'square',
  'circles',
  'corners',
  'default',
  'gradient',
  'rectangle',
  'square-rotate',
]

const color = ref<Color>('#d5397b')
const hasOpenLoading = ref(false)

const $loadings = ref<HTMLElement>()
let $refs = reactive([]) // refs HTMLElement

const handleClickLoading = (type) => {
  const loadingInstance = SLoadingFn({
    type,
    color,
  })

  hasOpenLoading.value = true

  setTimeout(() => {
    loadingInstance.close()
    hasOpenLoading.value = false
  }, 3000)
}

const openLoading = (type: LoadingType, ref: HTMLElement) => {
  SLoadingFn({
    target: ref,
    text: type,
    type,
    color,
  })
}

watch(color, () => {
  $loadings.value?.querySelectorAll('.box-loading').forEach((item) => {
    item.innerHTML = ''
  })
  types.forEach((type, i) => {
    openLoading(type, $refs[i])
  })
})

onBeforeUpdate(() => {
  $refs = []
})

onMounted(() => {
  types.forEach((type, i) => {
    openLoading(type, $refs[i])
  })
})
</script>

Background

You can change the loading background with the property loading

Code copied

<template>
  <div class="center">
    <div :style="`background: ${color};`" class="con-input">
      <input v-model="color" type="color" />
      <s-icon  name="bxs:color-fill" />
    </div>
    <s-button type="flat" :color="color" @click="openLoading">
      Open Loading
    </s-button>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { SLoadingFn } from 'sax-design-vue'
import type { Color } from 'sax-design-vue'

const color = ref<Color>('#7a76cb')

const openLoading = () => {
  const loadingInstance = SLoadingFn({
    background: color,
    color: '#fff',
  })
  setTimeout(() => {
    loadingInstance.close()
  }, 3000)
}
</script>

Text

Add a descriptive text of the loading or informing the user that it is loading or that it is missing to load with the property text

Code copied

<template>
  <div class="center">
    <s-button type="flat" @click="openLoading">
      Open Loading <b>Text</b>
    </s-button>
  </div>
</template>

<script lang="ts" setup>
import { SLoadingFn } from 'sax-design-vue'

const openLoading = () => {
  const loadingInstance = SLoadingFn({
    text: 'Loading...',
  })

  setTimeout(() => {
    loadingInstance.close()
  }, 3000)
}
</script>

Percent

You can add a string of the percentage of load with the percent property, if you need to change that value use the setPercent function in the loading instance.

Code copied

<template>
  <div class="center">
    <s-button type="flat" @click="openLoading">
      Open Loading <b>Percent</b>
    </s-button>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { SLoadingFn } from 'sax-design-vue'

const percent = ref<number>(0)

const openLoading = () => {
  const loadingInstance = SLoadingFn({
    percent: percent.value,
  })

  const interval = setInterval(() => {
    if (percent.value < 100) {
      percent.value = Number(percent.value) + 1
      loadingInstance.setPercent(percent.value)
    }
  }, 40)

  setTimeout(() => {
    loadingInstance.close()
    clearInterval(interval)
    percent.value = 0
  }, 4800)
}
</script>

Progress

Add a progress bar at the top to indicate the loading progress of the loading with the progress property, the value is a number that determines the percentage and the allowed value is (0 - 100)

Code copied

<template>
  <div class="center">
    <s-button type="flat" @click="openLoading">
      Open Loading <b>Progress</b>
    </s-button>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { SLoadingFn } from 'sax-design-vue'

const progress = ref<number>(0)

const openLoading = () => {
  const loadingInstance = SLoadingFn({
    progress: 0,
  })

  const interval = setInterval(() => {
    if (progress.value <= 100) {
      progress.value = Number(progress.value) + 1
      loadingInstance.setProgress(progress.value)
    }
  }, 40)

  setTimeout(() => {
    loadingInstance.close()
    clearInterval(interval)
    progress.value = 0
  }, 4100)
}
</script>

Target

Use the loading on a specific dom element using the target property and the value can be a string with the id or the class only if it is unique for the element, you can also use the element itself as per example using $refs.

Ensure the target’s style was set position

Code copied

<template>
  <div ref="$target" class="center">
    <div class="con-btns">
      <s-button ref="$button" type="flat" @click="openLoadingButton">
        Open Loading <b>Button</b>
      </s-button>
      <s-button type="border" @click="openLoading">
        Open Loading <b>Target</b>
      </s-button>
    </div>

    <div ref="$content" class="content-div">
      I am the container <br />
      of the <b>loading</b>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { SLoadingFn } from 'sax-design-vue'

const $button = ref<HTMLElement>()
const $content = ref<HTMLElement>()

const openLoading = () => {
  const loadingInstance = SLoadingFn({
    target: $content,
  })

  setTimeout(() => {
    loadingInstance.close()
  }, 3000)
}

const openLoadingButton = () => {
  const loadingInstance = SLoadingFn({
    target: $button,
    scale: '0.6',
    background: 'danger',
    opacity: 1,
    color: '#fff',
  })

  setTimeout(() => {
    loadingInstance.close()
  }, 3000)
}
</script>

API