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

Alexandra Murtaza -

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: