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 Michaela on 27 July 2022, Wednesday.
Animated progress bar - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Animated progress bar</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ /* Variables */
/* Fonts */
@import url(http://fonts.googleapis.com/css?family=Open+Sans:300);
body { font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 300; letter-spacing: 0.05em;
}
/* Background */
.bg { background-color: #251217;
}
/* Progress Bars */
progress, progress[role] { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: none; background-size: auto; height: 3.1em; width: 100%;
}
/* Unordered list */
.skill-list { list-style: none; margin: 0; padding: 1em;
}
/* List item */
.skill { margin-bottom: 1em; position: relative;
}
.skill label { color: white; line-height: 1; position: absolute; top: 1em; left: 1em;
}
.skill ::-webkit-progress-value { -webkit-animation: bar 2s ease-in; width: 0px;
}
progress[value]::-webkit-progress-bar { background-color: rgba(255, 255, 255, 0.1);
}
/* Bars */
.skill-1::-webkit-progress-value { background-color: #e65e62;
}
.skill-1::-moz-progress-bar { background-color: #e65e62;
}
.skill-2::-webkit-progress-value { background-color: #9b3950;
}
.skill-2::-moz-progress-bar { background-color: #9b3950;
}
.skill-3::-webkit-progress-value { background-color: #f79b57;
}
.skill-3::-moz-progress-bar { background-color: #f79b57;
}
.skill-4::-webkit-progress-value { background-color: #6b3241;
}
.skill-4::-moz-progress-bar { background-color: #6b3241;
}
/* Animations */
@-webkit-keyframes bar { 0% { width: 0; }
}
@keyframes bar { 0% { width: 0; }
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="bg"> <ul class="skill-list"> <li class="skill"> <label>CSS3, LESS, SASS</label> <progress class="skill-1" max="100" value="30"></progress> </li> <li class="skill"> <label>HTML 5</label> <progress class="skill-2" max="100" value="10"></progress> </li> <li class="skill"> <label>jQuery, AngularJS</label> <progress class="skill-3" max="100" value="70"></progress> </li> <li class="skill"> <label>Node.js, Mongo DB</label> <progress class="skill-4" max="100" value="100"></progress> </li> </ul>
</div>
</body>
</html>
Animated progress bar - Script Codes CSS Codes
/* Variables */
/* Fonts */
@import url(http://fonts.googleapis.com/css?family=Open+Sans:300);
body { font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 300; letter-spacing: 0.05em;
}
/* Background */
.bg { background-color: #251217;
}
/* Progress Bars */
progress, progress[role] { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: none; background-size: auto; height: 3.1em; width: 100%;
}
/* Unordered list */
.skill-list { list-style: none; margin: 0; padding: 1em;
}
/* List item */
.skill { margin-bottom: 1em; position: relative;
}
.skill label { color: white; line-height: 1; position: absolute; top: 1em; left: 1em;
}
.skill ::-webkit-progress-value { -webkit-animation: bar 2s ease-in; width: 0px;
}
progress[value]::-webkit-progress-bar { background-color: rgba(255, 255, 255, 0.1);
}
/* Bars */
.skill-1::-webkit-progress-value { background-color: #e65e62;
}
.skill-1::-moz-progress-bar { background-color: #e65e62;
}
.skill-2::-webkit-progress-value { background-color: #9b3950;
}
.skill-2::-moz-progress-bar { background-color: #9b3950;
}
.skill-3::-webkit-progress-value { background-color: #f79b57;
}
.skill-3::-moz-progress-bar { background-color: #f79b57;
}
.skill-4::-webkit-progress-value { background-color: #6b3241;
}
.skill-4::-moz-progress-bar { background-color: #6b3241;
}
/* Animations */
@-webkit-keyframes bar { 0% { width: 0; }
}
@keyframes bar { 0% { width: 0; }
}
Developer | Michaela |
Username | Fischaela |
Uploaded | July 27, 2022 |
Rating | 3.5 |
Size | 3,495 Kb |
Views | 46,552 |
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!
Name | Size |
WebGL Wood with Sun Animation | 3,600 Kb |
Pure CSS Navigation | 3,649 Kb |
HTML5 game experiment with CreateJS | 4,135 Kb |
Geildanke typography | 3,249 Kb |
Geildanke buttons | 3,154 Kb |
WebGL OpenGL GLSL Shader Tests | 2,586 Kb |
WebGL Game Endless Runner | 6,354 Kb |
News reading experiment | 6,961 Kb |
Geildanke products | 5,250 Kb |
Projects geildanke with new animations | 6,186 Kb |
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!
Name | Username | Size |
Client-side Email Validation | Collizo4sky | 1,538 Kb |
Svg sky | Omodev | 7,070 Kb |
Slide like Mailbox | Hmps | 3,758 Kb |
Default Input, Textareas, Submits, and Buttons in iOS | Demersdesigns | 2,334 Kb |
Sign Up Form | Sicontis | 5,272 Kb |
My Interests | Anshusaxenaarora | 2,015 Kb |
Learning canvas drawing | Aurer | 2,204 Kb |
Bootstrap example | Ssaakkaa | 2,716 Kb |
Slides-07-1 POSITION | Exhtml | 1,909 Kb |
A Pen by lizz | Lizz | 10,068 Kb |
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!