"Success and Error Icon Animation"
Bootstrap 4.1.1 Snippet by sumi9xm

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="swal2-icon swal2-success swal2-animate-success-icon" style="display: flex;">
<div class="swal2-success-circular-line-left" style="background-color: rgb(255, 255, 255);"></div>
<span class="swal2-success-line-tip"></span>
<span class="swal2-success-line-long"></span>
<div class="swal2-success-ring"></div>
<div class="swal2-success-fix" style="background-color: rgb(255, 255, 255);"></div>
<div class="swal2-success-circular-line-right" style="background-color: rgb(255, 255, 255);"></div>
</div>
<div class="swal2-icon swal2-error swal2-animate-error-icon" style="display: flex;"><span class="swal2-x-mark"><span class="swal2-x-mark-line-left"></span><span class="swal2-x-mark-line-right"></span></span></div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
@-webkit-keyframes swal2-show{
0%{
-webkit-transform:scale(.7);
transform:scale(.7)
}
45%{
-webkit-transform:scale(1.05);
transform:scale(1.05)
}
80%{
-webkit-transform:scale(.95);
transform:scale(.95)
}
100%{
-webkit-transform:scale(1);
transform:scale(1)
}
}
@keyframes swal2-show{
0%{
-webkit-transform:scale(.7);
transform:scale(.7)
}
45%{
-webkit-transform:scale(1.05);
transform:scale(1.05)
}
80%{
-webkit-transform:scale(.95);
transform:scale(.95)
}
100%{
-webkit-transform:scale(1);
transform:scale(1)
}
}
@-webkit-keyframes swal2-hide{
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments:

You don't need any of the dependencies you declare. You don't wear bootstrap or jquery. Which makes it even better!

ortizman () - 5 years ago - Reply 0


Can you create a loading icon please?

millsey () - 5 years ago - Reply 0


Can you please add warning icon too?

sohailcomsians () - 5 years ago - Reply 0