NOVINKA: Kurz kybernetické bezpečnosti s akreditací MŠMT, nyní již od 0 Kč. Staň se žádaným profesionálem. Zjisti více:
Avatar
Marek Cmarko
Člen
Avatar
Marek Cmarko:21.7.2017 9:07

Caute, vie mi niekto prosím povedat, ako nastavit na tomto progress bare, - https://bootsnipp.com/…progress-bar aby to ukázalo menej ako 180° = 50% napr. ked chcem nastavit 10%. ? Viac ako 50% som nastavil tak ze som priradil danému @keyframes podla classu a nazvu animacie napr toto :

100%{
-webkit-transform: rotate(108deg);
transform: rotate(108deg);
}

nerozumiem ako to funguje, lebo mínusové hodnoty ° mi nepomohli. Musí sa to tam nejak skombinovať s týmto :

@keyframes loading-1{
    0%{
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100%{
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }

ale nevime ako

 
Odpovědět
21.7.2017 9:07
Avatar
Ján Timoranský
Tvůrce
Avatar
Odpovídá na Marek Cmarko
Ján Timoranský:21.7.2017 10:15

Ako pozerám, tak tento progress circle funguje na štýle dvoch polovíc, left a right. Ak chceš teda 50% stačí dať lavej polovice:

@keyframes loading-50{
        0% {
            -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
        }
        100% {
            -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
        }
}

Následne vieš upravovať pravú polovicu tak, že budeš uberať uhly v 100%. 180deg je celá polovica, 90deg je tým pádom iba štvrť kruhu. Ak chceš 10%, malo by to byť.

@keyframes loading-10{
        0% {
            -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
        }
        100% {
            -webkit-transform: rotate(36deg);
            transform: rotate(36deg);
        }
}
Nahoru Odpovědět
21.7.2017 10:15
Find what you love and let it kill you.
Avatar
Marek Cmarko
Člen
Avatar
Odpovídá na Ján Timoranský
Marek Cmarko:21.7.2017 13:48

Aha, tak to neviem prečo ma nenapadlo.... no ale mám napr. 3 rôzne druhy týchto barov ( všade iný počet %) jak nastavím aby len 3 . typ šiel do menej ako 50 % ? Lebo šak tento kód je iba pre právu polovicu :

.progress .progress-right .progress-bar{
    left: -100%;
    border-top-left-radius: 80px;
    border-bottom-left-radius: 80px;
    border-right: 0;
    -webkit-transform-origin: center right;
    transform-origin: center right;
    animation: loading-1 1.8s linear forwards;
}

a tá potom ovplyvnuje všetky typy barov.

Skúsil som vytvoriť taký istý kus kódu ako tento tu hore, ale s názvom .progress .progress-now .progress-bar a doň zmeniť ešte názov animácie *animation:** loading-now*** ale tak to nefunguje ...

 
Nahoru Odpovědět
21.7.2017 13:48
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 3 zpráv z 3.