blob: fbc27c8bc1a6be224993598896f72c27f2169f8e (
plain) (
tree)
|
|
svg {
width: 100px;
display: block;
margin: 40px auto 0;
}
.path {
stroke-dasharray: 1000;
stroke-dashoffset: 0;
&.circle {
-webkit-animation: dash .9s ease-in-out;
animation: dash .9s ease-in-out;
}
&.line {
stroke-dashoffset: 1000;
-webkit-animation: dash .9s .35s ease-in-out forwards;
animation: dash .9s .35s ease-in-out forwards;
}
&.check {
stroke-dashoffset: -100;
-webkit-animation: dash-check .9s .35s ease-in-out forwards;
animation: dash-check .9s .35s ease-in-out forwards;
}
}
.bottom-message {
text-align: center;
margin: 20px 0 60px;
font-size: 1.25em;
color: #73AF55;
}
.alert {
font-size: 15px;
text-align: center;
}
@-webkit-keyframes dash {
0% {
stroke-dashoffset: 1000;
}
100% {
stroke-dashoffset: 0;
}
}
@keyframes dash {
0% {
stroke-dashoffset: 1000;
}
100% {
stroke-dashoffset: 0;
}
}
@-webkit-keyframes dash-check {
0% {
stroke-dashoffset: -100;
}
100% {
stroke-dashoffset: 900;
}
}
@keyframes dash-check {
0% {
stroke-dashoffset: -100;
}
100% {
stroke-dashoffset: 900;
}
}
|