[Python] Right arrow function Streamlit-HTML

Belo is my python function created using python html. want to add this animation to html table but the issue is it is creating a lot of white space and also the design of the function is not as expected. can some one tell me how i can modefy this functon to make the design long and less white space:

def create_chevron_animation2(background_color="#06D001", height="50px"):
css_chevron = f"""
<style>
.container {{
display: flex;
justify-content: center;
align-items: center;
width: 100%; /* Increased width to 150% */
height: {height}; /* Reduced height */
position: relative;
overflow: hidden;
font-size: 0;
}}

.chevron {{
--chevron-size: 30px;
position: absolute;
width: calc(var(--chevron-size) * 4.0 * 0.5);
height: calc(var(--chevron-size) * 0.4 * 1.0);
font-size: var(--chevron-size);
opacity: 0;
transform: scale(0.1) rotate(90deg);
animation: move-chevron 5s linear infinite;
}}

.chevron:nth-child(1) {{ animation-delay: 0.5s; }}
.chevron:nth-child(2) {{ animation-delay: 1.0s; }}
.chevron:nth-child(3) {{ animation-delay: 1.5s; }}
.chevron:nth-child(4) {{ animation-delay: 2s; }}
.chevron:nth-child(5) {{ animation-delay: 2.5s; }}
.chevron:nth-child(6) {{ animation-delay: 3s; }}
.chevron:nth-child(7) {{ animation-delay: 3.5s; }}
.chevron:nth-child(8) {{ animation-delay: 4s; }}
.chevron:nth-child(9) {{ animation-delay: 4.5s; }}
.chevron:nth-child(10) {{ animation-delay: 5.0s; }}
.chevron:before,
.chevron:after {{
content: '';
position: absolute;
top: 0;
height: 100%;
width: 50%;
background: {background_color};
}}

.chevron:before {{
left: 0;
transform: skewY(-60deg);
}}

.chevron:after {{
right: 0;
transform: skewY(60deg);
}}

@keyframes move-chevron {{
0% {{
opacity: 0;
transform: translateX(-10%) scale(0.1) rotate(90deg);
}}
20% {{
opacity: 1;
transform: translateX(calc(0.6rem * 10)) scale(1) rotate(90deg);
}}
60% {{
opacity: 1;
transform: translateX(calc(0.6rem * 20)) scale(1) rotate(90deg);
}}
100% {{
opacity: 0;
transform: translateX(calc(0.6rem * 30)) scale(0.5) rotate(90deg);
}}
}}
</style>
"""

html_chevron = """
<div class="container">
<div class="chevron"></div>
<div class="chevron"></div>
<div class="chevron"></div>
<div class="chevron"></div>
<div class="chevron"></div>
<div class="chevron"></div>
<div class="chevron"></div>
<div class="chevron"></div>
<div class="chevron"></div>
<div class="chevron"></div>
</div>
"""


This is what i expect inside the Html table in streamlit:

<div class="container">
<div class="chevron"></div>
<div class="chevron"></div>
<div class="chevron"></div>
<div class="chevron"></div>
<div class="chevron"></div>
<div class="chevron"></div>
<div class="chevron"></div>
<div class="chevron"></div>
<div class="chevron"></div>
<div class="chevron"></div>
</div>



$base: 0.6rem;

.container {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100vh;
position: relative;
overflow: hidden;
}

.chevron {
position: absolute;
width: calc(#{$base} * 2.5);
height: calc(#{$base} * 0.3);
opacity: 0;
transform: scale(0.1) rotate(90deg); /* Rotate to point right */
animation: move-chevron 5s linear infinite; /* Smooth animation */
}

.chevron:nth-child(1) {
animation-delay: 0s;
}

.chevron:nth-child(2) {
animation-delay: 0.5s;
}

.chevron:nth-child(3) {
animation-delay: 1s;
}

.chevron:nth-child(4) {
animation-delay: 1.5s;
}

.chevron:nth-child(5) {
animation-delay: 2s;
}

.chevron:nth-child(6) {
animation-delay: 2.5s;
}

.chevron:nth-child(7) {
animation-delay: 3s;
}

.chevron:nth-child(8) {
animation-delay: 3.5s;
}

.chevron:nth-child(9) {
animation-delay: 4s;
}

.chevron:nth-child(10) {
animation-delay: 4.5s;
}

.chevron:before,
.chevron:after {
content: '';
position: absolute;
top: 0;
height: 100%;
width: 50%;
background: green; /* Uncommented and added the background */
}

.chevron:before {
left: 0;
transform: skewY(-60deg); /* Flip the skew to point right */
}

.chevron:after {
right: 0;
transform: skewY(60deg); /* Flip the skew to point right */
}

@keyframes move-chevron {
0% {
opacity: 0;
transform: translateX(-10%) scale(0.1) rotate(90deg);
}
20% {
opacity: 1;
transform: translateX(calc(#{$base} * 10)) scale(1) rotate(90deg);
}
60% {
opacity: 1;
transform: translateX(calc(#{$base} * 20)) scale(1) rotate(90deg);
}
100% {
opacity: 0;
transform: translateX(calc(#{$base} * 30)) scale(0.5) rotate(90deg);
}
}[![enter image description here][1]][1]


[1]: https://i.sstatic.net/C2RN6Rrk.png

Continue reading...