Sukurkite pasirinktines reagavimo juostas su ProgressBar.js
Pažangos juostos daugelis žiniatinklio vartotojų yra plačiai žinomi. Kūrėjams dažnai yra sudėtingas procesas sukurkite pažangos juostą nuo nulio. Bet su ProgressBar.js jums nereikia!
Ši nemokama atviro kodo biblioteka neturi priklausomybių ir palaiko visas pagrindines naršykles, įskaitant IE9+.
Pagal numatytuosius nustatymus galite naudoti paprastą juostą, arba galite pasirinkti iš kelių pagrindinių formų, toks kaip:
- Viena linija
- Puslankis
- Pilnas ratas
- Aikštė
- Trikampis
Taip pat galite kurti savo pasirinktines figūras pvz., širdis, debesis arba netgi jūsų svetainės logotipas. Tai suteiks šiek tiek pastangų, tačiau galutinis rezultatas gali būti neįtikėtinas.
Biblioteka veikia SVG keliuose, taigi, jei galite sukurti apibrėžtą formą galite naudoti SVG žymėjimą animuoti su šia pažangos juostos biblioteka.
Animacijos taip pat gali įtraukti tekstą arba turėti individualius pradžios / sustabdymo modelius. Visa API yra daugiau informacijos su parinktimis / atšaukimais kad jūs galite susipažinti savo laisvalaikiu.
ProgressBar.js taip pat turi mažą diegimo vadovas kur galite atsisiųskite ir nustatykite scenarijų naudojant „Bower“, „npm“ arba paprastesnį „GitHub“ puslapį.
Ir jei jūs statote viską, ką galite pateikti savo kodą į „GitHub“ repo. Projekto kūrėjas Kimmo Brunfeldtas turi atidarykite „GitHub“ problemą kur galite pateikti pasirinktinius dizainus įtraukti į biblioteką.
Tu gali pridėti animacinių progreso juostų prisiregistravimo puslapiams, įkėlimo laukams arba bet kuriam tinklalapiui kaip preloader. Galimybės yra ribotos tik kaip išsami esate pasiruošę gauti.
Pavyzdžiui, man patinka slaptažodžio stiprumo matuoklio demonstracija nuo jos tarnauja tikram tikslui ir naudinga vartotojui. Šis pavyzdys yra supakuotas su papildiniu, todėl galite kopijuoti ir modifikuoti jį pagal savo pageidavimus.
Matyti daugiau pavyzdžių, pažiūrėkite į „ProgressBar.js“ pagrindinį puslapį arba žiūrėkite į šį smuiką, kuriame demonstruojama širdies animacija.
