<style>
.stroke-anim {
animation: stroke-anim 0.75s ease-in-out 0s 1 forwards;
}
.check-anim {
animation: check-anim 0.35s ease-in-out 0.5s 1 forwards;
}
.symbol-anim {
animation: symbol-anim 0.35s ease-in-out 0.5s 1 forwards;
}
@keyframes stroke-anim {
0% {
stroke-dashoffset: 60;
}
100% {
stroke-dashoffset: 0;
}
}
@keyframes check-anim {
0% {
stroke-dashoffset: 28;
}
100% {
stroke-dashoffset: 0;
}
}
@keyframes symbol-anim {
0% {
stroke-dashoffset: 7;
}
100% {
stroke-dashoffset: 0;
}
}
.delay-05 {
animation-delay: 0.5s;
}
</style>
<div class="d-flex a-i-center p-24 m-24 p-b-0" [ngClass]="{ 'd-col j-c-center': vertical }">
<svg *ngIf="type === 'success'" viewBox="0 0 24 24" [ngStyle]="{ 'max-width.px': size || 64 }">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
<polyline
stroke="var(--input-validation-success, #008800)"
stroke-width="2"
stroke-linejoin="round"
points="7.8678862 11.508 11.9656988 15.984 20.2137797 7.44836856"
class="check-anim"
stroke-dasharray="28"
stroke-dashoffset="28"
></polyline>
<path
d="M18.3656773,3.02795925 C16.5689809,1.75089408 14.3721808,1 12,1 C5.92486775,1 1,5.92486775 1,12 C1,18.0751322 5.92486775,23 12,23 C18.0751322,23 23,18.0751322 23,12"
id="Path"
class="stroke-anim"
stroke="var(--input-validation-success, #008800)"
stroke-width="2"
stroke-dasharray="60"
stroke-dashoffset="60"
></path>
</g>
</svg>
<svg *ngIf="type === 'error'" viewBox="0 0 24 24" [ngStyle]="{ 'max-width.px': size || 64 }">
<g id="Artboard-Copy-3" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<line
x1="12"
y1="13.5356315"
x2="12"
y2="7"
id="Path-2"
stroke="var(--input-validation-error, #E0000E)"
class="symbol-anim"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
stroke-dasharray="7"
stroke-dashoffset="7"
></line>
<line
x1="12"
y1="17.7678157"
x2="12"
y2="17.2321843"
id="Path-2"
stroke="var(--input-validation-error, #E0000E)"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
stroke-dasharray="7"
stroke-dashoffset="7"
class="symbol-anim"
></line>
<circle
id="Oval"
stroke="var(--input-validation-error, #E0000E)"
stroke-width="2"
cx="12"
cy="12"
r="11"
class="stroke-anim"
stroke-dasharray="70"
stroke-dashoffset="70"
stroke-linejoin="round"
></circle>
</g>
</svg>
<svg *ngIf="type === 'warning'" viewBox="0 0 24 24" [ngStyle]="{ 'max-width.px': size || 64 }">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<line
x1="12"
y1="13.5356315"
x2="12"
y2="7"
id="Path-2"
stroke="var(--input-validation-warning, #FF801F)"
class="symbol-anim"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
stroke-dasharray="7"
stroke-dashoffset="7"
></line>
<line
x1="12"
y1="17.7678157"
x2="12"
y2="17.2321843"
id="Path-2"
stroke="var(--input-validation-warning, #FF801F)"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
stroke-dasharray="7"
stroke-dashoffset="7"
class="symbol-anim"
></line>
<g
fill-rule="nonzero"
stroke="var(--input-validation-warning, #FF801F)"
stroke-width="2"
class="stroke-anim"
stroke-dashoffset="1000"
stroke-dasharray="90"
stroke-linecap="round"
stroke-linejoin="round"
stroke-linejoin="round"
>
<path d="M12,1 L23,21 L1,21 L12,1 Z" id="Path"></path>
</g>
</g>
</svg>
<p *ngIf="text" class="text-center text-medium animated fadeIn delay-05 m-8">
{{ text }}
</p>
</div>