Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Animacje
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
danielx1996
Cześć, zrobiłem na swojej stronie sztuczny pasek ładowania
Kod
#loading
{
    background-color: #FAFAFA;
     text-align:center;
        padding:15px 0;
        border:5px solid #CCCCCC;

        animation-name:szerokosc;
        animation-duration:8s;
        animation-iteration-count:infinite;

        -webkit-animation-name:szerokosc;
        -webkit-animation-duration:5s;
        -webkit-animation-iteration-count:number;
}

Jak zrobić, żeby reszta rzeczy na stronie pojawiała się po wykonaniu tej 8 sekundowej animacji ?
rad11
Obawiam sie ze bez JS nie przejdzie.
salfunglandyare
Możesz też dać w CSS białego diva z dużym z-indexem, position: fixed; width: 100%; height: 100%; który zakryje Ci ładowaną treść... np https://jsfiddle.net/eu4avuro/

//EDIT: Ponieważ ten div będzie później zasłaniał Ci elementy (np. odnośniki) możesz do niego dodać pointer-events: none do CSS
trueblue
Uporządkuj wartości dla właściwości animacji, jedna ma czas trwania 5s, druga 8s. Jedna powtarzana bez końca, druga niesprecyzowana.


http://jsfiddle.net/gkay7ka0/
I na całą szerokość:
http://jsfiddle.net/gkay7ka0/1/

Możesz też użyć JS, tak jak pisze rad11, w tym albo opóźnienie, albo wykorzystanie zdarzenia transitionEnd.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.