:root{--brand-success:#0062ff;--loader-size:10em;--check-height:calc(var(--loader-size)/2);--check-width:calc(var(--check-height)/2);--check-left:calc(calc(var(--loader-size)/6) + calc(var(--loader-size)/12));--check-thickness:3px;--check-color:var(--brand-success)}.circle-loader{margin-bottom:calc(var(--loader-size)/2);border:1px solid rgba(0,0,0,.2);border-left:1px solid var(--check-color);animation:loader-spin 1.2s linear infinite;position:relative;display:inline-block;vertical-align:top;border-radius:50%;width:var(--loader-size);height:var(--loader-size)}.load-complete{animation:none;border-color:var(--check-color);transition:border .5s ease-out}.checkmark{display:none}.checkmark.draw:after{animation-duration:.8s;animation-timing-function:ease;animation-name:checkmark;transform:scaleX(-1) rotate(135deg)}.checkmark:after{opacity:1;height:var(--check-height);width:var(--check-width);transform-origin:left top;border-right:var(--check-thickness) solid var(--check-color);border-top:var(--check-thickness) solid var(--check-color);content:"";left:var(--check-left);top:var(--check-height);position:absolute}@keyframes loader-spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes checkmark{0%{height:0;width:0;opacity:1}20%{height:0;width:var(--check-width);opacity:1}40%{height:var(--check-height);width:var(--check-width);opacity:1}to{height:var(--check-height);width:var(--check-width);opacity:1}}