Potrafi ktoś osadzić preloader na divie?

pytanie zadane 23 stycznia 2018 w HTML i CSS przez Hardwell Dyskutant (8,980 p.)

Witam, czy ktoś potrafił by osadzić byle jaki preloader w tym kodzie: https://codepen.io/hrtzt/pen/NPZKRN?limit=all&page=3&q=menu ?

A mianowicie w divach, np kiedy klikam rocket i wysuwa mi się div to przed pokazaniem zawartości chcę żeby był efekt preloadera

1 odpowiedź

odpowiedź 23 stycznia 2018 przez k.wichura Pasjonat (19,870 p.)
wybrane 23 stycznia 2018 przez Hardwell

Najlepsza

Może zrób sobie diva .loader, wstaw go w tego wysuwanego diva, a potem usuwaj i wstawiaj content ?

komentarz 23 stycznia 2018 przez Hardwell Dyskutant (8,980 p.)

Nie mam pojęcia jak sie do tego zabrać :c

komentarz 23 stycznia 2018 przez k.wichura Pasjonat (19,870 p.)

przykładowy loader poniżej.Wstaw go zamiast swojej zawartości diva. Jak wysuwany div się pojawi(czy tam po jakimś czasie, to już zależy od Ciebie) zamieniasz go na swój kontent(np ten rocket) za pomocą JS

przyklad https://jsfiddle.net/2L6mozdp/

PS. JEZELI JAKIS ADMIN/MODERATOR TO CZYTA, TO MENU KOMENTOWANIA NIE DZIAŁA NA SAFARI

.loader {
    margin: auto;
    border-bottom: 6px solid rgba(0, 0, 0, .1);
    border-left: 6px solid rgba(0, 0, 0, .1);
    border-right: 6px solid rgba(0, 0, 0, .1);
    border-top: 6px solid rgba(0, 0, 0, .4);
    border-radius: 100%;
    height: 50px;
    width: 50px;
    animation: rot .6s infinite linear;
}

@keyframes rot {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(359deg);
    }

komentarz 23 stycznia 2018 przez Hardwell Dyskutant (8,980 p.)

@k.wichura

const div = document.getElementById('1');
setTimeout(function(){ 
div.style.display = 'block';
div.innerHTML='xxx'; }, 1000);

w tym kodzie te xxx to zawartość strony po załadowaniu?

Można zamiast napisu podpiąć plik np test.html?

komentarz 23 stycznia 2018 przez k.wichura Pasjonat (19,870 p.)

No to już ajax wchodzi w grę, jeżeli dobrze rozumiem. Zamiast 'xxx' wstaw co chcesz(swoją zawartość).

To div.style.display można wyrzucić. Nie wiem skąd to się tam wzięło :D

komentarz 23 stycznia 2018 przez Hardwell Dyskutant (8,980 p.)

hmm, szczerze mówiąc dalej nie jarzę, mógł bys skopiować ten kod z linka który podesłałem i wkomponować go w tego loadera?

komentarz 23 stycznia 2018 przez k.wichura Pasjonat (19,870 p.)

Nie będę udawał, że znam się na css, więc jest to uproszczone na maxa i działa dla rakiety.

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

Musisz to dostosować do siebie. Może ktoś inny ma lepszy pomysł jak to zrobić za pomocą css.