Source Code:
(back to article)
Submit
Result:
Report an issue
<!DOCTYPE html> <html> <head> <title>Der Titel des Dokuments</title> <style> progress[value] { -webkit-appearance: none; appearance: none; width: 220px; height: 20px; } progress[value]::-webkit-progress-bar { background-color: #eee; box-shadow: 0 0 3px #666 inset; } progress[value]::-webkit-progress-value { background: -webkit-linear-gradient(-45deg, transparent 30%, #8ebf42 70%, #8ebf42 40%, transparent 30%), -webkit-linear-gradient(top, #96f204, #8ebf42), -webkit-linear-gradient(right, #96f204, #8ebf42); background-size: 40px 20px, 10%; } </style> </head> <body> <p>Herunterladen: <progress value="35" max="100"></progress> <span>35%</span> </p> <p>Fortschrittsanzeige: <progress value="80" max="100"></progress> <span>80%</span> </p> </body> </html>