Kanban

Analytics

Chat

Files

Crypto

Banking

Todo

Orders

Recent

View All
Chat App
File Manager App
Email App
Kanban Board
Todo App
Crypto Dashboard
Banking Dashboard
Analytics Dashboard
Influencer Dashboard

25 May, 2022

Projects

Activity

## Banking cards

$2,139.22

**** **** **** 8945

$2,139.22

**** **** **** 8945

$2,139.22

**** **** **** 8945

## Pinned Apps

Kanban

Analytics

Chat

Files

Banking

11.3 hr

Working Hours

71%

13 /22

Completed tasks

49%

## Stock Market

## BTC

Bitcoin

60.33$

+3.3%

## SOL

Solana

20.56$

+4.11%

## Latest News

What is Tailwind CSS?

John D.

2 min read

Tailwind CSS Card Example

Travis F.

5 min read

10 Tips for Making a Good Camera Even Better

Alfredo E .

4 min read

## Settings

Dark Mode Monochrome Mode

35GB of 1TB

Upgrade

14

Pending

36

Completed

143

In Progress

279

Total

LMS App Design

Updated at 7 Sep

25%

jd

Store Dashboard

Updated at 11 Sep

49%

dv

Chat Mobile App

Updated at 19 Sep

13%

gt

NFT Marketplace App

Updated at 5 Sep

78%

jd

Today

6hr 22m

1. User Photo Changed

   12 minute ago

   John Doe changed his avatar photo

2. Images Added

   1 hour ago

   Mores Clarke added new image gallery

   Category: #Tag #Category

3. Design Completed

   3 hours ago

   Robert Nolan completed the design of the CRM application

   File_final.fig
   UI/UX CRM Dashboard

4. ER Diagram

   a day ago

   Team completed the ER diagram app

   Members:

   jd

5. Weekly Report

   a day ago

   The weekly report was uploaded

## Spinner

- Elements
- Spinner

## Basic Spinner

Code

A Spinner component is used to show the user a timely process is currently taking place. Check out code for detail of usage.

      <div
        class="spinner size-7 animate-spin rounded-full border-[3px] border-slate-500 border-r-transparent dark:border-navy-300 dark:border-r-transparent"
      ></div>
      <div
        class="spinner size-7 animate-spin rounded-full border-[3px] border-primary border-r-transparent dark:border-accent dark:border-r-transparent"
      ></div>
      <div
        class="spinner size-7 animate-spin rounded-full border-[3px] border-secondary border-r-transparent"
      ></div>
      <div
        class="spinner size-7 animate-spin rounded-full border-[3px] border-info border-r-transparent"
      ></div>
      <div
        class="spinner size-7 animate-spin rounded-full border-[3px] border-success border-r-transparent"
      ></div>
      <div
        class="spinner size-7 animate-spin rounded-full border-[3px] border-warning border-r-transparent"
      ></div>
      <div
        class="spinner size-7 animate-spin rounded-full border-[3px] border-error border-r-transparent"
      ></div>

## Elastic Timing Function

Code

A Timing function describes how an animation will progress, allowing it to change speed during its course. Check out code for detail of usage.

      <div
        class="spinner is-elastic size-7 animate-spin rounded-full border-[3px] border-slate-500 border-r-transparent dark:border-navy-300 dark:border-r-transparent"
      ></div>
      <div
        class="spinner is-elastic size-7 animate-spin rounded-full border-[3px] border-primary border-r-transparent dark:border-accent dark:border-r-transparent"
      ></div>
      <div
        class="spinner is-elastic size-7 animate-spin rounded-full border-[3px] border-secondary border-r-transparent"
      ></div>
      <div
        class="spinner is-elastic size-7 animate-spin rounded-full border-[3px] border-info border-r-transparent"
      ></div>
      <div
        class="spinner is-elastic size-7 animate-spin rounded-full border-[3px] border-success border-r-transparent"
      ></div>
      <div
        class="spinner is-elastic size-7 animate-spin rounded-full border-[3px] border-warning border-r-transparent"
      ></div>
      <div
        class="spinner is-elastic size-7 animate-spin rounded-full border-[3px] border-error border-r-transparent"
      ></div>

