Solution 1 :

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

Problem :

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>

Comments

Comment posted by Paulie_D

You can’t, that’s why we use SVG for these.

Comment posted by Paulie_D

You might be able to position a pseudo-element but that’s a lot of work for something SVg can do naturally.

Comment posted by Kiran Maniya

@Paulie_D Exactly.

Comment posted by Kiran Maniya

Thanks, dude. It helped. I didn’t think about the pseudo-element with empty content.

By

Leave a Reply

Your email address will not be published. Required fields are marked *