0
I’m trying to implement a Download in an angular project while requesting the request. but I’m not getting to position it in the center of the screen superimposing the other Ivs... look how it’s getting, only appears a tip of it in the image and above without overlapping the content
The unloader I’m using is this https://codepen.io/WebSonata/pen/bRaONB below follows the css code and after the html of my project:
the css:
.row{
margin-top:50px;
}
.img{
margin-left: 50px;
margin-bottom: 20px;
}
.inputfile {
width: 0.1px;
height: 0.1px;
opacity: 0;
overflow: hidden;
position: absolute;
z-index: -1;
}
.inputfile + label {
font-size: 1.25em;
font-weight: 700;
color: white;
background-color: black;
display: inline-block;
}
.inputfile:focus + label,
.inputfile + label:hover {
background-color: red;
}
.inputfile + label {
cursor: pointer; /* "hand" cursor */
}
.inputfile:focus + label {
outline: 1px dotted #000;
outline: -webkit-focus-ring-color auto 5px;
}
.inputfile + label * {
pointer-events: none;
}
// --------- a parte do loader é essa
#preloader {
position: relative;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#loader {
display: block;
position: relative;
left: 50%;
top: 50%;
width: 150px;
height: 150px;
margin: -75px 0 0 -75px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: #9370DB;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
#loader:before {
content: "";
position: absolute;
top: 5px;
left: 5px;
right: 5px;
bottom: 5px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: #BA55D3;
-webkit-animation: spin 3s linear infinite;
animation: spin 3s linear infinite;
}
#loader:after {
content: "";
position: absolute;
top: 15px;
left: 15px;
right: 15px;
bottom: 15px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: #FF00FF;
-webkit-animation: spin 1.5s linear infinite;
animation: spin 1.5s linear infinite;
}
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes spin {
0% {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
and html:
<app-navbar></app-navbar>
<div id="preloader" *ngIf="loader">
<div id="loader"></div>
</div>
<div><div class="container-fluid">
<form novalidate [formGroup]="formulario" (ngSubmit)="cadastrar()">
<div class="row">
<div class="col-lg-4 col-md-5">
<div class="card card-user">
<div class="image">
<div *ngIf="!data.image">
<img [src]="nomeFoto" class="img" />
</div>
<div *ngIf="click">
<img-cropper #cropper [image]="data" [settings]="cropperSettings" class="img"></img-cropper>
</div>
<input type="file" name="file" id="custom-input" class="btn btn-primary" accept="image/*" (change)="fileChangeListener($event)">
</div>
</div>
<div class="card">
<div class="header">
<h4 class="title">Termos de Uso</h4>
</div>
<div class="content">
</div>
</div>
</div>
<div class="col-lg-8 col-md-7">
<div class="card" style="padding: 30px;">
<div class="header">
<h4 class="title">Cadastro</h4>
</div>
<div class="content">
<div class="row">
<div class="col-md-5">
<div class="form-group">
<label>Nome</label>
<input type="text" class="form-control" placeholder="Nome" formControlName="nome">
<small *ngIf="!formulario.get('nome').valid && formulario.get('nome').touched" class="form-text text-danger">Campo Obrigatorio</small>
</div>
</div>
<div class="col-md-7">
<div class="form-group">
<label>Sobrenome</label>
<input type="text" class="form-control border-input" placeholder="Sobrenome" formControlName="sobrenome">
<small *ngIf="!formulario.get('sobrenome').valid && formulario.get('sobrenome').touched" class="form-text text-danger">Campo Obrigatorio</small>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label>Email</label>
<input type="email" class="form-control border-input" placeholder="Email" formControlName="email">
<small *ngIf="!formulario.get('email').valid && formulario.get('email').touched" class="form-text text-danger">Email Invalido</small>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Repita o Email</label>
<input type="email" class="form-control border-input" placeholder="Repita o Email" formControlName="email2">
<small *ngIf="!formulario.get('email2').valid && formulario.get('email2').touched" class="form-text text-danger">Os emails nao sao iguais</small>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label>Senha</label>
<input type="password" class="form-control border-input" placeholder="Senha" formControlName="senha">
<small *ngIf="!formulario.get('senha').valid && formulario.get('senha').touched" class="form-text text-danger">A senha deve ter pelo menos 6 caracteres</small>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Repita a Senha</label>
<input type="password" class="form-control border-input" placeholder="Repita a Senha" formControlName="senha2">
<small *ngIf="!formulario.get('senha2').valid && formulario.get('senha2').touched" class="form-text text-danger">As senhas nao sao iguais</small>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label>Sobre Mim</label>
<textarea rows="5" class="form-control border-input" placeholder="Escreva um pouco sobre você" formControlName="sobreMim">
Oh so, your weak rhyme
You doubt I'll bother, reading into it
I'll probably won't, left to my own devices
But that's the difference in our opinions.</textarea>
</div>
</div>
</div>
<div class="text-center">
<button type="submit" class="btn btn-info btn-fill btn-wd" >Cadastrar</button>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
<!-- Modals -->
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" #abrirModalEmailJaExiste [hidden]="true" data-target="#emailJaExisteModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="emailJaExisteModal" tabindex="-1" role="dialog" aria-labelledby="emailJaExisteModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="emailJaExisteModalLabel">{{tituloModal}}</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>{{mensagemModal}}</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>
</div>
</div>
</div>
</div>
</div>
whoops, thank you very much
– Davi Resio