rubygems/rubygems.org

.status-icon {
  width: 100px;
  display: block;
  margin: 40px auto 0; }

.status-icon .path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 0; }

.status-icon .path.circle {
  animation: dash .9s ease-in-out; }

.status-icon .path.line {
  stroke-dashoffset: 1000;
  animation: dash .9s .35s ease-in-out forwards; }

.status-icon .path.check {
  stroke-dashoffset: -100;
  animation: dash-check .9s .35s ease-in-out forwards; }

.status {
  text-align: center;
  margin: 20px 0 60px;
  font-size: 1.25rem; }

.status p {
  margin-bottom: 1rem;
}

.status.error {
  color: #D06079; }

.status.success {
  color: #73AF55; }

@keyframes dash {
  0% {
    stroke-dashoffset: 1000; }

  100% {
    stroke-dashoffset: 0;
  } }

@keyframes dash-check {
  0% {
    stroke-dashoffset: -100; }

  100% {
    stroke-dashoffset: 900;
  } }