Lineone - Spinner Element

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>

Profile

Messages

Team

Activity

Settings

Notifications

Banking cards

Pinned Apps

Stock Market

BTC

SOL

Latest News

Settings

Spinner

Basic Spinner

Elastic Timing Function

Soft Color Spinner

Soft Elsatic Spinner

Grow Spinner

SVG Spinner

SVG Spinner Elastic

Spinner Size