Kevin Powell - Community•2mo ago

how to calculate border values based on height and width in css for loaders

https://codepen.io/Vicky-clowdy/pen/GRVeYqy In this code i set 50px for height and width and set 8px for border So currently I create basic loaders for my project in react as re usable so I can reuse Currently I use this formula like const loader size = size * 0.16 Here size will be same for both height and width , For eg if I set size as 50 , width will 50px and height will be 50px So what I need is , is there any better formula ?

Vicky-clowdy

CodePen

Untitled

...

2 Replies

MarkBoots•2mo ago

if you want the border size to be a percentage of the element size, you could mimic the border with a background. that accepts percentages. something like this

#loader{
  height: 50px;
  aspect-ratio: 1;
  border-radius: 50%;
  --border-size: 16%;
  --border-color: red;
  
  background: conic-gradient(var(--border-color) 25%, #0000 0); /* quarter circle */
  mask-image: /* hide the inner part */
    radial-gradient(100% 100%, 
      #0000 calc(50% - var(--border-size) - 1px), 
      #000  calc(50% - var(--border-size))
    );
  animation: spin 1s linear infinite;
  
}
@keyframes spin { to { rotate: 1turn } }

#loader{
  height: 50px;
  aspect-ratio: 1;
  border-radius: 50%;
  --border-size: 16%;
  --border-color: red;
  
  background: conic-gradient(var(--border-color) 25%, #0000 0); /* quarter circle */
  mask-image: /* hide the inner part */
    radial-gradient(100% 100%, 
      #0000 calc(50% - var(--border-size) - 1px), 
      #000  calc(50% - var(--border-size))
    );
  animation: spin 1s linear infinite;
  
}
@keyframes spin { to { rotate: 1turn } }

other option could be to use container units in a pseudo element

#loader{
  height: 50px;
  aspect-ratio: 1;
  --border-color: red;
  --border-size: 16;
  border-radius: 50%;
  display: grid;
  container-type: inline-size;
  animation: spin 1s linear infinite;
  
  &::after{
    content: "";
    grid-area: 1/1;
    border: calc(1cqi * var(--border-size)) solid transparent;
    border-top-color: var(--border-color);
    border-radius: inherit;
  }
}

#loader{
  height: 50px;
  aspect-ratio: 1;
  --border-color: red;
  --border-size: 16;
  border-radius: 50%;
  display: grid;
  container-type: inline-size;
  animation: spin 1s linear infinite;
  
  &::after{
    content: "";
    grid-area: 1/1;
    border: calc(1cqi * var(--border-size)) solid transparent;
    border-top-color: var(--border-color);
    border-radius: inherit;
  }
}

vicOP•2mo ago

I prefer this answer , thank u

Gaming

Programming

how to calculate border values based on height and width in css for loaders