Как сделасть плавный прогресс бар который загружается ровно 1 мин?

Question

[Андрей]

Такая задача, нужно сделать прогресс бар который плавно бежит ровно минуту и потом исчезает.

Answer 1

[Дмитрий Кравченко]

CSS анимацией

@keyframes progress{
from{
width: 0;
}
to{
width: 100%;
}
}
.progressbar:after{
content: '';
position: absolute;
height: 100%;
animation: progress 60s linear forwards;
}

Убрать его можно второй анимацей на самом элементе

@keyframes hide{
from{
opacity: 1;
}
to{
opacity: 0;
}
}
.progressbar{
animation: hide 100ms 60s ease-in-out;
}

Comments

[Дмитрий Кравченко]

Максим Зайцев: поправил его https://jsfiddle.net/g5bgrfy2/ , translate плавней

[Андрей]

Спасибо, но не пропадает div)

[Дмитрий Кравченко]

barheta: правильно, потому что недописано https://jsfiddle.net/0t22rn5f/

[Андрей]

и не отображается в сафари и других браузерах, в ff и хроме работает =)

[Дмитрий Кравченко]

barheta: добавьте префиксы к transform и animation

[Андрей]

добавил префиксы -moz- -webkit- -ms- -o- все равно на сафари не работает)

[Дмитрий Кравченко]

barheta: покажите

[Андрей]

@-webkit-keyframes progress{
from{
transform: translateX(-100%);
-moz-transform: translateX(-100%);
-webkit-transform:translateX(-100%);
-ms-transform: translateX(-100%);
-o-transform: translateX(-100%);
}
to {
transform: translateX(0%);
-moz-transform: translateX(0%);
-webkit-transform: translateX(0%);
-ms-transform: translateX(0%);
-o-transform: translateX(0%);
}
}
@-webkit-keyframes hide{
from{
opacity: 1;
}
to{
opacity: 0;
}
}
@-moz-keyframes progress{
from{
transform: translateX(-100%);
-moz-transform: translateX(-100%);
-webkit-transform:translateX(-100%);
-ms-transform: translateX(-100%);
-o-transform: translateX(-100%);
}
to {
transform: translateX(0%);
-moz-transform: translateX(0%);
-webkit-transform: translateX(0%);
-ms-transform: translateX(0%);
-o-transform: translateX(0%);
}
}
@-moz-keyframes hide{
from{
opacity: 1;
}
to{
opacity: 0;
}
}
@keyframes progress{
from{
transform: translateX(-100%);
-moz-transform: translateX(-100%);
-webkit-transform:translateX(-100%);
-ms-transform: translateX(-100%);
-o-transform: translateX(-100%);
}
to {
transform: translateX(0%);
-moz-transform: translateX(0%);
-webkit-transform: translateX(0%);
-ms-transform: translateX(0%);
-o-transform: translateX(0%);
}
}
@keyframes hide{
from{
opacity: 1;
}
to{
opacity: 0;
}
}
@-o-keyframes progress{
from{
transform: translateX(-100%);
-moz-transform: translateX(-100%);
-webkit-transform:translateX(-100%);
-ms-transform: translateX(-100%);
-o-transform: translateX(-100%);
}
to {
transform: translateX(0%);
-moz-transform: translateX(0%);
-webkit-transform: translateX(0%);
-ms-transform: translateX(0%);
-o-transform: translateX(0%);
}
}
@-o-keyframes hide{
from{
opacity: 1;
}
to{
opacity: 0;
}
}
.progressbar {
position: relative;
height: 6px;
overflow: hidden;
background: #eaeaea;
animation: hide 0.1s 60s ease-in-out forwards;
-moz-animation: hide 0.1s 60s ease-in-out forwards;
-webkit-animation: hide 0.1s 60s ease-in-out forwards;
-o-animation: hide 0.1s 60s ease-in-out forwards;
}

.progressbar:after{
content: '';
position: absolute;
background: #7ac143;
height: 100%;
width: 100%;
animation: progress 60s linear forwards;
-moz-animation: progress 60s linear forwards;
-webkit-animation: progress 60s linear forwards;
-o-animation: progress 60s linear forwards;
}

[Дмитрий Кравченко]

barheta: попробуйте перенести беспрефиксную версию ниже остальных

[Андрей]

бежит но не пропадает, и когда переключаю на вкладку другую линия остается на месте

Answer 2

[Дмитрий Христоев]

jsfiddle.net/haoss/8xnh5yzj/4

Comments

[Андрей]

спасибо)