Animated text and progress bars parsed from a simple string language.
Create a progress bar:
$("#bar").nyanBar({
charSize: charSize, // How many character to take up.
pattern: "-*>", // The pattern to parse.
showProgress: true, // Whether to show a percentage.
progressFunction: (function() {
var ctr = 0;
return function() {
ctr = (ctr + 1) % 100;
return ctr;
}
})() // The function that is queried for progress.
});
The language is simple. Say that a character or sequence should be repeated with the *
character:
var pattern = "-*>";
// Implies ==>
->
-->
--->
---->
---->
---->
Animate a single character with the []
operator, separating groups of characters with |
s:
var pattern = "[A|a]";
// ==>
A
a
A
a
A
a
There can be as many groups of characters in a []
as you want, so long as they are all of the same length.
Include repetition with the *
:
var pattern = "[A|a]*";
// ==>
A
Aa
AaA
AaAa
AaAa
AaAa
Make the characters continually animated with the {}
operator:
var pattern = "{A|a}*";
// ==>
A
aA
AaA
aAaA
AaAa
aAaA
Make them animate in unison with the {{}}
operator:
var pattern = "{{A|a}}*";
// ==>
A
aa
AAA
aaaa
AAAA
aaaa
And make {}
-animated characters run their animation in reverse by using the +
operator instead of *
:
var pattern = "{1|2|3}*";
// ==>
1
21
321
1321
2132
3213
var pattern = "{1|2|3}+";
// ==>
1
23
312
1231
2312
3123