below is the design where the animation moves around the card, the issue is when the light reaches the top left corner it disappears because the corner has a radius of 80px can anyone tell me how I can bring the animation travel on the box border so that it will remain visible on the top right corner:

def display_animated_box(width: int = 450, height: int = 480):
    """
    Displays an animated box with a card-like shape, featuring customizable dimensions in a Streamlit app.

    Args:
        width (int): The width of the animated box in pixels.
        height (int): The height of the animated box in pixels.
    """
    html_content = f"""
    <div class="holder" style="width: {width}px; height: {height}px; position: relative;">
      <div class="bar left"></div>
      <div class="bar top"></div>
      <div class="bar right"></div>
      <div class="bar bottom"></div>
    </div>

    <style>
    .holder {{
        position: relative;
        width: {width}px;
        height: {height}px;
        background: var(--clr);
        border-radius: 10px;
        border-top-left-radius: 80px;
        overflow: hidden;
    }}
    .bar {{
        background: #d0f0dd;
        box-shadow: 0px 0px 0 #40ff22,
                    0px 0px 4px #30ff1f,
                    0px 0px 8px #20ff1b,
                    0px 0px 16px #10ff18;
        position: absolute;
    }}
    .left {{
        width: 4px;
        animation: left 10s linear infinite;
    }}
    @keyframes left {{
        0%  {{height: 0; top: {height - 4}px; left: 0;}}
        20% {{height: {height}px; top: 0; left: 0;}}
        40% {{height: 0; top: 0; left: 0;}}
    }}
    .top {{
        height: 4px;
        animation: top 10s linear infinite;
    }}
    @keyframes top {{
        0%  {{width: 0; top: 0; left: 0;}}
        20% {{width: 0; top: 0; left: 0;}}
        40% {{width: {width}px; top: 0; left: 0;}}
        60% {{width: 0; top: 0; left: {width}px;}}
    }}
    .right {{
        width: 4px;
        animation: right 10s linear infinite;
    }}
    @keyframes right {{
        0%  {{height: 0; top: 0; left: {width - 4}px;}}
        40% {{height: 0; top: 0; left: {width - 4}px;}}
        60% {{height: {height}px; top: 0; left: {width - 4}px;}}
        80% {{height: 0; top: {height}px;left: {width - 4}px;}}
    }}
    .bottom {{
        height: 4px;
        animation: bottom 10s linear infinite;
    }}
    @keyframes bottom {{
        0%  {{width: 0; top: {height - 4}px; left: {width - 4}px;}}
        60% {{width: 0; top: {height - 4}px; left: {width - 4}px;}}
        80% {{width: {width}px; top: {height - 4}px; left: 0;}}
        100% {{width: 0; top: {height - 4}px; left: 0;}}
    }}
    </style>
    """
    st.html(html_content)

display_animated_box()

Below I am pasting the animation if you can modefy below code that will also work what i neeed is just give radious to the top levt corner and make the animation move around that corner instead of fetting it disappear:

<div class="holder">  
 <div class="bar left"></div>
  <div class="bar top"></div>
  <div class="bar right"></div>
  <div class="bar bottom"></div>
</div>

    body{
  background: #222;
  margin: 0;
}
.holder{
  /*approx center*/
  position: absolute;
  top: 45%;
  left: 45%;
}
  
.bar{
  background: #d0f0dd;
  box-shadow: 0px 0px 0 #40ff22,
    0px 0px 4px #30ff1f,
    0px 0px 8px #20ff1b,
    0px 0px 16px #10ff18;
  border-radius: 4px;
  position: absolute;
}
.left{
  width: 4px;
  -webkit-animation: left 2s linear infinite;
}
@-webkit-keyframes left{
  0%  {height: 0; top: 96px; left: 0;}
  20% {height: 100px; top: 0; left: 0;}
  40% {height: 0; top: 0; left: 0;}
}
.top{
  height: 4px;
  -webkit-animation: top 2s linear infinite;
}
@-webkit-keyframes top{
  0%  {width: 0; top: 0; left: 0;}
  20% {width: 0; top: 0; left: 0;}
  40% {width: 100px; top: 0; left: 0;}
  60% {width: 0; top:0; left: 100px;}
}
.right{
  width: 4px;
  -webkit-animation: right 2s linear infinite;
}
@-webkit-keyframes right{
  0%  {height: 0; top: 0; left: 96px;}
  40% {height: 0; top: 0; left: 96px;}
  60% {height: 100px; top: 0; left: 96px;}
  80% {height: 0; top: 100px;left: 96px;}
}
.bottom{
  height: 4px;
  -webkit-animation: bottom 2s linear infinite;
}
@-webkit-keyframes bottom{
  0%  {width: 0; top: 96px; left: 96px;}
  60% {width: 0; top: 96px; left: 96px;}
  80% {width: 100px; top:96px; left: 0px;}
  100% {width: 0px; top:96px; left: 0px;}
}

