Learn with us how to create animated progress bars using CSS!
If you found us on TikTok on the following post, check out this article and copy-paste the full code!
Happy coding! 😻
@creative.tim Upgrade your websites with this animated progress bars in CSS #webdev #programmingexercises #programming #csscoding ♬ original sound - Creative Tim
HTML Code
Use this code to start your progress bars!
<div class="progress-1"></div>
<div class="progress-2"></div>
<div class="progress-3"></div>
<div class="progress-4"></div>
<div class="progress-5"></div>
CSS Code
Continue with the CSS code and add life to your progress bar!
.progress-1 {
width:120px;
height:20px;
border-radius: 20px;
background:
repeating-linear-gradient(135deg,#DAF5FF 0 10px,
#FFBFA0 0 20px) 0/0% no-repeat,
repeating-linear-gradient(135deg,#ddd 0 10px,
#eee 0 20px) 0/100%;
animation:p1 2s infinite;
}
@keyframes p1 {
100% {background-size:100%}
}
.progress-2 {
width:120px;
height:20px;
-webkit-mask:linear-gradient(90deg,#000 70%,#0000 0) 0/20%;
background:
linear-gradient(#000 0 0) 0/0% no-repeat
#ddd;
animation:p2 2s infinite steps(6);
}
@keyframes p2 {
100% {background-size:120%}
}
.progress-3 {
width:120px;
height:60px;
border-radius:200px 200px 0 0;
-webkit-mask:repeating-radial-gradient(farthest-side at bottom
,#0000 0,#000 1px 12%,#0000 calc(12% + 1px) 20%);
background:
radial-gradient(farthest-side at bottom,#61E8E1 0 95%,#0000 0)
bottom/0% 0% no-repeat
#ddd;
animation:p3 2s infinite steps(6);
}
@keyframes p3 {
100% {background-size:120% 120%}
}
.progress-4 {
width:120px;
height:22px;
border-radius: 20px;
color:#514b82;
border:2px solid;
position: relative;
}
.progress-4::before {
content:"";
position: absolute;
margin:2px;
inset:0 100% 0 0;
border-radius: inherit;
background:currentColor;
animation:p4 2s infinite;
}
@keyframes p4 {
100% {inset:0}
}
.progress-5 {
--r1: 154%;
--r2: 68.5%;
width:60px;
height:60px;
border-radius: 50%;
background:
radial-gradient(var(--r1) var(--r2) at top ,#0000 79.5%,
#269af2 80%) center left,
radial-gradient(var(--r1) var(--r2) at bottom,#269af2 79.5%
,#0000 80%) center center,
radial-gradient(var(--r1) var(--r2) at top ,#0000 79.5%,
#269af2 80%) center right,
#ccc;
background-size: 50.5% 220%;
background-position: -100% 0%,0% 0%,100% 0%;
background-repeat:no-repeat;
animation:p5 2s infinite linear;
}
@keyframes p5 {
33% {background-position: 0% 33% ,100% 33% ,200% 33% }
66% {background-position: -100% 66%,0% 66% ,100% 66% }
100% {background-position: 0% 100%,100% 100%,200% 100%}
}
/**/
body {
display: grid;
grid-template-rows: repeat(auto-fit,minmax(250px,1fr));
grid-auto-rows: 130px;
place-items:center;
}
* {
box-sizing: border-box;
}
I hope you did find this tutorial useful!
For more web development or UI/UX design tutorials, follow us on:
Other useful resources:
