Animacja ładowania paska

pytanie zadane 11 lutego 2018 w HTML i CSS przez Scypyon Gaduła (3,450 p.)

<!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ł?

2 odpowiedzi

odpowiedź 11 lutego 2018 przez Kamil M Bywalec (2,340 p.)
wybrane 11 lutego 2018 przez Scypyon

Najlepsza

W ten sposób?

https://codepen.io/anon/pen/mXmMga

Całość polega na zmianie szerokości elementu po najechaniu na niego myszką z 0 do 100%. Właściwość width podlega transition, dlatego mamy płynną animację przejścia.

komentarz 11 lutego 2018 przez Scypyon Gaduła (3,450 p.)

tak tak, właśnie to, tylko żeby zostało po przejściu zapełnione, zaraz sam spróbuję przerobić

komentarz 11 lutego 2018 przez Scypyon Gaduła (3,450 p.)

@Kamil M, i jeszcze małe pytanie, gdzie kontroluje na ile ma się zapełniać, bo widzę właśnie zastąpiłeś z części html te width 100%

.meter:hover span::before{
  width: 100%;
}

to to tak?

komentarz 11 lutego 2018 przez Kamil M Bywalec (2,340 p.)

Dokładnie

komentarz 11 lutego 2018 przez Scypyon Gaduła (3,450 p.)

a jak mogę spowodować zatrzymanie się ładowania, w sensie ,żeby jak się naładuje do 100% zatrzymało się?

komentarz 12 lutego 2018 przez Kamil M Bywalec (2,340 p.)

Prawdopodobnie w JavaScripcie się da, ale tutaj nie pomogę bo sam się go dopiero uczę

odpowiedź 11 lutego 2018 przez xmentor Nałogowiec (49,520 p.)

Jeżeli chcesz używać animacji to możesz ustawić właściwość animation-play-state na paused, a przy hoverze ustawić na running. Można to bez problemu zrobić również na tranzycji, jeśli np. chcesz, aby pasek stanu wracał do domyślnej pozycji po zjechaniu z niego.