TikTok Tutorial - How to create 5 Animated Progress bars in CSS

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:

Alexandra Murtaza

Alexandra Murtaza