## Soft Color Spinner

Code

Spinner can have a soft colors. To do this, you should use some opacity. Check out code for detail of usage.

      <div
        class="spinner size-7 animate-spin rounded-full border-[3px] border-slate-150 border-r-slate-500 dark:border-navy-500 dark:border-r-navy-300"
      ></div>
      <div
        class="spinner size-7 animate-spin rounded-full border-[3px] border-primary/30 border-r-primary dark:border-accent/30 dark:border-r-accent"
      ></div>
      <div
        class="spinner size-7 animate-spin rounded-full border-[3px] border-secondary/30 border-r-secondary"
      ></div>
      <div
        class="spinner size-7 animate-spin rounded-full border-[3px] border-info/30 border-r-info"
      ></div>
      <div
        class="spinner size-7 animate-spin rounded-full border-[3px] border-success/30 border-r-success"
      ></div>
      <div
        class="spinner size-7 animate-spin rounded-full border-[3px] border-warning/30 border-r-warning"
      ></div>
      <div
        class="spinner size-7 animate-spin rounded-full border-[3px] border-error/30 border-r-error"
      ></div>

## Soft Elsatic Spinner

Code

A Timing function describes how an animation will progress, allowing it to change speed during its course. Check out code for detail of usage.

      <div
        class="spinner is-elastic size-7 animate-spin rounded-full border-[3px] border-slate-150 border-r-slate-500 dark:border-navy-500 dark:border-r-navy-300"
      ></div>
      <div
        class="spinner is-elastic size-7 animate-spin rounded-full border-[3px] border-primary/30 border-r-primary dark:border-accent/30 dark:border-r-accent"
      ></div>
      <div
        class="spinner is-elastic size-7 animate-spin rounded-full border-[3px] border-secondary/30 border-r-secondary"
      ></div>
      <div
        class="spinner is-elastic size-7 animate-spin rounded-full border-[3px] border-info/30 border-r-info"
      ></div>
      <div
        class="spinner is-elastic size-7 animate-spin rounded-full border-[3px] border-success/30 border-r-success"
      ></div>
      <div
        class="spinner is-elastic size-7 animate-spin rounded-full border-[3px] border-warning/30 border-r-warning"
      ></div>
      <div
        class="spinner is-elastic size-7 animate-spin rounded-full border-[3px] border-error/30 border-r-error"
      ></div>

## Grow Spinner

Code

If you don’t fancy a border spinner, switch to the grow spinner. Check out code for detail of usage.

      <div class="spinner is-grow relative size-7">
        <span
          class="absolute inline-block h-full w-full rounded-full bg-slate-500 opacity-75 dark:bg-navy-300"
        ></span>
        <span
          class="absolute inline-block h-full w-full rounded-full bg-slate-500 opacity-75 dark:bg-navy-300"
        ></span>
      </div>
      <div class="spinner is-grow relative size-7">
        <span
          class="absolute inline-block h-full w-full rounded-full bg-primary opacity-75 dark:bg-accent"
        ></span>
        <span
          class="absolute inline-block h-full w-full rounded-full bg-primary opacity-75 dark:bg-accent"
        ></span>
      </div>
      <div class="spinner is-grow relative size-7">
        <span
          class="absolute inline-block h-full w-full rounded-full bg-secondary opacity-75"
        ></span>
        <span
          class="absolute inline-block h-full w-full rounded-full bg-secondary opacity-75"
        ></span>
      </div>
      <div class="spinner is-grow relative size-7">
        <span
          class="absolute inline-block h-full w-full rounded-full bg-info opacity-75"
        ></span>
        <span
          class="absolute inline-block h-full w-full rounded-full bg-info opacity-75"
        ></span>
      </div>
      <div class="spinner is-grow relative size-7">
        <span
          class="absolute inline-block h-full w-full rounded-full bg-success opacity-75"
        ></span>
        <span
          class="absolute inline-block h-full w-full rounded-full bg-success opacity-75"
        ></span>
      </div>
      <div class="spinner is-grow relative size-7">
        <span
          class="absolute inline-block h-full w-full rounded-full bg-warning opacity-75"
        ></span>
        <span
          class="absolute inline-block h-full w-full rounded-full bg-warning opacity-75"
        ></span>
      </div>
      <div class="spinner is-grow relative size-7">
        <span
          class="absolute inline-block h-full w-full rounded-full bg-error opacity-75"
        ></span>
        <span
          class="absolute inline-block h-full w-full rounded-full bg-error opacity-75"
        ></span>
      </div>

## SVG Spinner

Code

You can also use SVG shapes for spinners. Check out code for detail of usage.

      <div class="spinner size-7 animate-spin text-slate-500 dark:text-navy-300">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="h-full w-full"
          fill="none"
          viewBox="0 0 28 28"
        >
          <path
            fill="currentColor"
            fill-rule="evenodd"
            d="M28 14c0 7.732-6.268 14-14 14S0 21.732 0 14 6.268 0 14 0s14 6.268 14 14zm-2.764.005c0 6.185-5.014 11.2-11.2 11.2-6.185 0-11.2-5.015-11.2-11.2 0-6.186 5.015-11.2 11.2-11.2 6.186 0 11.2 5.014 11.2 11.2zM8.4 16.8a2.8 2.8 0 100-5.6 2.8 2.8 0 000 5.6z"
            clip-rule="evenodd"
          />
        </svg>
      </div>
      <div class="spinner size-7 animate-spin text-primary dark:text-accent">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="h-full w-full"
          fill="none"
          viewBox="0 0 28 28"
        >
          <path
            fill="currentColor"
            fill-rule="evenodd"
            d="M28 14c0 7.732-6.268 14-14 14S0 21.732 0 14 6.268 0 14 0s14 6.268 14 14zm-2.764.005c0 6.185-5.014 11.2-11.2 11.2-6.185 0-11.2-5.015-11.2-11.2 0-6.186 5.015-11.2 11.2-11.2 6.186 0 11.2 5.014 11.2 11.2zM8.4 16.8a2.8 2.8 0 100-5.6 2.8 2.8 0 000 5.6z"
            clip-rule="evenodd"
          />
        </svg>
      </div>
      <div
        class="spinner size-7 animate-spin text-secondary dark:text-secondary-light"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="h-full w-full"
          fill="none"
          viewBox="0 0 28 28"
        >
          <path
            fill="currentColor"
            fill-rule="evenodd"
            d="M28 14c0 7.732-6.268 14-14 14S0 21.732 0 14 6.268 0 14 0s14 6.268 14 14zm-2.764.005c0 6.185-5.014 11.2-11.2 11.2-6.185 0-11.2-5.015-11.2-11.2 0-6.186 5.015-11.2 11.2-11.2 6.186 0 11.2 5.014 11.2 11.2zM8.4 16.8a2.8 2.8 0 100-5.6 2.8 2.8 0 000 5.6z"
            clip-rule="evenodd"
          />
        </svg>
      </div>
      <div class="spinner size-7 animate-spin text-info">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="h-full w-full"
          fill="none"
          viewBox="0 0 28 28"
        >
          <path
            fill="currentColor"
            fill-rule="evenodd"
            d="M28 14c0 7.732-6.268 14-14 14S0 21.732 0 14 6.268 0 14 0s14 6.268 14 14zm-2.764.005c0 6.185-5.014 11.2-11.2 11.2-6.185 0-11.2-5.015-11.2-11.2 0-6.186 5.015-11.2 11.2-11.2 6.186 0 11.2 5.014 11.2 11.2zM8.4 16.8a2.8 2.8 0 100-5.6 2.8 2.8 0 000 5.6z"
            clip-rule="evenodd"
          />
        </svg>
      </div>
      <div class="spinner size-7 animate-spin text-success">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="h-full w-full"
          fill="none"
          viewBox="0 0 28 28"
        >
          <path
            fill="currentColor"
            fill-rule="evenodd"
            d="M28 14c0 7.732-6.268 14-14 14S0 21.732 0 14 6.268 0 14 0s14 6.268 14 14zm-2.764.005c0 6.185-5.014 11.2-11.2 11.2-6.185 0-11.2-5.015-11.2-11.2 0-6.186 5.015-11.2 11.2-11.2 6.186 0 11.2 5.014 11.2 11.2zM8.4 16.8a2.8 2.8 0 100-5.6 2.8 2.8 0 000 5.6z"
            clip-rule="evenodd"
          />
        </svg>
      </div>
      <div class="spinner size-7 animate-spin text-warning">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="h-full w-full"
          fill="none"
          viewBox="0 0 28 28"
        >
          <path
            fill="currentColor"
            fill-rule="evenodd"
            d="M28 14c0 7.732-6.268 14-14 14S0 21.732 0 14 6.268 0 14 0s14 6.268 14 14zm-2.764.005c0 6.185-5.014 11.2-11.2 11.2-6.185 0-11.2-5.015-11.2-11.2 0-6.186 5.015-11.2 11.2-11.2 6.186 0 11.2 5.014 11.2 11.2zM8.4 16.8a2.8 2.8 0 100-5.6 2.8 2.8 0 000 5.6z"
            clip-rule="evenodd"
          />
        </svg>
      </div>
      <div class="spinner size-7 animate-spin text-error">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="h-full w-full"
          fill="none"
          viewBox="0 0 28 28"
        >
          <path
            fill="currentColor"
            fill-rule="evenodd"
            d="M28 14c0 7.732-6.268 14-14 14S0 21.732 0 14 6.268 0 14 0s14 6.268 14 14zm-2.764.005c0 6.185-5.014 11.2-11.2 11.2-6.185 0-11.2-5.015-11.2-11.2 0-6.186 5.015-11.2 11.2-11.2 6.186 0 11.2 5.014 11.2 11.2zM8.4 16.8a2.8 2.8 0 100-5.6 2.8 2.8 0 000 5.6z"
            clip-rule="evenodd"
          />
        </svg>
      </div>

