Animated Loading Progress Bar

loading progress bar

In today's post, we will show you a simple snippet about progress bar animation. This progress bar will look similar to a loading animation. Please watch the video tutorial below to learn how to create an animated loading progress bar just by using HTML CSS. This will give you an idea of the source code. After That, Download the source code and experiment with the code. We have a lot of videos about frontend development on our YouTube Channel. You can subscribe to our channel if you prefer.

What is Progress Bar?

I hope you've watched the video and comprehended how it was made. The progress bar lets the user know how much of his work process has been completed and how much is left. It is also called the UI elements of a website or app which indicates the progress of an operation. There are two types of progress bar designs radial and line bar. In this project, we have designed the line progress bar.

HTML Part:

At the beginning of the HTML markup, a div called 'Wrapper' has been taken which will act as a container div for the whole project. We have built a progress bar here with four skills of web design. Each progress bar has a label and the progress bar is placed below it. The label is placed with an H2 tag. For the progress bar, a span tag has been taken inside a div called 'loading-bar'. Here 'loading- bar' div is used to show how 100% width of the bar and the span tag is used to show the completed part. You can control the width of the progress bar through inline CSS style.

CSS Part:

We have given a specific width for the div 'content' in the CSS part. Then we brought the main container div 'wrapper' to the middle of the viewport using the CSS display grid property. We have given 100% width and a particular height to the 'loading bar'. Then we gave the span tag a relative position value. We then gave it a display block and overflow hidden so that it would not overlap. A background image of the sprite type has been given by using the pseudo-element after the span tag. In order to execute the animation we required, we set an animation property for the span tag and used CSS keyframes animation. It is not possible to explain everything in words, so you can watch the above video to better understand this CSS Animation example.

You May Also Like:

Team Section Design using Bootstrap

Animated bubbles background Animation

Animated Loading Progress Bar [ Source Code ]:

To create this project, first, create an HTML file and then a CSS file. Then copy the code from the code box below and paste it into your own files. Save and open the snippet on the browser to see if it works. If it works then ok and if it doesn't work then download the code from the download button given below.

ADD HTML:

<!DOCTYPE html>
<html lang="en">
<!--divinectorweb.com-->
<head>
    <meta charset="UTF-8">
    <title>Animated Loading Progress Bar</title>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="wrapper">
       <div class="content">
           <h2>HTML</h2>
        <div class="loading-bar animate">
          <span style="width: 80%"></span>
        </div>
       <h2>CSS</h2>
        <div class="loading-bar animate">
          <span style="width: 75%"></span>
        </div>
       <h2>Javascript</h2>
        <div class="loading-bar animate">
          <span style="width: 50%"></span>
        </div>
       <h2>Wordpress</h2>
        <div class="loading-bar animate">
          <span style="width: 85%"></span>
        </div>
       </div>
    </div>
</body>
</html>

ADD CSS:

body{
    background: #222222;
}
.content {
	width: 50%;
}
.wrapper {
	display: grid;
	place-items: center;
	height: 90vh;
}
.content h2 {
	margin: 10px 0;
	font-family: montserrat;
	color: #fff;
	opacity: .5;
	font-weight: 300;
}
.loading-bar {
	position: relative;
	height: 20px;
	width: 100%;
	border: 1;
	background: #2a2a2a;
	border-radius: 50px;
}
span {
	display: block;
	position: relative;
	height: 100%;
	border-radius: 50px;
	background-image: linear-gradient(to bottom, #fff, #2df364 30%);
	overflow: hidden;
}
span:after {
	content: "";
	position: absolute;
	top: 0px;
	left: 0;
	bottom: 0;
	right: 0;
	background-image: linear-gradient( -45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
	z-index: 1;
	background-size: 50px 50px;
	overflow: hidden;
}
.loading-bar>span:after, .animate>span>span {
	animation: load .88s infinite;
}
@keyframes load {
	0% {
		background-position: 0 0;
	}
	100% {
		background-position: 50px 50px;
	}
}

I hope you have implemented the code properly. We have a lot of source code for front-end development on our website. You can visit them by clicking on the Load More button at the bottom of the homepage. Thank you for visiting our website.

DOWNLOAD CODE

Post a Comment

Please Do not Enter any spam link in the comment box