Ajax, js - show loading spinner till data comes from mysql database

I have a drop down and it takes few seconds till the data comes from database. During that time the users sees the dropdown empty. I want to show a loading spinner until the data arrives. How can I check if the data arrived or not?

 <?php foreach ($resultman as $print) : ?>
                                <option value="<?php echo $print->Manufacturer; ?>"><?php echo $print->Manufacturer; ?></option>
                            <?php endforeach; ?>
                        </select>
                    </div>

                    <div id="overlay">
                        <div class="cv-spinner">
                            <span class="spinner"></span>
                        </div>
                    </div>


                    <script>
                        jQuery(function($) {
                            $(document).ajaxSend(function() {
                                $("#overlay").fadeIn(300);
                            })
                            $(' #select_manufacturer').click(function() {
                                console.log('your message');
                                    if (($("#select_manufacturer option:selected").val() != 'manufacturer')) {
                                        console.log('your message');
                                        $.ajax({
                                            type: 'GET',
                                            success: function(data) {
                                                console.log(data);
                                            }
                                        }).done(function() {
                                            setTimeout(function() {
                                                $("#overlay").fadeOut(300);
                                            }, 500);
                                        });
                            }});         
                        });
                    </script>

and the css:

 #overlay {
        position: fixed;
        top: 0;
        z-index: 100;
        width: 100%;
        height: 100%;
        display: none;
        background: rgba(0, 0, 0, 0.6);
    }

    .cv-spinner {
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .spinner {
        width: 40px;
        height: 40px;
        border: 4px #ddd solid;
        border-top: 4px #2e93e6 solid;
        border-radius: 50%;
        animation: sp-anime 0.8s infinite linear;
    }