## SVG Spinner Elastic

Code

A Timing function describes how an animation will progress, allowing it to change speed during its course. Check out code for detail of usage.

      <div
        class="spinner is-elastic size-7 animate-spin text-slate-500 dark:text-navy-300"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="h-full w-full"
          fill="none"
          viewBox="0 0 28 28"
        >
          <path
            fill="currentColor"
            fill-rule="evenodd"
            d="M28 14c0 7.732-6.268 14-14 14S0 21.732 0 14 6.268 0 14 0s14 6.268 14 14zm-2.764.005c0 6.185-5.014 11.2-11.2 11.2-6.185 0-11.2-5.015-11.2-11.2 0-6.186 5.015-11.2 11.2-11.2 6.186 0 11.2 5.014 11.2 11.2zM8.4 16.8a2.8 2.8 0 100-5.6 2.8 2.8 0 000 5.6z"
            clip-rule="evenodd"
          />
        </svg>
      </div>
      <div
        class="spinner is-elastic size-7 animate-spin text-primary dark:text-accent"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="h-full w-full"
          fill="none"
          viewBox="0 0 28 28"
        >
          <path
            fill="currentColor"
            fill-rule="evenodd"
            d="M28 14c0 7.732-6.268 14-14 14S0 21.732 0 14 6.268 0 14 0s14 6.268 14 14zm-2.764.005c0 6.185-5.014 11.2-11.2 11.2-6.185 0-11.2-5.015-11.2-11.2 0-6.186 5.015-11.2 11.2-11.2 6.186 0 11.2 5.014 11.2 11.2zM8.4 16.8a2.8 2.8 0 100-5.6 2.8 2.8 0 000 5.6z"
            clip-rule="evenodd"
          />
        </svg>
      </div>
      <div
        class="spinner is-elastic size-7 animate-spin text-secondary dark:text-secondary-light"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="h-full w-full"
          fill="none"
          viewBox="0 0 28 28"
        >
          <path
            fill="currentColor"
            fill-rule="evenodd"
            d="M28 14c0 7.732-6.268 14-14 14S0 21.732 0 14 6.268 0 14 0s14 6.268 14 14zm-2.764.005c0 6.185-5.014 11.2-11.2 11.2-6.185 0-11.2-5.015-11.2-11.2 0-6.186 5.015-11.2 11.2-11.2 6.186 0 11.2 5.014 11.2 11.2zM8.4 16.8a2.8 2.8 0 100-5.6 2.8 2.8 0 000 5.6z"
            clip-rule="evenodd"
          />
        </svg>
      </div>
      <div class="spinner is-elastic size-7 animate-spin text-info">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="h-full w-full"
          fill="none"
          viewBox="0 0 28 28"
        >
          <path
            fill="currentColor"
            fill-rule="evenodd"
            d="M28 14c0 7.732-6.268 14-14 14S0 21.732 0 14 6.268 0 14 0s14 6.268 14 14zm-2.764.005c0 6.185-5.014 11.2-11.2 11.2-6.185 0-11.2-5.015-11.2-11.2 0-6.186 5.015-11.2 11.2-11.2 6.186 0 11.2 5.014 11.2 11.2zM8.4 16.8a2.8 2.8 0 100-5.6 2.8 2.8 0 000 5.6z"
            clip-rule="evenodd"
          />
        </svg>
      </div>
      <div class="spinner is-elastic size-7 animate-spin text-success">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="h-full w-full"
          fill="none"
          viewBox="0 0 28 28"
        >
          <path
            fill="currentColor"
            fill-rule="evenodd"
            d="M28 14c0 7.732-6.268 14-14 14S0 21.732 0 14 6.268 0 14 0s14 6.268 14 14zm-2.764.005c0 6.185-5.014 11.2-11.2 11.2-6.185 0-11.2-5.015-11.2-11.2 0-6.186 5.015-11.2 11.2-11.2 6.186 0 11.2 5.014 11.2 11.2zM8.4 16.8a2.8 2.8 0 100-5.6 2.8 2.8 0 000 5.6z"
            clip-rule="evenodd"
          />
        </svg>
      </div>
      <div class="spinner is-elastic size-7 animate-spin text-warning">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="h-full w-full"
          fill="none"
          viewBox="0 0 28 28"
        >
          <path
            fill="currentColor"
            fill-rule="evenodd"
            d="M28 14c0 7.732-6.268 14-14 14S0 21.732 0 14 6.268 0 14 0s14 6.268 14 14zm-2.764.005c0 6.185-5.014 11.2-11.2 11.2-6.185 0-11.2-5.015-11.2-11.2 0-6.186 5.015-11.2 11.2-11.2 6.186 0 11.2 5.014 11.2 11.2zM8.4 16.8a2.8 2.8 0 100-5.6 2.8 2.8 0 000 5.6z"
            clip-rule="evenodd"
          />
        </svg>
      </div>
      <div class="spinner is-elastic size-7 animate-spin text-error">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="h-full w-full"
          fill="none"
          viewBox="0 0 28 28"
        >
          <path
            fill="currentColor"
            fill-rule="evenodd"
            d="M28 14c0 7.732-6.268 14-14 14S0 21.732 0 14 6.268 0 14 0s14 6.268 14 14zm-2.764.005c0 6.185-5.014 11.2-11.2 11.2-6.185 0-11.2-5.015-11.2-11.2 0-6.186 5.015-11.2 11.2-11.2 6.186 0 11.2 5.014 11.2 11.2zM8.4 16.8a2.8 2.8 0 100-5.6 2.8 2.8 0 000 5.6z"
            clip-rule="evenodd"
          />
        </svg>
      </div>

