José  Díaz

José Díaz

1613982006

Animated Progress Bar Using CSS, HTML & JQuery

In this video, you are going to learn how to design an awesome animated progress bar using HTML, CSS, and JQuery. First, let’s see what is a progress bar. Simply progress bar is a graphical control element used to visualize the progress of an operation like a download, file transfer, installation, and etc. So in this video, you will learn how to design this progress bar with an animation.

Subscribe: https://www.youtube.com/channel/UCNDmzGYwwT3rdY3xQuW8QOA

Source code

index.html


<!DOCTYPE html>
<html lang="en" dir="ltr">
	<head>
		<meta charset="utf-8">
		<title>Progress Bar</title>
		<link rel="stylesheet" href="style.css">
		<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" charset="utf-8"></script>
	</head>
	<body>

		<!--progress bar start-->
		<div class="progress-bar">
			<span style="width:100%"></span>
		</div>
		<!--progress bar end-->

		<script type="text/javascript">
		$(function(){
			$("span").each(function(){
				$(this)
				.data("origWidth", $(this).width())
				.width(0)
				.animate({
					width: $(this).data("origWidth")
				},2000);
			});
		});
		</script>

	</body>
</html>
      

style.css


body{
  margin: 0;
  padding: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.progress-bar{
  background: #555;
  width: 600px;
  height: 30px;
  position: relative;
  border-radius: 25px;
  padding: 10px;
}

.progress-bar span{
  background: #1DC4E7;
  display: block;
  height: 100%;
  border-radius: 25px;
  position: relative;
}

.progress-bar span:after{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-image: -webkit-gradient(linear, 0 0, 100% 100%,
    color-stop(.25, rgba(255, 255, 255, .2)),
    color-stop(.25, transparent),
    color-stop(.5, transparent),
    color-stop(.5, rgba(255, 255, 255, .2)),
    color-stop(.75, rgba(255, 255, 255, .2)),
    color-stop(.75, transparent), to(transparent)
    );
  background-size: 50px 50px;
  animation: move 2s linear infinite;
  border-radius: 25px;
}

@-webkit-keyframes move{
  0%{
    background-position: 0 0;
  }
  100%{
    background-position: 50% 50%;
  }
}

#html #css #jquery

What is GEEK

Buddha Community

Animated Progress Bar Using CSS, HTML & JQuery
anita maity

anita maity

1618667723

Sidebar Menu Using Only HTML and CSS | Side Navigation Bar

how to create a Sidebar Menu using HTML and CSS only. Previously I have shared a Responsive Navigation Menu Bar using HTML & CSS only, now it’s time to create a Side Navigation Menu Bar that slides from the left or right side.

Demo

#sidebar menu using html css #side navigation menu html css #css side navigation menu bar #,pure css sidebar menu #side menu bar html css #side menu bar using html css

anita maity

anita maity

1620852450

Animated Circular progress bar using Html and CSS

In this article, I am going to show you how to create an animated circular progress bar using only HTML CSS and BoostApp programming code.
Animated circular Progress Bar is a type of statistical design used in a variety of websites. It is mainly used to indicate the percentage of one’s qualification in a portfolio website or personal website.

Download Source Code

#progress bar #circular progress bar #animated circular progress #dynamic progress bar in html

anita maity

anita maity

1621172164

Circular Progress Bar Using Html CSS and Bootstrap

How to create an animated circular progress bar using only HTML CSS and BoostApp programming code. I have designed many more types of animated progress bars before but this design has been designed in a completely modern way.

Animated circular Progress Bar is a type of statistical design used in a variety of websites. It is mainly used to indicate the percentage of one’s qualification in a portfolio website or personal website. It is fully animated, that is, under normal conditions, it has zero percent then it will gradually reach the pre-determined percentage. Different colors have been used to denote percentages.

Demo

video: https://www.youtube.com/watch?v=7PThu9_EP40

#circular progress bar #progress bar #animated circular progress bar #skill #progress

I am Developer

1597499549

Ajax Multiple Image Upload with Progress bar with jQuery in Laravel

In this post, i will show you, how you can upload multiple file with progress bar in laravel using jQuery ajax.

So follow below given steps to create ajax multiple image upload with progress bar with jquery and laravel php.

Multiple File Upload with Progress bar Using jQuery and Laravel PHP

Now follow the below given simple and easy step to upload multiple file with progress bar in laravel using jQuery ajax:

  • Step 1: Download Laravel App
  • Step 2: Add Database Details
  • Step 3: Create Migration & Model
  • Step 4: Add Routes For Multiple File Upload
  • Step 5: Create Controller by Artisan
  • Step 6: Create Blade View
  • Step 7: Run Development Server

https://www.tutsmake.com/laravel-7-multiple-file-upload-with-progress-bar/

#multiple file upload with progress bar using jquery and laravel #laravel multiple file upload ajax with progress bar #how to upload multiple images with progress bar in laravel #laravel 7 multiple image upload example #image upload with progress bar laravel #laravel multiple image upload ajax

José  Díaz

José Díaz

1613982006

Animated Progress Bar Using CSS, HTML & JQuery

In this video, you are going to learn how to design an awesome animated progress bar using HTML, CSS, and JQuery. First, let’s see what is a progress bar. Simply progress bar is a graphical control element used to visualize the progress of an operation like a download, file transfer, installation, and etc. So in this video, you will learn how to design this progress bar with an animation.

Subscribe: https://www.youtube.com/channel/UCNDmzGYwwT3rdY3xQuW8QOA

Source code

index.html


<!DOCTYPE html>
<html lang="en" dir="ltr">
	<head>
		<meta charset="utf-8">
		<title>Progress Bar</title>
		<link rel="stylesheet" href="style.css">
		<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" charset="utf-8"></script>
	</head>
	<body>

		<!--progress bar start-->
		<div class="progress-bar">
			<span style="width:100%"></span>
		</div>
		<!--progress bar end-->

		<script type="text/javascript">
		$(function(){
			$("span").each(function(){
				$(this)
				.data("origWidth", $(this).width())
				.width(0)
				.animate({
					width: $(this).data("origWidth")
				},2000);
			});
		});
		</script>

	</body>
</html>
      

style.css


body{
  margin: 0;
  padding: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.progress-bar{
  background: #555;
  width: 600px;
  height: 30px;
  position: relative;
  border-radius: 25px;
  padding: 10px;
}

.progress-bar span{
  background: #1DC4E7;
  display: block;
  height: 100%;
  border-radius: 25px;
  position: relative;
}

.progress-bar span:after{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-image: -webkit-gradient(linear, 0 0, 100% 100%,
    color-stop(.25, rgba(255, 255, 255, .2)),
    color-stop(.25, transparent),
    color-stop(.5, transparent),
    color-stop(.5, rgba(255, 255, 255, .2)),
    color-stop(.75, rgba(255, 255, 255, .2)),
    color-stop(.75, transparent), to(transparent)
    );
  background-size: 50px 50px;
  animation: move 2s linear infinite;
  border-radius: 25px;
}

@-webkit-keyframes move{
  0%{
    background-position: 0 0;
  }
  100%{
    background-position: 50% 50%;
  }
}

#html #css #jquery