.ring
        {
          position:absolute;
          top:79%;
          left:50%;
          transform:translate(-50%, -50%);
          width:70px;
          height:70px;
          border:3px solid #3d3d3d;
          border-radius:50%;
          text-align:center;
          line-height:50px;
          letter-spacing:4px;
          text-transform:uppercase;
          color:#fff000;
          text-shadow:0 0 15px #fff000;
          box-shadow:0 0 20px rgba(0,0,0,.5);
        }
        .ring:before
        {
          content:'';
          display:block;
          position:absolute;
          top:-3px;
          left:-3px;
          width:100%;
          height:100%;
          border:3px solid transparent;
          border-top:3px solid #fff000;
          border-left:3px solid transparent;
          border-right:3px solid #fff000;
          border-radius:50%;
          animation:ani-cyle  2s linear infinite;
        }
        span
        {
          position:absolute;
          width:50%;
          height:4px;
          display:block;
          top:calc(50% - 2px);
          left:50%;
          background:none;
          animation:animate 2s linear infinite;
          transform-origin:left;
        }
        span:after
        {
          content:'';
          width:16px;
          height:16px;
          background:#fff000;
          border-radius:50%;
          box-shadow: 0 0 20px #fff000;
          position:absolute;
          right:-8px;
          top:calc(50% - 8px);
        }

        @keyframes ani-cyle
        {
          0%{
            transform:rotate(0deg);
          }
          100%{
            transform:rotate(360deg);
          }
          
        }

        @keyframes animate
        {
          0%{
            transform:rotate(45deg);
          }
          100%{
            transform:rotate(405deg);
          }
          
        }