наложение компонента загрузчика внутри контейнера div - PullRequest
Новая
       22

наложение компонента загрузчика внутри контейнера div

0 голосов
/ 26 марта 2020

У меня есть загрузчик внутри div. Когда мой компонент находится в режиме загрузки, я хочу визуализировать загрузчик точно в центре указанного контейнера div. Я также хочу уменьшить непрозрачность контейнера div, пока компонент находится в режиме загрузки.

Как и мне, мне удалось получить загрузчик внутри контейнера div, и он рендерится только когда я нажимаю 'LOGIN', который устанавливает isLoading в true, пока он выбирает необходимую информацию. Тем не менее, это отвод в сторону, а не в центре, как я хочу. Кроме того, я не уверен, как уменьшить непрозрачность, только когда isLoading имеет значение true.

Вот соответствующий код из компонента входа в систему. Обратите внимание, что контейнер div имеет имя className main-div, а компонент загрузчика имеет className login-loader: 

 <div className="main-div">

                <div className="form-div">
                    <h2 className="form-heading">Welcome Back</h2>

                    <form className="login-form" onSubmit={accountType === 'vendor' ? submitVendor : submitDiner}>
                        <input type="text" name="username" value={credentials.username} placeholder="Enter username" onChange={handleLoginChange} />
                        <input type="password" name="password" value={credentials.password} placeholder="Enter password" onChange={handleLoginChange} />


                        <select className="form-control select" onChange={handleTypeChange}>
                            <option disabled value="initial">
                                Account Type
                            </option>
                            <option value="vendor">Vendor</option>
                            <option value="diner">Diner</option>
                        </select>
                        <button type="submit">Login</button>
                        <p>Don't have an account?</p>
                        <a href="/register"><p>Sign up!</p></a>
                    </form>
                </div>

                <ScrollAnimation animateIn="fadeIn" className="img-div">
                    <img src={truckPic} alt="food truck" />
                </ScrollAnimation>
                {props.isLoading && <Loader className="login-loader" type="ThreeDots" color="#somecolor" height={80} width={80} />}
            </div>

Вот стиль из кода s css: 

.main-div {
    padding: 1rem;
    background: #e6ebf5;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    align-items: center;

    .form-div {
        width: 50%;
        height: 100%;
        display: flex;
        flex-direction: column;
        margin-top: 0px;
        padding: 0px;



        .form-heading {
            margin-bottom: 4%;
            font-size: 2rem;
            font-family: "Acme";
        }

        .login-form {
            display: flex;
            flex-direction: column;
            align-items: center;
            input {
                margin-bottom: 2%;
                width: 85%;
                padding: 18.5px 14px;
                border: 0.75px solid lightgrey;
                font-family: "Acme";
                color: currentColor;
                background: none;
                box-sizing: content-box;
                animation-name: mui-auto-fill-cancel;
                -webkit-tap-highlight-color: transparent;

            }

            select {
                width: 30%;
                margin-bottom: 3%;
            }

            button {
                margin-bottom: 3%;
                background-color: #28243d;
                color: #fff;
                padding: 6px 8px;
                font-family: "Roboto", "Helvetica", "Arial", sans-serif;
                font-weight: 500;
                border-radius: 4px;
                transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
                text-transform: uppercase;
            }

            p {
                margin-bottom: 1%;
                font-size: 0.8rem;
            }
        }
    }

    .img-div {
        width: 50%;

        img {
            width: 100%;
        }
    }
}

.login-loader {
    margin-left: auto;
    margin-right: auto;
    position: relative;
    text-align: center;
    z-index: 10;
}
...