below is the design where the animation moves around the card, the issue is when the light reaches the top left corner it disappears because the corner has a radius of 80px can anyone tell me how I can bring the animation travel on the box border so that it will remain visible on the top right corner:

def display_animated_box(width: int = 450, height: int = 480):
    """
    Displays an animated box with a card-like shape, featuring customizable dimensions in a Streamlit app.

    Args:
        width (int): The width of the animated box in pixels.
        height (int): The height of the animated box in pixels.
    """
    html_content = f"""
    <div class="holder" style="width: {width}px; height: {height}px; position: relative;">
      <div class="bar left"></div>
      <div class="bar top"></div>
      <div class="bar right"></div>
      <div class="bar bottom"></div>
    </div>

    <style>
    .holder {{
        position: relative;
        width: {width}px;
        height: {height}px;
        background: var(--clr);
        border-radius: 10px;
        border-top-left-radius: 80px;
        overflow: hidden;
    }}
    .bar {{
        background: #d0f0dd;
        box-shadow: 0px 0px 0 #40ff22,
                    0px 0px 4px #30ff1f,
                    0px 0px 8px #20ff1b,
                    0px 0px 16px #10ff18;
        position: absolute;
    }}
    .left {{
        width: 4px;
        animation: left 10s linear infinite;
    }}
    @keyframes left {{
        0%  {{height: 0; top: {height - 4}px; left: 0;}}
        20% {{height: {height}px; top: 0; left: 0;}}
        40% {{height: 0; top: 0; left: 0;}}
    }}
    .top {{
        height: 4px;
        animation: top 10s linear infinite;
    }}
    @keyframes top {{
        0%  {{width: 0; top: 0; left: 0;}}
        20% {{width: 0; top: 0; left: 0;}}
        40% {{width: {width}px; top: 0; left: 0;}}
        60% {{width: 0; top: 0; left: {width}px;}}
    }}
    .right {{
        width: 4px;
        animation: right 10s linear infinite;
    }}
    @keyframes right {{
        0%  {{height: 0; top: 0; left: {width - 4}px;}}
        40% {{height: 0; top: 0; left: {width - 4}px;}}
        60% {{height: {height}px; top: 0; left: {width - 4}px;}}
        80% {{height: 0; top: {height}px;left: {width - 4}px;}}
    }}
    .bottom {{
        height: 4px;
        animation: bottom 10s linear infinite;
    }}
    @keyframes bottom {{
        0%  {{width: 0; top: {height - 4}px; left: {width - 4}px;}}
        60% {{width: 0; top: {height - 4}px; left: {width - 4}px;}}
        80% {{width: {width}px; top: {height - 4}px; left: 0;}}
        100% {{width: 0; top: {height - 4}px; left: 0;}}
    }}
    </style>
    """
    st.html(html_content)

display_animated_box()

Below I am pasting the animation if you can modefy below code that will also work what i neeed is just give radious to the top levt corner and make the animation move around that corner instead of fetting it disappear:

<div class="holder">  
 <div class="bar left"></div>
  <div class="bar top"></div>
  <div class="bar right"></div>
  <div class="bar bottom"></div>
</div>

    body{
  background: #222;
  margin: 0;
}
.holder{
  /*approx center*/
  position: absolute;
  top: 45%;
  left: 45%;
}
  
.bar{
  background: #d0f0dd;
  box-shadow: 0px 0px 0 #40ff22,
    0px 0px 4px #30ff1f,
    0px 0px 8px #20ff1b,
    0px 0px 16px #10ff18;
  border-radius: 4px;
  position: absolute;
}
.left{
  width: 4px;
  -webkit-animation: left 2s linear infinite;
}
@-webkit-keyframes left{
  0%  {height: 0; top: 96px; left: 0;}
  20% {height: 100px; top: 0; left: 0;}
  40% {height: 0; top: 0; left: 0;}
}
.top{
  height: 4px;
  -webkit-animation: top 2s linear infinite;
}
@-webkit-keyframes top{
  0%  {width: 0; top: 0; left: 0;}
  20% {width: 0; top: 0; left: 0;}
  40% {width: 100px; top: 0; left: 0;}
  60% {width: 0; top:0; left: 100px;}
}
.right{
  width: 4px;
  -webkit-animation: right 2s linear infinite;
}
@-webkit-keyframes right{
  0%  {height: 0; top: 0; left: 96px;}
  40% {height: 0; top: 0; left: 96px;}
  60% {height: 100px; top: 0; left: 96px;}
  80% {height: 0; top: 100px;left: 96px;}
}
.bottom{
  height: 4px;
  -webkit-animation: bottom 2s linear infinite;
}
@-webkit-keyframes bottom{
  0%  {width: 0; top: 96px; left: 96px;}
  60% {width: 0; top: 96px; left: 96px;}
  80% {width: 100px; top:96px; left: 0px;}
  100% {width: 0px; top:96px; left: 0px;}
}

