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>



'라라벨 > laravel-movies' 카테고리의 다른 글

알파인js  (0) 2020.04.13
7. 디테일페이지 만들기  (0) 2020.04.06
4. main, index, show 디자인양식  (0) 2020.04.05
3. 구조잡기  (0) 2020.04.05
2. Fontatwesome 설치하기  (0) 2020.04.05

+ Recent posts