SVG Spinner

<style type="text/css">
	.spinner-container {
          animation: rotate 2s linear infinite;
          -webkit-animation: rotate 2s linear infinite;
      }

      .spinner-container .path {
          stroke-dasharray: 1,150; /* 1%, 101% circumference */
          stroke-dashoffset: 0;
          stroke: rgba(27, 154, 89, 0.7);
          stroke-linecap: round;
          animation: dash 1.5s ease-in-out infinite;
          -webkit-animation: dash 1.5s ease-in-out infinite;
      }
      @keyframes rotate{
          100% { transform: rotate(360deg); }
      }

      @keyframes dash {
            0% {
              stroke-dasharray: 1,150;  /* 1%, 101% circumference */
              stroke-dashoffset: 0;
          }
          50% {
              stroke-dasharray: 90,150; /* 70%, 101% circumference */
              stroke-dashoffset: -35;   /* 25% circumference */
          }
          100% {
              stroke-dasharray: 90,150; /* 70%, 101% circumference */
              stroke-dashoffset: -124;  /* -99% circumference */
          }
      }

      @-webkit-keyframes rotate{
          100% { transform: rotate(360deg); }
      }

      @-webkit-keyframes dash {
            0% {
              stroke-dasharray: 1,150;  /* 1%, 101% circumference */
              stroke-dashoffset: 0;
          }
          50% {
              stroke-dasharray: 90,150; /* 70%, 101% circumference */
              stroke-dashoffset: -35;   /* 25% circumference */
          }
          100% {
              stroke-dasharray: 90,150; /* 70%, 101% circumference */
              stroke-dashoffset: -124;  /* -99% circumference */
          }
      }

</style>
<svg class="spinner-container" width="65px" height="65px" viewBox="0 0 52 52">
      <circle class="path" cx="26px" cy="26px" r="20px" fill="none" stroke-width="4px" />
    </svg>