CSS Progress Bar Like IOS Devices: Basically, It is a loading bar animation with pure CSS. You must have seen this effect in mac or ios devices, maybe I saw on iTunes. Also, many websites use this type of preloader on their loading screen. If you have a portfolio or other types of presentation website then this loading bar will be pretty cool on your website. If you have a blog then you don’t need to use this kind of preloaders.
This is a pure CSS program, without JavaScript. I have said a lot earlier too that you don’t have an idea of what you can do with CSS. This is a very short & easy program completely built-in CSS and HTML. As you know HTML is the structure of any web page, without HTML you can’t create a web page.
CSS Property Used In IOS Devices Progress Bar or Loading Bar
Let’s talk about this loading bar animation program: I created this effect with CSS animation property. I used CSS @keyframe property to give animation to this progress bar. Basically, I had created 2 divs. First one for the progress bar, the second one is for a shadow effect. First, I created the whole Progress bar and its shadow with colors. But I had put width of the progress bar and shadow gave 0%. After that, created a for @keyframe an animation effect.
In @keyframe property, I had added to{ width:100%; } command. Basically, This command is for giving 100% width to divs previously created with 0% width. Now run this keyframe animation with 6s ease-in-out forwards command. Now, progress bar animating 0% to 100% width in 6s. That is the secret behind this loading bar animation effect.
Let’s See a Preview Of This Loading Bar
You May Also Like: 3D Bar Chart Design and Layout
Pure CSS Progress Bar Like IOS Devices Source Code
First, we need to add semantic HTML code. We will add the container div and loading bar placements.
HTML Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Loading Animation Like IOS</title>
</head>
<body>
<div class="container">
<h3>Loading, please wait.</h3>
<div class="progress-bar">
<div class="shadow"></div>
</div>
</div>
</body>
</html>
Now, we will need to add CSS3 code to design IOS animated loading bar.
CSS3 Code:
* {
margin:0px;
padding:0px;
box-sizing:border-box;
font-family:"Raleway";
}
.container {
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
width:350px;
height:100px;
}
.container h3 {
color:rgba(100,100,100,0.9);
}
.container .progress-bar {
width:0%;
height:5px;
background:linear-gradient(to right,rgb(76,217,105),rgb(90,200,250),rgb(0,132,255),rgb(52,170,220),rgb(88,86,217),rgb(255,45,83));
margin-top:10px;
background-size:350px 5px;
border-radius:10px;
animation:loading 6s ease-in-out forwards;
}
.container .shadow {
width:100%;
height:40px;
background:linear-gradient(to bottom,rgba(100,100,100,0.17),rgba(100,100,100,0.1),transparent);
transform:skew(45deg) translate(15px,5px);
}
@keyframes loading {
to {
width:100%;
}
}
Leave a Reply