## Spinner Size

Code

A Spinner component is used to show the user a timely process is currently taking place. Check out code for detail of usage.

      <!-- Basic Spinner -->
      <div>
        <div
          class="spinner size-5 animate-spin rounded-full border-2 border-primary border-r-transparent dark:border-accent dark:border-r-transparent"
        ></div>
        <div
          class="spinner size-7 animate-spin rounded-full border-[3px] border-primary border-r-transparent dark:border-accent dark:border-r-transparent"
        ></div>
        <div
          class="spinner size-10 animate-spin rounded-full border-4 border-primary border-r-transparent dark:border-accent dark:border-r-transparent"
        ></div>
        <div
          class="spinner size-12 animate-spin rounded-full border-4 border-primary border-r-transparent dark:border-accent dark:border-r-transparent"
        ></div>
        <div
          class="spinner size-16 animate-spin rounded-full border-4 border-primary border-r-transparent dark:border-accent dark:border-r-transparent"
        ></div>
      </div>

      <!-- Soft Color Spinner -->
      <div>
        <div
          class="spinner size-5 animate-spin rounded-full border-2 border-primary/30 border-r-primary dark:border-accent/30 dark:border-r-accent"
        ></div>
        <div
          class="spinner size-7 animate-spin rounded-full border-[3px] border-primary/30 border-r-primary dark:border-accent/30 dark:border-r-accent"
        ></div>
        <div
          class="spinner size-10 animate-spin rounded-full border-4 border-primary/30 border-r-primary dark:border-accent/30 dark:border-r-accent"
        ></div>
        <div
          class="spinner size-12 animate-spin rounded-full border-4 border-primary/30 border-r-primary dark:border-accent/30 dark:border-r-accent"
        ></div>
        <div
          class="spinner size-16 animate-spin rounded-full border-4 border-primary/30 border-r-primary dark:border-accent/30 dark:border-r-accent"
        ></div>
      </div>

      <!-- Grow Spinner -->
      <div>
        <div class="spinner is-grow relative size-5">
          <span
            class="absolute inline-block h-full w-full rounded-full bg-primary opacity-75 dark:bg-accent"
          ></span>
          <span
            class="absolute inline-block h-full w-full rounded-full bg-primary opacity-75 dark:bg-accent"
          ></span>
        </div>
        <div class="spinner is-grow relative size-7">
          <span
            class="absolute inline-block h-full w-full rounded-full bg-primary opacity-75 dark:bg-accent"
          ></span>
          <span
            class="absolute inline-block h-full w-full rounded-full bg-primary opacity-75 dark:bg-accent"
          ></span>
        </div>
        <div class="spinner is-grow relative size-10">
          <span
            class="absolute inline-block h-full w-full rounded-full bg-primary opacity-75 dark:bg-accent"
          ></span>
          <span
            class="absolute inline-block h-full w-full rounded-full bg-primary opacity-75 dark:bg-accent"
          ></span>
        </div>
        <div class="spinner is-grow relative size-12">
          <span
            class="absolute inline-block h-full w-full rounded-full bg-primary opacity-75 dark:bg-accent"
          ></span>
          <span
            class="absolute inline-block h-full w-full rounded-full bg-primary opacity-75 dark:bg-accent"
          ></span>
        </div>
        <div class="spinner is-grow relative size-16">
          <span
            class="absolute inline-block h-full w-full rounded-full bg-primary opacity-75 dark:bg-accent"
          ></span>
          <span
            class="absolute inline-block h-full w-full rounded-full bg-primary opacity-75 dark:bg-accent"
          ></span>
        </div>
      </div>