<template>
    <transition name="modal">
        <div v-if="modalIsOpen">
            <div class="overlay">
                <div class="modalDiv">
                    <div class="spinner-border text-success">
                        <span class="sr-only">Loading...</span>
                    </div>
                </div>
            </div>
        </div>
    </transition>
</template>

<style scoped>
    .modalDiv{
        margin: 0px auto;
        padding: 20px;
        background-color: #fff;
        border-radius: 20px;
        box-shadow: 0 2px 8px 3px;
        transition: all 0.2s ease-in;
        font-family: Helvetica, Arial, sans-serif;
        max-height: 100%;
        overflow-y: auto;
    }

    .fadeIn-enter {
      opacity: 0;
    }

    .fadeIn-leave-active {
      opacity: 0;
      transition: all 0.2s step-end;
    }

    .fadeIn-enter .modal,
    .fadeIn-leave-active.modal {
      transform: scale(1.1);
    }

    .overlay {
      position: fixed;
      top: 0;
      left: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 100%;
      background: #00000094;
      z-index: 999;
      transition: opacity 0.2s ease;
    }
</style>

<script>
    export default {
        name: "loading",
        data: function () {
            return {
                modalIsOpen: true,
            }
        }
    }
</script>