라라벨/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>