.loader_campo{
 position: fixed;
 content: '';
 width: 2rem;
 height: 2rem;
 border: 5px solid lightBlue;
 border-radius: 50%;
 overflow: hidden;
 transition: 0.3s;
 box-shadow: 0rem 0rem 0.6rem rgba(0, 0, 0, 0.3);
 animation: spin 1s linear infinite;
}
.success {
 background: lightGreen;
 border-color: lightGreen;
}
.fail {
 background: #ffcccb;
 border-color: #ffcccb;
}
.loader_campo.success::before {
 height: 3px;
 width: 1.5rem;
 position: absolute;
 top: 65%;
 left: 44%;
 background-color: green;
 transform: rotate(-45deg);
 transform-origin: 0% 50%;
 border-radius: 5px;
 animation: baseGrow 1s;
 content: '';
}
.loader_campo.success::after {
 height: 3px;
 width: 0.6rem;
 position: absolute;
 top: 65%;
 left: 50%;
 background-color: green;
 transform: rotate(-135deg);
 transform-origin: 0% 50%;
 border-radius: 5px;
 animation: tipGrow 1s;
 content: '';
}
.loader_campo.fail::before {
 width: 3rem;
 height: 0.3rem;
 background: darkRed;
 transform-origin: 50% 50%;
 top: calc(50% - 0.25rem);
 left: calc(50% - 1.5rem);
 transform: rotate(45deg);
 position: absolute;
 content: '';
 border-radius: 10px;
 animation: leftIn 0.3s linear;
 content: '';
}
.loader_campo.fail::after {
 width: 3rem;
 height: 0.3rem;
 background: darkRed;
 transform-origin: 50% 50%;
 top: calc(50% - 0.25rem);
 right: calc(50% - 1.5rem);
 transform: rotate(-45deg);
 position: absolute;
 content: '';
 border-radius: 10px;
 animation: rightIn 0.3s linear;
 content: '';
}
.loader_campo.success, .loader_campo.fail {
 animation: pop 1.2s ease-in-out;
}
@keyframes spin {
 0% {
   transform: rotate(0deg);
   border-top: 5px solid blue;
}
 100% {
   transform: rotate(360deg);
   border-top: 5px solid blue;
}
}
@keyframes tipGrow {
 0% {
   width: 0px;
   left: 0;
   top: 0;
}
 25% {
   width: 0px;
   left: 0;
   top: 0;
}
 50% {
   top: 0%;
   left: 0%;
   width: 0;
}
 75% {
   top: 0%;
   left: 0%;
   width: 0rem;
}
 100% {
   top: 65%;
   left: 50%;
   width: 1.5rem;
}
}
@keyframes baseGrow {
 0% {
   width: 0;
}
 90% {
   width: 0;
}
 100% {
   width: 2.5rem;
}
}
@keyframes pop {
 0% {
   transform: scale(1);
}
 80% {
   transform: scale(1);
}
 100% {
   transform: scale(1.1);
}
}
@keyframes leftIn {
 0% {
   left: 0;
   top: 0;
   width: 0;
}
 100% {
   top: calc(50% - 0.25rem);
   left: calc(50% - 1.5rem);
   width: 3rem;
}
}
@keyframes rightIn {
 0% {
   rigth: 0;
   top: 0;
   width: 0;
}
 100% {
   top: calc(50% - 0.25rem);
   right: calc(50% - 1.5rem);
   width: 3rem;
}
}