Spinner ring

<div class="spinner" role="status"><span class="sr">Loading</span></div>

.spinner{width:56px;height:56px;border-radius:50%;border:5px solid #3a2220;border-top-color:#f08a5d;animation:spin .8s linear infinite}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@keyframes spin{to{transform:rotate(360deg)}}

<!doctype html>
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Spinner ring</title>
<style>
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{display:grid;place-items:center;background:#140807;color:#fffffc;font:16px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif}
.spinner{width:56px;height:56px;border-radius:50%;border:5px solid #3a2220;border-top-color:#f08a5d;animation:spin .8s linear infinite}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@keyframes spin{to{transform:rotate(360deg)}}
</style></head>
<body><div class="spinner" role="status"><span class="sr">Loading</span></div></body></html>