.pace { -webkit-pointer-events: none; pointer-events: none; -webkit-user-select: none; -moz-user-select: none; user-select: none; } .pace-inactive { display: none; } .pace .pace-progress { background: var(--background-progress); position: fixed; z-index: 2000; top: 0; right: 100%; width: 100%; height: 1px; } .pace .pace-progress-inner { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2000; } .pace .pace-activity { display: block; position: fixed; z-index: 2000; left: 50%; top: 50%; width: 100px; height: 100px; margin: -50px 0 0 -50px; border-radius: 50%; border: 3px solid transparent; border-top-color: #3498db; -webkit-animation: pace-spinner 2s linear infinite; animation: pace-spinner 2s linear infinite; } .pace .pace-activity:before { content: ""; position: absolute; top: 5px; left: 5px; right: 5px; bottom: 5px; border-radius: 50%; border: 3px solid transparent; border-top-color: #e74c3c; -webkit-animation: pace-spinner 3s linear infinite; animation: pace-spinner 3s linear infinite; } .pace .pace-activity:after { content: ""; position: absolute; top: 15px; left: 15px; right: 15px; bottom: 15px; border-radius: 50%; border: 3px solid transparent; border-top-color: #f9c922; -webkit-animation: pace-spinner 1.5s linear infinite; animation: pace-spinner 1.5s linear infinite; } @-webkit-keyframes pace-spinner { 0% { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes pace-spinner { 0% { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } }