<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>animacja</title>
<link href='style.css' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="meter">
<span style="width:100%"></span>
<p>100%</p>
</div>
</body>
</html>
div.meter {
position: relative;
width: 250px;
height: 25px;
border: 1px solid #000;
margin-top: 50px;
margin-left: 100px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
}
div.meter span {
display: block;
height: 100%;
animation: grower 1s linear;
-moz-animation: grower 1s linear;
-webkit-animation: grower 1s linear;
-o-animation: grower 1s linear;
position: relative;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
background: #D0771F;
-webkit-background-size: 45px 45px;
-moz-background-size: 45px 45px;
-o-background-size: 45px 45px;
background-size: 45px 45px;
}
div.meter span:before {
content: '';
display: block;
width: 100%;
height: 50%;
position: relative;
top: 50%;
background: rgba(208, 119,31, 1);
}
div.meter p {
position: absolute;
top: 0;
margin: 0 10px;
line-height: 25px;
font-weight: bold;
-webkit-font-smoothing: antialised;
font-size: 15px;
color: #333;
}
@keyframes grower {
0% {
width: 0%;
}
}
@-moz-keyframes grower {
0% {
width: 0%;
}
}
@-webkit-keyframes grower {
0% {
width: 0%;
}
}
@-o-keyframes grower {
0% {
width: 0%;
}
}
Próbuję przerobić to ,aby pasek ładował się na właściwość hover, jednak nie mam pojęcia jak się do tego zabrać, ma ktoś jakiś pomysł?