Loading bars

Developer
Insprd
Size
2,187 Kb
Views
26,312
  1. Loading bars Previews
  2. Loading bars HTML Codes
  3. Loading bars CSS Codes

How do I make an loading bars?

What is a loading bars? How do you make a loading bars? This script and codes were developed by Insprd on 13 September 2022, Tuesday.

Loading bars Previews
IQ Test

Loading bars - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Loading bars</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class='append'> <div class='bars' id='bar1'></div> <div class='bars' id='bar2'></div> <div class='bars' id='bar3'></div>
</div>
</body>
</html>

Loading bars - Script Codes CSS Codes

.append { margin: 40vh auto; width: 80px;
}
.bars { display: block; width: 80px; height: 10px; background: #07cda4; border-radius: 5px; margin: 3px 0; opacity: 0.0; /* initial state */ -webkit-animation: pulsate 1s ease-out infinite; animation: pulsate 1s ease-out infinite;
}
#bar1 { -webkit-animation-delay: 0s; animation-delay: 0s;
}
#bar2 { -webkit-animation-delay: 0.2s; animation-delay: 0.2s;
}
#bar3 { -webkit-animation-delay: 0.4s; animation-delay: 0.4s;
}
@-webkit-keyframes pulsate { 0% { -webkit-transform: scale(0.1, 0.1); transform: scale(0.1, 0.1); opacity: 0.0; } 50% { opacity: 1.0; } 100% { -webkit-transform: scale(1, 1); transform: scale(1, 1); opacity: 0.0; }
}
@keyframes pulsate { 0% { -webkit-transform: scale(0.1, 0.1); transform: scale(0.1, 0.1); opacity: 0.0; } 50% { opacity: 1.0; } 100% { -webkit-transform: scale(1, 1); transform: scale(1, 1); opacity: 0.0; }
}
Loading bars - Script Codes
Loading bars - Script Codes
Home Page Home
Developer Insprd
Username insprd
Uploaded September 13, 2022
Rating 4
Size 2,187 Kb
Views 26,312
Do you need developer help for Loading bars?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Insprd (insprd) Script Codes
Name
Animated Link Underline
Aurora Effect
Fading gradient button
Bolt action
Loading anim
Brick a link with CSS
A Scanner Darkly
Simple Spinning Logo Idea
Minimal Clock Card
Hover Animation from UNIQLO
Create amazing web content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!