Rakenna mukautetut reagoivat etenemispalkit, joissa on ProgressBar.js
Edistymispalkit ovat useimmille käyttäjille laajalti tunnettuja verkossa. Kehittäjille on usein monimutkainen prosessi luoda edistymispalkin tyhjästä. Mutta ProgressBar.js sinun ei tarvitse!
Tämä ilmainen avoimen lähdekoodin kirjasto ei ole riippuvuuksia ja tukee kaikkia tärkeimpiä selaimia, mukaan lukien IE9+.
Oletusarvoisesti voit käytä yksinkertaista palkkia, tai voit valitse muutamasta perusmuodosta, kuten:
- Yhden linjan
- puoliympyrä
- Täysi ympyrä
- Neliö
- Kolmio
Voit myös suunnitella omia muokattuja muotoja kuten sydän, pilvi tai jopa sivuston logo. Myönnetty tämä vie jonkin verran vaivaa, mutta lopputulos voi olla uskomaton.
Kirjasto toimii SVG-poluilla, joten jos voit rakentaa piirretty muoto voit käyttää SVG-merkintää animoi se tämän edistymispalkin kirjaston kanssa.
Animaatiot voivat myös sisältää tekstiä tai sinulla on mukautettuja aloitus- / lopetusmalleja. Täysi API on lisätietoja ja vaihtoehtoja / takaisinsoittoja että voit tutustua vapaa-aikaan.
ProgressBar.js: lla on myös pieni Asennusohje missä voit lataa ja määritä skripti käyttämällä Bower, npm tai GitHub-sivua.
Ja jos rakennetaan jotain viileää, voit lähetä koodi GitHub-repoon. Projektin luoja Kimmo Brunfeldtillä on avaa GitHub-ongelma missä voit lähettää mukautettuja malleja kirjastoon.
Sinä pystyt lisää animoituja etenemispalkkeja kirjautumissivuille, latauskenttiin tai mihin tahansa verkkosivuun esilatauslaitteena. Vaihtoehtoja rajoittaa vain kuinka yksityiskohtaisesti olet valmis saamaan.
Pidän esimerkiksi salasanan vahvuusmittarin demosta sen jälkeen palvelee todellista tarkoitusta ja hyödyttää käyttäjäkokemusta. Tämä esimerkki tulee paketin mukana, joten voit kopioida tämän ja muokata sitä haluamallasi tavalla.
Nähdä enemmän esimerkkejä, tutustu ProgressBar.js: n kotisivulle tai kurkista tätä viulua, joka demoi sydämen animaatiota.
