Skip to content

Commit c05d0fe

Browse files
zbryiktzbryikt
committed
add 'jingle' animation
1 parent ecf17d5 commit c05d0fe

5 files changed

Lines changed: 495 additions & 1 deletion

File tree

‎dist/loading.css‎

Lines changed: 384 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2927,6 +2927,198 @@
29272927
-webkit-animation: ld-wander-v 1s infinite ease-out;
29282928
animation: ld-wander-v 1s infinite ease-out;
29292929
}
2930+
@keyframes ld-jingle {
2931+
0% {
2932+
-webkit-transform: translate(0, -40%) rotate(0deg) translate(0, 40%);
2933+
transform: translate(0, -40%) rotate(0deg) translate(0, 40%);
2934+
}
2935+
4% {
2936+
-webkit-transform: translate(0, -40%) rotate(11deg) translate(0, 40%);
2937+
transform: translate(0, -40%) rotate(11deg) translate(0, 40%);
2938+
}
2939+
10% {
2940+
-webkit-transform: translate(0, -40%) rotate(15deg) translate(0, 40%);
2941+
transform: translate(0, -40%) rotate(15deg) translate(0, 40%);
2942+
}
2943+
18% {
2944+
-webkit-transform: translate(0, -40%) rotate(-11deg) translate(0, 40%);
2945+
transform: translate(0, -40%) rotate(-11deg) translate(0, 40%);
2946+
}
2947+
20% {
2948+
-webkit-transform: translate(0, -40%) rotate(-13deg) translate(0, 40%);
2949+
transform: translate(0, -40%) rotate(-13deg) translate(0, 40%);
2950+
}
2951+
21% {
2952+
-webkit-transform: translate(0, -40%) rotate(-12deg) translate(0, 40%);
2953+
transform: translate(0, -40%) rotate(-12deg) translate(0, 40%);
2954+
}
2955+
22% {
2956+
-webkit-transform: translate(0, -40%) rotate(-10deg) translate(0, 40%);
2957+
transform: translate(0, -40%) rotate(-10deg) translate(0, 40%);
2958+
}
2959+
24% {
2960+
-webkit-transform: translate(0, -40%) rotate(-5deg) translate(0, 40%);
2961+
transform: translate(0, -40%) rotate(-5deg) translate(0, 40%);
2962+
}
2963+
26% {
2964+
-webkit-transform: translate(0, -40%) rotate(3deg) translate(0, 40%);
2965+
transform: translate(0, -40%) rotate(3deg) translate(0, 40%);
2966+
}
2967+
28% {
2968+
-webkit-transform: translate(0, -40%) rotate(9deg) translate(0, 40%);
2969+
transform: translate(0, -40%) rotate(9deg) translate(0, 40%);
2970+
}
2971+
30% {
2972+
-webkit-transform: translate(0, -40%) rotate(10deg) translate(0, 40%);
2973+
transform: translate(0, -40%) rotate(10deg) translate(0, 40%);
2974+
}
2975+
31% {
2976+
-webkit-transform: translate(0, -40%) rotate(9deg) translate(0, 40%);
2977+
transform: translate(0, -40%) rotate(9deg) translate(0, 40%);
2978+
}
2979+
33% {
2980+
-webkit-transform: translate(0, -40%) rotate(5deg) translate(0, 40%);
2981+
transform: translate(0, -40%) rotate(5deg) translate(0, 40%);
2982+
}
2983+
34% {
2984+
-webkit-transform: translate(0, -40%) rotate(1deg) translate(0, 40%);
2985+
transform: translate(0, -40%) rotate(1deg) translate(0, 40%);
2986+
}
2987+
36% {
2988+
-webkit-transform: translate(0, -40%) rotate(-5deg) translate(0, 40%);
2989+
transform: translate(0, -40%) rotate(-5deg) translate(0, 40%);
2990+
}
2991+
39% {
2992+
-webkit-transform: translate(0, -40%) rotate(-8deg) translate(0, 40%);
2993+
transform: translate(0, -40%) rotate(-8deg) translate(0, 40%);
2994+
}
2995+
40% {
2996+
-webkit-transform: translate(0, -40%) rotate(-7deg) translate(0, 40%);
2997+
transform: translate(0, -40%) rotate(-7deg) translate(0, 40%);
2998+
}
2999+
44% {
3000+
-webkit-transform: translate(0, -40%) rotate(3deg) translate(0, 40%);
3001+
transform: translate(0, -40%) rotate(3deg) translate(0, 40%);
3002+
}
3003+
47% {
3004+
-webkit-transform: translate(0, -40%) rotate(7deg) translate(0, 40%);
3005+
transform: translate(0, -40%) rotate(7deg) translate(0, 40%);
3006+
}
3007+
56% {
3008+
-webkit-transform: translate(0, -40%) rotate(-5deg) translate(0, 40%);
3009+
transform: translate(0, -40%) rotate(-5deg) translate(0, 40%);
3010+
}
3011+
63% {
3012+
-webkit-transform: translate(0, -40%) rotate(1deg) translate(0, 40%);
3013+
transform: translate(0, -40%) rotate(1deg) translate(0, 40%);
3014+
}
3015+
75% {
3016+
-webkit-transform: translate(0, -40%) rotate(-1deg) translate(0, 40%);
3017+
transform: translate(0, -40%) rotate(-1deg) translate(0, 40%);
3018+
}
3019+
100% {
3020+
-webkit-transform: translate(0, -40%) rotate(0deg) translate(0, 40%);
3021+
transform: translate(0, -40%) rotate(0deg) translate(0, 40%);
3022+
}
3023+
}
3024+
@-webkit-keyframes ld-jingle {
3025+
0% {
3026+
-webkit-transform: translate(0, -40%) rotate(0deg) translate(0, 40%);
3027+
transform: translate(0, -40%) rotate(0deg) translate(0, 40%);
3028+
}
3029+
4% {
3030+
-webkit-transform: translate(0, -40%) rotate(11deg) translate(0, 40%);
3031+
transform: translate(0, -40%) rotate(11deg) translate(0, 40%);
3032+
}
3033+
10% {
3034+
-webkit-transform: translate(0, -40%) rotate(15deg) translate(0, 40%);
3035+
transform: translate(0, -40%) rotate(15deg) translate(0, 40%);
3036+
}
3037+
18% {
3038+
-webkit-transform: translate(0, -40%) rotate(-11deg) translate(0, 40%);
3039+
transform: translate(0, -40%) rotate(-11deg) translate(0, 40%);
3040+
}
3041+
20% {
3042+
-webkit-transform: translate(0, -40%) rotate(-13deg) translate(0, 40%);
3043+
transform: translate(0, -40%) rotate(-13deg) translate(0, 40%);
3044+
}
3045+
21% {
3046+
-webkit-transform: translate(0, -40%) rotate(-12deg) translate(0, 40%);
3047+
transform: translate(0, -40%) rotate(-12deg) translate(0, 40%);
3048+
}
3049+
22% {
3050+
-webkit-transform: translate(0, -40%) rotate(-10deg) translate(0, 40%);
3051+
transform: translate(0, -40%) rotate(-10deg) translate(0, 40%);
3052+
}
3053+
24% {
3054+
-webkit-transform: translate(0, -40%) rotate(-5deg) translate(0, 40%);
3055+
transform: translate(0, -40%) rotate(-5deg) translate(0, 40%);
3056+
}
3057+
26% {
3058+
-webkit-transform: translate(0, -40%) rotate(3deg) translate(0, 40%);
3059+
transform: translate(0, -40%) rotate(3deg) translate(0, 40%);
3060+
}
3061+
28% {
3062+
-webkit-transform: translate(0, -40%) rotate(9deg) translate(0, 40%);
3063+
transform: translate(0, -40%) rotate(9deg) translate(0, 40%);
3064+
}
3065+
30% {
3066+
-webkit-transform: translate(0, -40%) rotate(10deg) translate(0, 40%);
3067+
transform: translate(0, -40%) rotate(10deg) translate(0, 40%);
3068+
}
3069+
31% {
3070+
-webkit-transform: translate(0, -40%) rotate(9deg) translate(0, 40%);
3071+
transform: translate(0, -40%) rotate(9deg) translate(0, 40%);
3072+
}
3073+
33% {
3074+
-webkit-transform: translate(0, -40%) rotate(5deg) translate(0, 40%);
3075+
transform: translate(0, -40%) rotate(5deg) translate(0, 40%);
3076+
}
3077+
34% {
3078+
-webkit-transform: translate(0, -40%) rotate(1deg) translate(0, 40%);
3079+
transform: translate(0, -40%) rotate(1deg) translate(0, 40%);
3080+
}
3081+
36% {
3082+
-webkit-transform: translate(0, -40%) rotate(-5deg) translate(0, 40%);
3083+
transform: translate(0, -40%) rotate(-5deg) translate(0, 40%);
3084+
}
3085+
39% {
3086+
-webkit-transform: translate(0, -40%) rotate(-8deg) translate(0, 40%);
3087+
transform: translate(0, -40%) rotate(-8deg) translate(0, 40%);
3088+
}
3089+
40% {
3090+
-webkit-transform: translate(0, -40%) rotate(-7deg) translate(0, 40%);
3091+
transform: translate(0, -40%) rotate(-7deg) translate(0, 40%);
3092+
}
3093+
44% {
3094+
-webkit-transform: translate(0, -40%) rotate(3deg) translate(0, 40%);
3095+
transform: translate(0, -40%) rotate(3deg) translate(0, 40%);
3096+
}
3097+
47% {
3098+
-webkit-transform: translate(0, -40%) rotate(7deg) translate(0, 40%);
3099+
transform: translate(0, -40%) rotate(7deg) translate(0, 40%);
3100+
}
3101+
56% {
3102+
-webkit-transform: translate(0, -40%) rotate(-5deg) translate(0, 40%);
3103+
transform: translate(0, -40%) rotate(-5deg) translate(0, 40%);
3104+
}
3105+
63% {
3106+
-webkit-transform: translate(0, -40%) rotate(1deg) translate(0, 40%);
3107+
transform: translate(0, -40%) rotate(1deg) translate(0, 40%);
3108+
}
3109+
75% {
3110+
-webkit-transform: translate(0, -40%) rotate(-1deg) translate(0, 40%);
3111+
transform: translate(0, -40%) rotate(-1deg) translate(0, 40%);
3112+
}
3113+
100% {
3114+
-webkit-transform: translate(0, -40%) rotate(0deg) translate(0, 40%);
3115+
transform: translate(0, -40%) rotate(0deg) translate(0, 40%);
3116+
}
3117+
}
3118+
.ld.ld-jingle {
3119+
-webkit-animation: ld-jingle 1s infinite;
3120+
animation: ld-jingle 1s infinite;
3121+
}
29303122
@keyframes ld-bounce-px {
29313123
0%, 90% {
29323124
animation-timing-function: linear;
@@ -4265,4 +4457,196 @@
42654457
-webkit-animation: ld-wander-px-v 1s infinite ease-out;
42664458
animation: ld-wander-px-v 1s infinite ease-out;
42674459
}
4460+
@keyframes ld-jingle {
4461+
0% {
4462+
-webkit-transform: translate(0, -40px) rotate(0deg) translate(0, 40px);
4463+
transform: translate(0, -40px) rotate(0deg) translate(0, 40px);
4464+
}
4465+
4% {
4466+
-webkit-transform: translate(0, -40px) rotate(11deg) translate(0, 40px);
4467+
transform: translate(0, -40px) rotate(11deg) translate(0, 40px);
4468+
}
4469+
10% {
4470+
-webkit-transform: translate(0, -40px) rotate(15deg) translate(0, 40px);
4471+
transform: translate(0, -40px) rotate(15deg) translate(0, 40px);
4472+
}
4473+
18% {
4474+
-webkit-transform: translate(0, -40px) rotate(-11deg) translate(0, 40px);
4475+
transform: translate(0, -40px) rotate(-11deg) translate(0, 40px);
4476+
}
4477+
20% {
4478+
-webkit-transform: translate(0, -40px) rotate(-13deg) translate(0, 40px);
4479+
transform: translate(0, -40px) rotate(-13deg) translate(0, 40px);
4480+
}
4481+
21% {
4482+
-webkit-transform: translate(0, -40px) rotate(-12deg) translate(0, 40px);
4483+
transform: translate(0, -40px) rotate(-12deg) translate(0, 40px);
4484+
}
4485+
22% {
4486+
-webkit-transform: translate(0, -40px) rotate(-10deg) translate(0, 40px);
4487+
transform: translate(0, -40px) rotate(-10deg) translate(0, 40px);
4488+
}
4489+
24% {
4490+
-webkit-transform: translate(0, -40px) rotate(-5deg) translate(0, 40px);
4491+
transform: translate(0, -40px) rotate(-5deg) translate(0, 40px);
4492+
}
4493+
26% {
4494+
-webkit-transform: translate(0, -40px) rotate(3deg) translate(0, 40px);
4495+
transform: translate(0, -40px) rotate(3deg) translate(0, 40px);
4496+
}
4497+
28% {
4498+
-webkit-transform: translate(0, -40px) rotate(9deg) translate(0, 40px);
4499+
transform: translate(0, -40px) rotate(9deg) translate(0, 40px);
4500+
}
4501+
30% {
4502+
-webkit-transform: translate(0, -40px) rotate(10deg) translate(0, 40px);
4503+
transform: translate(0, -40px) rotate(10deg) translate(0, 40px);
4504+
}
4505+
31% {
4506+
-webkit-transform: translate(0, -40px) rotate(9deg) translate(0, 40px);
4507+
transform: translate(0, -40px) rotate(9deg) translate(0, 40px);
4508+
}
4509+
33% {
4510+
-webkit-transform: translate(0, -40px) rotate(5deg) translate(0, 40px);
4511+
transform: translate(0, -40px) rotate(5deg) translate(0, 40px);
4512+
}
4513+
34% {
4514+
-webkit-transform: translate(0, -40px) rotate(1deg) translate(0, 40px);
4515+
transform: translate(0, -40px) rotate(1deg) translate(0, 40px);
4516+
}
4517+
36% {
4518+
-webkit-transform: translate(0, -40px) rotate(-5deg) translate(0, 40px);
4519+
transform: translate(0, -40px) rotate(-5deg) translate(0, 40px);
4520+
}
4521+
39% {
4522+
-webkit-transform: translate(0, -40px) rotate(-8deg) translate(0, 40px);
4523+
transform: translate(0, -40px) rotate(-8deg) translate(0, 40px);
4524+
}
4525+
40% {
4526+
-webkit-transform: translate(0, -40px) rotate(-7deg) translate(0, 40px);
4527+
transform: translate(0, -40px) rotate(-7deg) translate(0, 40px);
4528+
}
4529+
44% {
4530+
-webkit-transform: translate(0, -40px) rotate(3deg) translate(0, 40px);
4531+
transform: translate(0, -40px) rotate(3deg) translate(0, 40px);
4532+
}
4533+
47% {
4534+
-webkit-transform: translate(0, -40px) rotate(7deg) translate(0, 40px);
4535+
transform: translate(0, -40px) rotate(7deg) translate(0, 40px);
4536+
}
4537+
56% {
4538+
-webkit-transform: translate(0, -40px) rotate(-5deg) translate(0, 40px);
4539+
transform: translate(0, -40px) rotate(-5deg) translate(0, 40px);
4540+
}
4541+
63% {
4542+
-webkit-transform: translate(0, -40px) rotate(1deg) translate(0, 40px);
4543+
transform: translate(0, -40px) rotate(1deg) translate(0, 40px);
4544+
}
4545+
75% {
4546+
-webkit-transform: translate(0, -40px) rotate(-1deg) translate(0, 40px);
4547+
transform: translate(0, -40px) rotate(-1deg) translate(0, 40px);
4548+
}
4549+
100% {
4550+
-webkit-transform: translate(0, -40px) rotate(0deg) translate(0, 40px);
4551+
transform: translate(0, -40px) rotate(0deg) translate(0, 40px);
4552+
}
4553+
}
4554+
@-webkit-keyframes ld-jingle {
4555+
0% {
4556+
-webkit-transform: translate(0, -40px) rotate(0deg) translate(0, 40px);
4557+
transform: translate(0, -40px) rotate(0deg) translate(0, 40px);
4558+
}
4559+
4% {
4560+
-webkit-transform: translate(0, -40px) rotate(11deg) translate(0, 40px);
4561+
transform: translate(0, -40px) rotate(11deg) translate(0, 40px);
4562+
}
4563+
10% {
4564+
-webkit-transform: translate(0, -40px) rotate(15deg) translate(0, 40px);
4565+
transform: translate(0, -40px) rotate(15deg) translate(0, 40px);
4566+
}
4567+
18% {
4568+
-webkit-transform: translate(0, -40px) rotate(-11deg) translate(0, 40px);
4569+
transform: translate(0, -40px) rotate(-11deg) translate(0, 40px);
4570+
}
4571+
20% {
4572+
-webkit-transform: translate(0, -40px) rotate(-13deg) translate(0, 40px);
4573+
transform: translate(0, -40px) rotate(-13deg) translate(0, 40px);
4574+
}
4575+
21% {
4576+
-webkit-transform: translate(0, -40px) rotate(-12deg) translate(0, 40px);
4577+
transform: translate(0, -40px) rotate(-12deg) translate(0, 40px);
4578+
}
4579+
22% {
4580+
-webkit-transform: translate(0, -40px) rotate(-10deg) translate(0, 40px);
4581+
transform: translate(0, -40px) rotate(-10deg) translate(0, 40px);
4582+
}
4583+
24% {
4584+
-webkit-transform: translate(0, -40px) rotate(-5deg) translate(0, 40px);
4585+
transform: translate(0, -40px) rotate(-5deg) translate(0, 40px);
4586+
}
4587+
26% {
4588+
-webkit-transform: translate(0, -40px) rotate(3deg) translate(0, 40px);
4589+
transform: translate(0, -40px) rotate(3deg) translate(0, 40px);
4590+
}
4591+
28% {
4592+
-webkit-transform: translate(0, -40px) rotate(9deg) translate(0, 40px);
4593+
transform: translate(0, -40px) rotate(9deg) translate(0, 40px);
4594+
}
4595+
30% {
4596+
-webkit-transform: translate(0, -40px) rotate(10deg) translate(0, 40px);
4597+
transform: translate(0, -40px) rotate(10deg) translate(0, 40px);
4598+
}
4599+
31% {
4600+
-webkit-transform: translate(0, -40px) rotate(9deg) translate(0, 40px);
4601+
transform: translate(0, -40px) rotate(9deg) translate(0, 40px);
4602+
}
4603+
33% {
4604+
-webkit-transform: translate(0, -40px) rotate(5deg) translate(0, 40px);
4605+
transform: translate(0, -40px) rotate(5deg) translate(0, 40px);
4606+
}
4607+
34% {
4608+
-webkit-transform: translate(0, -40px) rotate(1deg) translate(0, 40px);
4609+
transform: translate(0, -40px) rotate(1deg) translate(0, 40px);
4610+
}
4611+
36% {
4612+
-webkit-transform: translate(0, -40px) rotate(-5deg) translate(0, 40px);
4613+
transform: translate(0, -40px) rotate(-5deg) translate(0, 40px);
4614+
}
4615+
39% {
4616+
-webkit-transform: translate(0, -40px) rotate(-8deg) translate(0, 40px);
4617+
transform: translate(0, -40px) rotate(-8deg) translate(0, 40px);
4618+
}
4619+
40% {
4620+
-webkit-transform: translate(0, -40px) rotate(-7deg) translate(0, 40px);
4621+
transform: translate(0, -40px) rotate(-7deg) translate(0, 40px);
4622+
}
4623+
44% {
4624+
-webkit-transform: translate(0, -40px) rotate(3deg) translate(0, 40px);
4625+
transform: translate(0, -40px) rotate(3deg) translate(0, 40px);
4626+
}
4627+
47% {
4628+
-webkit-transform: translate(0, -40px) rotate(7deg) translate(0, 40px);
4629+
transform: translate(0, -40px) rotate(7deg) translate(0, 40px);
4630+
}
4631+
56% {
4632+
-webkit-transform: translate(0, -40px) rotate(-5deg) translate(0, 40px);
4633+
transform: translate(0, -40px) rotate(-5deg) translate(0, 40px);
4634+
}
4635+
63% {
4636+
-webkit-transform: translate(0, -40px) rotate(1deg) translate(0, 40px);
4637+
transform: translate(0, -40px) rotate(1deg) translate(0, 40px);
4638+
}
4639+
75% {
4640+
-webkit-transform: translate(0, -40px) rotate(-1deg) translate(0, 40px);
4641+
transform: translate(0, -40px) rotate(-1deg) translate(0, 40px);
4642+
}
4643+
100% {
4644+
-webkit-transform: translate(0, -40px) rotate(0deg) translate(0, 40px);
4645+
transform: translate(0, -40px) rotate(0deg) translate(0, 40px);
4646+
}
4647+
}
4648+
.ld.ld-jingle {
4649+
-webkit-animation: ld-jingle 1s infinite;
4650+
animation: ld-jingle 1s infinite;
4651+
}
42684652

‎dist/loading.min.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)