테일윈드css 로딩 스피너 설치

https://github.com/aniftyco/tailwindcss-spinner

1. 설치

npm install --save-dev tailwindcss-spinner

2. tailwind.config.js  플러그인을 넣어준다.

module.exports = {
  theme: {
    extend: {
        width:{
            '96' : '24rem',
        }
    },
  },
  variants: {},
  plugins: [
    require('tailwindcss-spinner')(), 
  ],
}
 

3. 테마도 넣어준다.

module.exports = {
  theme: {
    extend: {
        width:{
            '96' : '24rem',
        }
    },
    spinner: (theme) => ({
        default: {
          color: '#dae1e7', // color you want to make the spinner
          size: '1em', // size of the spinner (used for both width and height)
          border: '2px', // border-width of the spinner (shouldn't be bigger than half the spinner's size)
          speed: '500ms', // the speed at which the spinner should rotate
        },
      }),
 
  },
  variants: {},
  plugins: [
    require('tailwindcss-spinner')(),
  ],
}
 

4. 빌드해준다.

npm run dev

5. 스피너삽입 search-dropdown.blade.php

<div class="absolute top-0">

<i class="fas fa-search mt-2 ml-3"></i>

</div>

<div class="spinner"></div>

@if (strlen($search) >= 2) {{-- 2자이상만 검색되게 --}}

 

위치를 맞출려면 resources/css/main.css

@tailwind base;
 
@tailwind components;
 
@tailwind utilities;
 
.spinner{
    position: absolute;
}
 

추가후 빌드 npm run dev

search-dropdown.blade.php 스피너 위치를 맞춘다.

<div wire:loading class="spinner top-0 right-0 mr-4 mt-3" > </div>