• python
• html
• css
• streamlit

2 Answers 2

Here just change the CSS @webkit-keyframes timeline ranges to overlap them smoothly together.

This fix only uses CSS, so keep it as simple as possible.

body {
  background: #222;
  margin: 0;
}

.holder {
  /*approx center*/
  position: absolute;
  top: 45%;
  left: 45%;
}

.bar {
  background: #d0f0dd;
  box-shadow: 0px 0px 0 #40ff22, 0px 0px 4px #30ff1f, 0px 0px 8px #20ff1b,
    0px 0px 16px #10ff18;
  border-radius: 4px;
  position: absolute;
}

.left {
  width: 4px;
  -webkit-animation: left 2s linear infinite;
}

@-webkit-keyframes left {
  0% {
    height: 0;
    top: 96px;
    left: 0;
  }

  25% {
    height: 100px;
    top: 0;
    left: 0;
  }

  50% {
    height: 0;
    top: 0;
    left: 0;
  }
}

.top {
  height: 4px;
  -webkit-animation: top 2s linear infinite;
}

@-webkit-keyframes top {
  25% {
    width: 0;
    top: 0;
    left: 0;
  }

  50% {
    width: 100px;
    top: 0;
    left: 0;
  }

  75% {
    width: 0;
    top: 0;
    left: 100px;
  }
}

.right {
  width: 4px;
  -webkit-animation: right 2s linear infinite;
}

@-webkit-keyframes right {
  50% {
    height: 0;
    top: 0;
    left: 96px;
  }

  75% {
    height: 100px;
    top: 0;
    left: 96px;
  }

  100% {
    height: 0;
    top: 100px;
    left: 96px;
  }
}

.bottom {
  width: 100px;
  height: 4px;
  top: 96px;
  -webkit-animation: bottom 2s linear infinite;
}

@-webkit-keyframes bottom {
  25% {
    width: 0px;
    top: 96px;
    left: 0px;
  }

  75% {
    width: 0px;
    top: 96px;
    left: 96px;
  }

  100% {
    width: 100px;
    top: 96px;
    left: 0px;
  }
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="style.css" />
  <title>Document</title>
</head>

<body>
  <div class="holder">
    <div class="bar left"></div>
    <div class="bar top"></div>
    <div class="bar right"></div>
    <div class="bar bottom"></div>
  </div>

  <div class="rainbow"></div>
</body>

</html>

Here is a close render involving not only CSS

• javascript

• setTimeOut

• conic-gradient(js is to animate it!)

• padding

• background-clip

• eventually inset box-shadow

const speed = 5; // average: 360 / speed = Xseconds 
function rotate(i) {
  document.querySelector("div.holder").style.background =
    "linear-gradient(#222,#222), conic-gradient(from " +
    i +
    "deg  at center, #0000 ,  #3f87a6 15deg 90deg, #0000 110deg)";
  document.querySelector("div.holder").style.backgroundClip = 
    " content-box,border-box";
}

function stepLoop(i) {
  i = i + speed;
  if (i >= 360) i = 0;
  setTimeout(function() {
    rotate(i);
    stepLoop(i);
  }, .1);

}
stepLoop(0);

html {
  background: #222;
  display:grid;
  min-height:100vh;
  place-content: center;
  place-content: safe center;
  
}

.holder {
  height: 40vh;
  aspect-ratio:1;
  border-radius: 10px;
  border-top-left-radius: 35vh;
  padding: clamp(5px,1vh,10px);
  overflow: hidden;
  box-shadow: inset 0 0 2px #222;
  background:
    linear-gradient(#222, #222),
    conic-gradient(from 0deg at center, #0000 0deg, #3f87a6 15deg 90deg, #0000 110deg);
  background-clip: content-box, border-box;
}

<div class="holder"></div>