/* @import url("https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i"); */ @import url("https://fonts.googleapis.com/css?family=Roboto:400,500,600,700,800"); body { padding: 0; margin: 0; } #app-site { display: flex; width: 100%; height: 100vh; } .loader { position: relative; margin: 0 auto; width: 60px; height: 100%; } .loader:before { content: ""; display: block; padding-top: 100%; } .circular { animation: rotate 2s linear infinite; -webkit-animation: rotate 2s linear infinite; height: auto; transform-origin: center center; -webkit-transform-origin: center center; width: 100%; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; } .path { stroke-dasharray: 1, 200; stroke-dashoffset: 0; animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite; -webkit-animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite; stroke-linecap: round; } @keyframes rotate { 100% { transform: rotate(360deg); } } @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 color { 100%, 0% { stroke: #0471CA; } 40% { stroke: #0471CA; } 66% { stroke: #0471CA; } 80%, 90% { stroke: #0471CA; } } @-webkit-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; } } @-webkit-keyframes color { 100%, 0% { stroke: #0471CA; } 40% { stroke: #0471CA; } 66% { stroke: #0471CA; } 80%, 90% { stroke: #0471CA; } } /*# sourceMappingURL=loader.css.map */