@extends('layouts.master')
@section('page-css')

@endsection

@section('main-content')
    <div class="breadcrumb">
                <h1>Loaders</h1>
                <ul>
                    <li><a href="">UI Kits</a></li>
                    <li>Loaders</li>
                </ul>
            </div>

            <div class="separator-breadcrumb border-top"></div>
            <div class="row">
                <div class="col-md-12">
                    <div class="card mb-4">
                        <div class="card-body">
                            <div class="card-title mb-4">Ripple Spinners</div>
                            <span class="spinner-glow spinner-glow-primary me-5"></span>
                            <span class="spinner-glow spinner-glow-secondary me-5"></span>
                            <span class="spinner-glow spinner-glow-warning me-5"></span>
                            <span class="spinner-glow spinner-glow-danger me-5"></span>
                            <span class="spinner-glow spinner-glow-success me-5"></span>
                            <span class="spinner-glow spinner-glow-info me-5"></span>
                            <span class="spinner-glow spinner-glow-light me-5"></span>
                            <span class="spinner-glow spinner-glow-dark me-5"></span>
                        </div>
                    </div>
                </div>
                <div class="col-md-12">
                    <div class="card mb-4">
                        <div class="card-body">
                            <div class="card-title mb-4">Loading Spinners</div>
                            <div class="spinner spinner-primary me-3"></div>
                            <div class="spinner spinner-secondary me-3"></div>
                            <div class="spinner spinner-warning me-3"></div>
                            <div class="spinner spinner-danger me-3"></div>
                            <div class="spinner spinner-success me-3"></div>
                            <div class="spinner spinner-info me-3"></div>
                            <div class="spinner spinner-light me-3"></div>
                            <div class="spinner spinner-dark me-3"></div>
                        </div>
                    </div>
                </div>
                <div class="col-md-12">
                    <div class="card mb-4">
                        <div class="card-body">
                            <div class="card-title mb-4">Bubble Spinners</div>

                            <div class="spinner-bubble spinner-bubble-primary m-5"></div>
                            <div class="spinner-bubble spinner-bubble-secondary m-5"></div>
                            <div class="spinner-bubble spinner-bubble-warning m-5"></div>
                            <div class="spinner-bubble spinner-bubble-danger m-5"></div>
                            <div class="spinner-bubble spinner-bubble-success m-5"></div>
                            <div class="spinner-bubble spinner-bubble-info m-5"></div>
                            <div class="spinner-bubble spinner-bubble-light m-5"></div>
                            <div class="spinner-bubble spinner-bubble-dark m-5"></div>
                        </div>
                    </div>
                </div>

                <div class="col-md-12">
                    <div class="card mb-4">
                        <div class="card-body">
                            <div class="card-title mb-4">Bubble Spinners</div>
                            <div class="loader-bubble loader-bubble-primary m-5"></div>
                            <div class="loader-bubble loader-bubble-secondary m-5"></div>
                            <div class="loader-bubble loader-bubble-success m-5"></div>
                            <div class="loader-bubble loader-bubble-warning m-5"></div>
                            <div class="loader-bubble loader-bubble-danger m-5"></div>
                            <div class="loader-bubble loader-bubble-info m-5"></div>
                            <div class="loader-bubble loader-bubble-light m-5"></div>
                            <div class="loader-bubble loader-bubble-dark m-5"></div>
                        </div>
                    </div>
                </div>
            </div>



@endsection

@section('page-js')

@endsection