라라벨/laravel-movies

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

땀모 2020. 4. 12. 09:43

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


1. 설치

npm install --save-dev tailwindcss-spinner


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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
module.exports = {
  theme: {
    extend: {
        width:{
            '96' : '24rem',
        }
    },
  },
  variants: {},
  plugins: [
    require('tailwindcss-spinner')(), 
  ],
}
 
cs


3. 테마도 넣어준다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
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')(),
  ],
}
 
cs


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

1
2
3
4
5
6
7
8
9
10
@tailwind base;
 
@tailwind components;
 
@tailwind utilities;
 
.spinner{
    position: absolute;
}
 
cs


추가후 빌드 npm run dev


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

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