You can do it with some background applied to a pseudo element:
.loader {
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 120px;
height: 120px;
animation: spin 2s linear infinite;
position:relative;
}
.loader::before {
content:"";
position:absolute;
width:100%;
top:0;
height:20px;
--rad:radial-gradient(circle 8px,#3498db 99%,transparent 100%);
background:
var(--rad) left -14px top 0,
var(--rad) right -14px top 0;
background-size:200% 100%;
}
@keyframes spin {
100% {
transform: rotate(360deg);
}
}
<div class="loader"></div>
Related question to get a different idea: CSS curved line with rounded
I have a css loader with infinite spin animation, I want the border line cap rounded, Is there any trick to get the border stroke line cap rounded? I tried stroke-linecap: round; but seems only for SVG, How to apply it to the html element border?
.loader {
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 120px;
height: 120px;
-webkit-animation: spin 2s linear infinite; /* Safari */
animation: spin 2s linear infinite;
}
@-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="loader"></div>
</body>
</html>
You can’t, that’s why we use SVG for these.
You might be able to position a pseudo-element but that’s a lot of work for something SVg can do naturally.
@Paulie_D Exactly.
Thanks, dude. It helped. I didn’t think about the pseudo-element with empty content.
