client/src/app/signup/success.component.scss

   1 svg {
   2   width: 100px;
   3   display: block;
   4   margin: 40px auto 0;
   5 }
   6
   7 .path {
   8   stroke-dasharray: 1000;
   9   stroke-dashoffset: 0;
  10
  11   &.circle {
  12     -webkit-animation: dash .9s ease-in-out;
  13     animation: dash .9s ease-in-out;
  14   }
  15
  16   &.line {
  17     stroke-dashoffset: 1000;
  18     -webkit-animation: dash .9s .35s ease-in-out forwards;
  19     animation: dash .9s .35s ease-in-out forwards;
  20   }
  21
  22   &.check {
  23     stroke-dashoffset: -100;
  24     -webkit-animation: dash-check .9s .35s ease-in-out forwards;
  25     animation: dash-check .9s .35s ease-in-out forwards;
  26   }
  27 }
  28
  29 p {
  30   text-align: center;
  31   margin: 20px 0 60px;
  32   font-size: 1.25em;
  33
  34   &.success {
  35     color: #73AF55;
  36   }
  37 }
  38
  39
  40 @-webkit-keyframes dash {
  41   0% {
  42     stroke-dashoffset: 1000;
  43   }
  44   100% {
  45     stroke-dashoffset: 0;
  46   }
  47 }
  48
  49 @keyframes dash {
  50   0% {
  51     stroke-dashoffset: 1000;
  52   }
  53   100% {
  54     stroke-dashoffset: 0;
  55   }
  56 }
  57
  58 @-webkit-keyframes dash-check {
  59   0% {
  60     stroke-dashoffset: -100;
  61   }
  62   100% {
  63     stroke-dashoffset: 900;
  64   }
  65 }
  66
  67 @keyframes dash-check {
  68   0% {
  69     stroke-dashoffset: -100;
  70   }
  71   100% {
  72     stroke-dashoffset: 900;
  73   }
  74 }