Humble Progress

Developer
Yogev Ahuvia
Size
2,766 Kb
Views
22,264
  1. Humble Progress Previews
  2. Humble Progress HTML Codes
  3. Humble Progress CSS Codes

How do I make an humble progress?

A humble progress indicator at the top of the page. Clearly and nicely shows the loading progress, without breaking the page grid. Inspired by Chrome's dedicated progress bar on YouTube.. What is a humble progress? How do you make a humble progress? This script and codes were developed by Yogev Ahuvia on 11 September 2022, Sunday.

Humble Progress Previews
IQ Test

Humble Progress - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Humble Progress</title> <link href='https://fonts.googleapis.com/css?family=Open+Sans:300,400' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.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! */ .progress { width: 100%; height: 1px; background: red; box-shadow: 0px 1px 8px 0px red; position: absolute; top: 0; left: 0; animation: progress 5s infinite;
}
@keyframes progress { from { width: 0%; } to { width: 100%; }
}
@keyframes loading { from { color: #222; opacity: 1; } to { color: red; opacity: 0; }
}
body { background: #eee; font-family: "Open Sans", sans-serif;
}
body:after { content: "Please Wait..."; display: block; position: absolute; top: 50%; left: 50%; font-size: 2em; font-weight: 300; transform: translate(-50%, -50%); animation: loading 5s infinite linear;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="progress"></div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

Humble Progress - Script Codes CSS Codes

.progress { width: 100%; height: 1px; background: red; box-shadow: 0px 1px 8px 0px red; position: absolute; top: 0; left: 0; animation: progress 5s infinite;
}
@keyframes progress { from { width: 0%; } to { width: 100%; }
}
@keyframes loading { from { color: #222; opacity: 1; } to { color: red; opacity: 0; }
}
body { background: #eee; font-family: "Open Sans", sans-serif;
}
body:after { content: "Please Wait..."; display: block; position: absolute; top: 50%; left: 50%; font-size: 2em; font-weight: 300; transform: translate(-50%, -50%); animation: loading 5s infinite linear;
}
Humble Progress - Script Codes
Humble Progress - Script Codes
Home Page Home
Developer Yogev Ahuvia
Username kindofone
Uploaded September 11, 2022
Rating 3.5
Size 2,766 Kb
Views 22,264
Do you need developer help for Humble Progress?

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!

Yogev Ahuvia (kindofone) Script Codes
Name
Reactive CSS Transitions
CSS Filter Glass
Ball Bouncing On Text
3D Cube of 3D Balls
CSS-Only Countdown Clock
Subtle Buttons
Natural Language Accordion Form
Triangles From Another Dimension
Thumbnail Animation Effects
Real-Time Love Meter
Create amazing art & images 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!