.circular { -webkit-animation: rotate 2s linear infinite; animation: rotate 2s linear infinite; } .path { stroke-dasharray: 1, 200; stroke-dashoffset: 0; stroke: white; -webkit-animation: dash 1.5s ease-in-out infinite!important; animation: dash 1.5s ease-in-out infinite!important; stroke-linecap: round; } @-webkit-keyframes rotate { 100% { transform: rotate(360deg); } } @keyframes rotate { 100% { transform: rotate(360deg); } } @-webkit-keyframes dash { 0% { stroke-dasharray: 1, 200; stroke-dashoffset: 0; } 50% { stroke-dasharray: 89, 200; stroke-dashoffset: -35px; } 100% { stroke-dasharray: 89, 200; stroke-dashoffset: -124px; } } @keyframes dash { 0% { stroke-dasharray: 1, 200; stroke-dashoffset: 0; } 50% { stroke-dasharray: 89, 200; stroke-dashoffset: -35px; } 100% { stroke-dasharray: 89, 200; stroke-dashoffset: -124px; } } .showbox { position: absolute; top: 0; bottom: 0; left: 0; right: 0; padding: 5%; }