Animated Progress Bar
How do I make an animated progress bar?
What is a animated progress bar? How do you make a animated progress bar? This script and codes were developed by Mariam Massadeh on 22 September 2022, Thursday.
Animated Progress Bar Previews
Animated Progress Bar - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Animated Progress Bar</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"> <div class="meter"> <span class="mariam animate" style="width: 80%"></span> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>
Animated Progress Bar - Script Codes CSS Codes
/* Added for demo purposes */
.container { width: 400px; margin-left: auto; margin-right: auto;
}
.meter{ margin-bottom: 1.5em; margin-top: 1.5em;
}
/* Usage examples start here */
.stripes { content: ""; position: absolute; overflow: hidden; top: 0; left: 0; bottom: 0; right: 0; z-index: 1; -webkit-animation: none; -moz-animation: none; -ms-animation: none; animation: none; background: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent); background: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent); background: linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent); -webkit-background-size: 50px 50px; -moz-background-size: 50px 50px; background-size: 50px 50px;
}
.meter { -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0 1px 2px inset; -moz-box-shadow: rgba(0, 0, 0, 0.1) 0 1px 2px inset; box-shadow: rgba(0, 0, 0, 0.1) 0 1px 2px inset; position: relative; -webkit-border-radius: 25px; -moz-border-radius: 25px; -ms-border-radius: 25px; border-radius: 25px; background-color: #555555; height: 10px; padding: 5px; border-color: #484848 #484848 #414141; border-style: solid; border-width: 1px;
}
.meter .animate { content: ""; position: absolute; overflow: hidden; top: 0; left: 0; bottom: 0; right: 0; z-index: 1; -webkit-animation: big 2s linear infinite; -moz-animation: big 2s linear infinite; -ms-animation: big 2s linear infinite; animation: big 2s linear infinite; background: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent); background: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent); background: linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent); -webkit-background-size: 50px 50px; -moz-background-size: 50px 50px; background-size: 50px 50px;
}
.meter > span { -webkit-box-shadow: rgba(255, 255, 255, 0.3) 0 2px 9px inset, rgba(0, 0, 0, 0.4) 0 -2px 6px inset; -moz-box-shadow: rgba(255, 255, 255, 0.3) 0 2px 9px inset, rgba(0, 0, 0, 0.4) 0 -2px 6px inset; box-shadow: rgba(255, 255, 255, 0.3) 0 2px 9px inset, rgba(0, 0, 0, 0.4) 0 -2px 6px inset; display: block; height: 100%; overflow: hidden; position: relative; background: #2ac052, -webkit-gradient(linear, 50% 100%, 50% 0%, color-stop(37%, #2ac052), color-stop(69%, #56f056)); background: #2ac052, -webkit-linear-gradient(center bottom, #2ac052 37%, #56f056 69%); background: #2ac052, -moz-linear-gradient(center bottom, #2ac052 37%, #56f056 69%); background: #2ac052, linear-gradient(center bottom, #2ac052 37%, #56f056 69%);
}
.meter .mariam { -moz-border-radius-topleft: 20px; -webkit-border-top-left-radius: 20px; border-top-left-radius: 20px; -moz-border-radius-bottomleft: 20px; -webkit-border-bottom-left-radius: 20px; border-bottom-left-radius: 20px; -moz-border-radius-topright: 8px; -webkit-border-top-right-radius: 8px; border-top-right-radius: 8px; -moz-border-radius-bottomright: 8px; -webkit-border-bottom-right-radius: 8px; border-bottom-right-radius: 8px; background-color: #000; position: relative;
}
.meter .mariam:after { background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(255, 255, 255, 0.5)), color-stop(100%, rgba(255, 255, 255, 0.1))); background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.1)); background: -moz-linear-gradient(top, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.1)); background: linear-gradient(top, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.1)); -moz-border-radius-topleft: 20px; -webkit-border-top-left-radius: 20px; border-top-left-radius: 20px; -moz-border-radius-bottomleft: 20px; -webkit-border-bottom-left-radius: 20px; border-bottom-left-radius: 20px; -moz-border-radius-topright: 8px; -webkit-border-top-right-radius: 8px; border-top-right-radius: 8px; -moz-border-radius-bottomright: 8px; -webkit-border-bottom-right-radius: 8px; border-bottom-right-radius: 8px; content: ""; overflow: hidden; position: absolute; top: 0; left: 0; bottom: 0; right: 0; z-index: 1;
}
@-moz-keyframes big { 0% { background-position: 0 0; } 100% { background-position: 50px 50px; }
}
@-webkit-keyframes big { 0% { background-position: 0 0; } 100% { background-position: 50px 50px; }
}
@-ms-keyframes big { 0% { background-position: 0 0; } 100% { background-position: 50px 50px; }
}
@keyframes big { 0% { background-position: 0 0; } 100% { background-position: 50px 50px; }
}
| Developer | Mariam Massadeh |
| Username | MariamMassadeh |
| Uploaded | September 22, 2022 |
| Rating | 3 |
| Size | 2,271 Kb |
| Views | 36,432 |
Do you need developer help for Animated Progress Bar?
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!
Mariam Massadeh (MariamMassadeh) Script Codes
| Name | Size |
| Time Line | 5,697 Kb |
| Responsive Menu with sub menu- CSS3 animation, simple jquery | 3,663 Kb |
| Simple blog container, tool tip, simple animation on hover | 2,834 Kb |
| Responsive Text Area with timer, counter and history | 4,527 Kb |
| Animated evaluation pen with a tooltip | 2,771 Kb |
| Html5-canvas-snow-effect | 2,609 Kb |
| Coming Soon | 1,680 Kb |
| A Pen by Mariam Massadeh | 3,981 Kb |
| Qoute | 2,776 Kb |
| Receipt with result | 2,774 Kb |
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!
Similar Scripts & Codes
| Name | Username | Size |
| Disable JavaScript execution from console | Ludviglindblom | 2,534 Kb |
| Table Exercise | Fresco | 9,585 Kb |
| Mosaic transition effect between two photos using jQuery | Stathisg | 2,518 Kb |
| Scroll using CSS | Casperovic | 2,159 Kb |
| Simple Buttons | Haydenmills | 1,750 Kb |
| Replace url via jquery | Serluk | 1,429 Kb |
| Lazy Load for Background Images | The_ruther4d | 2,977 Kb |
| Improved Page Flipping Effect | Usaphp | 5,201 Kb |
| Toggle menu | Seyedi | 2,279 Kb |
| Headroom.js demo | WickyNilliams | 3,982 Kb |
Do you want hide your ip address?
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!