<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
meter {
margin: 2em;
width: 400px;
height: 30px;
position: relative;
}
meter::before {
content: 'Used storage';
position: absolute;
top: -100%;
}
meter::after {
content: 'Free storage';
position: absolute;
top: -100%;
right: 0;
}
meter::-webkit-meter-bar {
background: none;
background-color: lightgray;
box-shadow: 0 5px 5px -5px #333 inset;
}
meter::-webkit-meter-optimum-value {
-webkit-transition: width .5s;
box-shadow: 0 5px 5px -5px #999 inset;
background-image: linear-gradient( 90deg, #8bcf69 5%, #e6d450 5%, #e6d450 15%, #f28f68 15%, #f28f68 55%, #cf82bf 55%, #cf82bf 95%, #719fd1 95%, #719fd1 100%);
background-size: 100% 100%;
}
meter::-webkit-meter-optimum-value:hover {
/* Reset each sub-category to 20% */
background-image: linear-gradient( 90deg, #8bcf69 20%, #e6d450 20%, #e6d450 40%, #f28f68 40%, #f28f68 60%, #cf82bf 60%, #cf82bf 80%, #719fd1 80%, #719fd1 100%);