move.gl 0.0.1 → 0.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (463) hide show
  1. package/README.md +185 -11
  2. package/dist/LICENSE +21 -0
  3. package/dist/README.md +212 -0
  4. package/dist/css/move.gl.css +43859 -0
  5. package/dist/css/move.gl.min.css +19 -0
  6. package/dist/js/index.cjs +1171 -0
  7. package/dist/js/index.cjs.map +1 -0
  8. package/dist/js/index.d.cts +184 -0
  9. package/dist/js/index.d.ts +184 -0
  10. package/dist/js/index.mjs +1135 -0
  11. package/dist/js/index.mjs.map +1 -0
  12. package/dist/package.json +68 -0
  13. package/{scss → dist/scss}/classes/_animations.scss +33 -14
  14. package/dist/scss/classes/_controls.scss +314 -0
  15. package/dist/scss/classes/_effects.scss +283 -0
  16. package/dist/scss/classes/_index.scss +28 -0
  17. package/dist/scss/classes/_loaders.scss +779 -0
  18. package/dist/scss/classes/_transforms.scss +138 -0
  19. package/dist/scss/classes/_transitions.scss +264 -0
  20. package/{scss → dist/scss}/dev/_deprecation.scss +6 -3
  21. package/{scss → dist/scss}/dev/_modules.scss +5 -6
  22. package/dist/scss/docs.scss +2344 -0
  23. package/dist/scss/docs.scss.bak +3133 -0
  24. package/dist/scss/functions/_index.scss +22 -0
  25. package/dist/scss/functions/scenes/_bubble.scss +32 -0
  26. package/dist/scss/functions/scenes/_index.scss +21 -0
  27. package/dist/scss/index.scss +17 -0
  28. package/dist/scss/maps/_controls.scss +85 -0
  29. package/dist/scss/maps/_index.scss +22 -0
  30. package/{scss → dist/scss}/mixins/_accessibility.scss +24 -3
  31. package/{scss → dist/scss}/mixins/_boot.scss +4 -4
  32. package/dist/scss/mixins/_index.scss +41 -0
  33. package/dist/scss/mixins/_screensaver.scss +228 -0
  34. package/dist/scss/mixins/_shape.scss +315 -0
  35. package/dist/scss/mixins/animations/_base.scss +403 -0
  36. package/dist/scss/mixins/animations/_beat.scss +137 -0
  37. package/{scss → dist/scss}/mixins/animations/_blink.scss +60 -52
  38. package/dist/scss/mixins/animations/_bounce.scss +306 -0
  39. package/{scss → dist/scss}/mixins/animations/_elastic.scss +26 -22
  40. package/dist/scss/mixins/animations/_fade.scss +393 -0
  41. package/{scss → dist/scss}/mixins/animations/_flash.scss +53 -61
  42. package/dist/scss/mixins/animations/_flip.scss +251 -0
  43. package/{scss → dist/scss}/mixins/animations/_float.scss +47 -32
  44. package/{scss → dist/scss}/mixins/animations/_glow.scss +69 -58
  45. package/dist/scss/mixins/animations/_heartbeat.scss +195 -0
  46. package/dist/scss/mixins/animations/_hinge.scss +118 -0
  47. package/dist/scss/mixins/animations/_index.scss +97 -0
  48. package/dist/scss/mixins/animations/_jello.scss +123 -0
  49. package/dist/scss/mixins/animations/_jiggle.scss +162 -0
  50. package/dist/scss/mixins/animations/_lightspeed.scss +135 -0
  51. package/{scss → dist/scss}/mixins/animations/_nod.scss +57 -65
  52. package/dist/scss/mixins/animations/_pop.scss +153 -0
  53. package/dist/scss/mixins/animations/_pulse.scss +275 -0
  54. package/{scss → dist/scss}/mixins/animations/_ripple.scss +47 -55
  55. package/dist/scss/mixins/animations/_roll.scss +217 -0
  56. package/dist/scss/mixins/animations/_rotate.scss +728 -0
  57. package/dist/scss/mixins/animations/_rubber.scss +115 -0
  58. package/dist/scss/mixins/animations/_scale.scss +382 -0
  59. package/dist/scss/mixins/animations/_shake.scss +233 -0
  60. package/dist/scss/mixins/animations/_slide.scss +501 -0
  61. package/dist/scss/mixins/animations/_spin.scss +322 -0
  62. package/{scss → dist/scss}/mixins/animations/_sway.scss +32 -49
  63. package/{scss → dist/scss}/mixins/animations/_swing.scss +47 -49
  64. package/{scss → dist/scss}/mixins/animations/_tada.scss +44 -42
  65. package/{scss → dist/scss}/mixins/animations/_twist.scss +40 -55
  66. package/{scss → dist/scss}/mixins/animations/_wave.scss +36 -53
  67. package/dist/scss/mixins/animations/_wobble.scss +283 -0
  68. package/dist/scss/mixins/animations/_zoom.scss +394 -0
  69. package/{scss/mixins/mouse → dist/scss/mixins/controls}/_cursor.scss +60 -39
  70. package/dist/scss/mixins/controls/_hover.scss +625 -0
  71. package/dist/scss/mixins/controls/_index.scss +30 -0
  72. package/dist/scss/mixins/controls/_keyboard.scss +300 -0
  73. package/{scss/mixins/mouse → dist/scss/mixins/controls}/_pointer.scss +81 -72
  74. package/dist/scss/mixins/controls/_scroll.scss +460 -0
  75. package/{scss/mixins/scroll → dist/scss/mixins/controls}/_scrollbar.scss +50 -16
  76. package/dist/scss/mixins/controls/_selection.scss +208 -0
  77. package/dist/scss/mixins/controls/_touch.scss +401 -0
  78. package/dist/scss/mixins/effects/_blend.scss +128 -0
  79. package/dist/scss/mixins/effects/_filter.scss +470 -0
  80. package/dist/scss/mixins/effects/_focus.scss +83 -0
  81. package/dist/scss/mixins/effects/_gradient.scss +130 -0
  82. package/dist/scss/mixins/effects/_index.scss +28 -0
  83. package/dist/scss/mixins/effects/_mask.scss +76 -0
  84. package/dist/scss/mixins/effects/_opacity.scss +376 -0
  85. package/dist/scss/mixins/effects/_shadow.scss +429 -0
  86. package/dist/scss/mixins/keyframes/_base.scss +199 -0
  87. package/dist/scss/mixins/keyframes/_index.scss +24 -0
  88. package/dist/scss/mixins/keyframes/animations/_beat.scss +280 -0
  89. package/dist/scss/mixins/keyframes/animations/_blink.scss +82 -0
  90. package/dist/scss/mixins/keyframes/animations/_bounce.scss +292 -0
  91. package/dist/scss/mixins/keyframes/animations/_fade.scss +311 -0
  92. package/dist/scss/mixins/keyframes/animations/_flash.scss +165 -0
  93. package/dist/scss/mixins/keyframes/animations/_flip.scss +266 -0
  94. package/{scss/mixins → dist/scss/mixins/keyframes}/animations/_index.scss +19 -10
  95. package/dist/scss/mixins/keyframes/animations/_jiggle.scss +85 -0
  96. package/dist/scss/mixins/keyframes/animations/_lightspeed.scss +73 -0
  97. package/dist/scss/mixins/keyframes/animations/_nod.scss +79 -0
  98. package/dist/scss/mixins/keyframes/animations/_pop.scss +78 -0
  99. package/dist/scss/mixins/keyframes/animations/_pulse.scss +225 -0
  100. package/dist/scss/mixins/keyframes/animations/_ripple.scss +94 -0
  101. package/dist/scss/mixins/keyframes/animations/_roll.scss +124 -0
  102. package/dist/scss/mixins/keyframes/animations/_rotate.scss +360 -0
  103. package/dist/scss/mixins/keyframes/animations/_rubber.scss +81 -0
  104. package/dist/scss/mixins/keyframes/animations/_scale.scss +308 -0
  105. package/dist/scss/mixins/keyframes/animations/_shake.scss +270 -0
  106. package/dist/scss/mixins/keyframes/animations/_slide.scss +345 -0
  107. package/dist/scss/mixins/keyframes/animations/_spin.scss +270 -0
  108. package/dist/scss/mixins/keyframes/animations/_sway.scss +83 -0
  109. package/dist/scss/mixins/keyframes/animations/_twist.scss +89 -0
  110. package/dist/scss/mixins/keyframes/animations/_wave.scss +90 -0
  111. package/dist/scss/mixins/keyframes/animations/_wobble.scss +293 -0
  112. package/dist/scss/mixins/keyframes/animations/_zoom.scss +345 -0
  113. package/dist/scss/mixins/loaders/_bars.scss +128 -0
  114. package/dist/scss/mixins/loaders/_base.scss +39 -0
  115. package/dist/scss/mixins/loaders/_bubble.scss +395 -0
  116. package/dist/scss/mixins/loaders/_circle.scss +456 -0
  117. package/dist/scss/mixins/loaders/_dots.scss +248 -0
  118. package/dist/scss/mixins/loaders/_graph.scss +542 -0
  119. package/dist/scss/mixins/loaders/_index.scss +77 -0
  120. package/dist/scss/mixins/loaders/_line.scss +471 -0
  121. package/dist/scss/mixins/loaders/_objects.scss +563 -0
  122. package/dist/scss/mixins/loaders/_progress.scss +477 -0
  123. package/dist/scss/mixins/loaders/_rect.scss +480 -0
  124. package/dist/scss/mixins/loaders/_rings.scss +377 -0
  125. package/dist/scss/mixins/loaders/_skeleton.scss +461 -0
  126. package/dist/scss/mixins/loaders/_special.scss +611 -0
  127. package/dist/scss/mixins/loaders/_spinner.scss +175 -0
  128. package/dist/scss/mixins/loaders/_text.scss +446 -0
  129. package/{scss → dist/scss}/mixins/transforms/_flip.scss +16 -18
  130. package/dist/scss/mixins/transforms/_index.scss +28 -0
  131. package/dist/scss/mixins/transforms/_matrix.scss +18 -0
  132. package/{scss → dist/scss}/mixins/transforms/_perspective.scss +18 -1
  133. package/{scss → dist/scss}/mixins/transforms/_rotate.scss +9 -14
  134. package/{scss → dist/scss}/mixins/transforms/_scale.scss +16 -1
  135. package/{scss → dist/scss}/mixins/transforms/_skew.scss +16 -2
  136. package/{scss → dist/scss}/mixins/transforms/_translate.scss +16 -2
  137. package/dist/scss/mixins/transitions/_index.scss +22 -0
  138. package/dist/scss/mixins/transitions/_transition.scss +43 -0
  139. package/dist/scss/variables/_animations.scss +300 -0
  140. package/dist/scss/variables/_controls.scss +178 -0
  141. package/dist/scss/variables/_effects.scss +87 -0
  142. package/dist/scss/variables/_index.scss +27 -0
  143. package/dist/scss/variables/_keyframes.scss +28 -0
  144. package/dist/scss/variables/_loaders.scss +75 -0
  145. package/dist/scss/variables/_transforms.scss +85 -0
  146. package/dist/scss/variables/_transitions.scss +80 -0
  147. package/dist/ts/Draggable.ts +143 -0
  148. package/dist/ts/Gesture.ts +226 -0
  149. package/dist/ts/Keyboard.ts +195 -0
  150. package/dist/ts/LoaderManager.ts +662 -0
  151. package/dist/ts/Screensaver.ts +192 -0
  152. package/dist/ts/VideoOverlay.ts +205 -0
  153. package/dist/ts/demo.ts +1108 -0
  154. package/dist/ts/index.ts +58 -0
  155. package/package.json +90 -53
  156. package/src/html/_base.html +138 -0
  157. package/src/html/base.html +147 -0
  158. package/src/html/core-concepts.html +282 -0
  159. package/src/html/demo_base.html +171 -0
  160. package/src/html/demo_draggable.html +250 -0
  161. package/src/html/demo_gesture.html +264 -0
  162. package/src/html/demo_keyboard.html +224 -0
  163. package/src/html/demo_screensaver.html +258 -0
  164. package/src/html/demo_video_overlay.html +291 -0
  165. package/src/html/getting-started.html +242 -0
  166. package/src/html/index.html +400 -0
  167. package/src/html/keyboard.html +14 -0
  168. package/src/html/partials/_demo_links.html +21 -0
  169. package/src/html/partials/_footer.html +18 -0
  170. package/src/html/partials/_head.html +21 -0
  171. package/src/html/partials/_nav.html +84 -0
  172. package/src/html/partials/_theme_toggle.html +11 -0
  173. package/src/html/screensaver.html +20 -0
  174. package/src/html/test_animations.html +813 -0
  175. package/src/html/test_attention.html +281 -0
  176. package/src/html/test_bounce.html +201 -0
  177. package/src/html/test_effects.html +1348 -0
  178. package/src/html/test_fade.html +213 -0
  179. package/src/html/test_flip.html +208 -0
  180. package/src/html/test_keyframes.html +415 -0
  181. package/src/html/test_loaders.html +1489 -0
  182. package/src/html/test_mouse.html +516 -0
  183. package/src/html/test_overview.html +1444 -0
  184. package/src/html/test_pulse.html +212 -0
  185. package/src/html/test_scale.html +204 -0
  186. package/src/html/test_shake.html +232 -0
  187. package/src/html/test_slide.html +212 -0
  188. package/src/html/test_special.html +257 -0
  189. package/src/html/test_spin.html +216 -0
  190. package/src/html/test_transforms.html +332 -0
  191. package/src/html/test_transitions.html +245 -0
  192. package/src/html/test_zoom.html +188 -0
  193. package/src/html/video_overlay.html +27 -0
  194. package/src/jinja/_base.html.jinja +50 -0
  195. package/src/jinja/base.html.jinja +48 -0
  196. package/src/jinja/core-concepts.html.jinja +148 -0
  197. package/src/jinja/demo_draggable.html.jinja +114 -0
  198. package/src/jinja/demo_gesture.html.jinja +128 -0
  199. package/src/jinja/demo_keyboard.html.jinja +88 -0
  200. package/src/jinja/demo_screensaver.html.jinja +122 -0
  201. package/src/jinja/demo_video_overlay.html.jinja +155 -0
  202. package/src/jinja/getting-started.html.jinja +108 -0
  203. package/src/jinja/index.html.jinja +268 -0
  204. package/src/jinja/index.json +5 -0
  205. package/src/jinja/move.gl.css +7741 -0
  206. package/src/jinja/partials/_code_block.html.jinja +17 -0
  207. package/src/jinja/partials/_demo_links.html.jinja +41 -0
  208. package/src/jinja/partials/_feature_card.html.jinja +20 -0
  209. package/src/jinja/partials/_footer.html.jinja +22 -0
  210. package/src/jinja/partials/_head.html.jinja +27 -0
  211. package/src/jinja/partials/_nav.html.jinja +79 -0
  212. package/src/jinja/partials/_theme_toggle.html.jinja +15 -0
  213. package/src/jinja/test_animations.html.jinja +679 -0
  214. package/src/jinja/test_attention.html.jinja +147 -0
  215. package/src/jinja/test_bounce.html.jinja +67 -0
  216. package/src/jinja/test_effects.html.jinja +1218 -0
  217. package/src/jinja/test_fade.html.jinja +79 -0
  218. package/src/jinja/test_flip.html.jinja +74 -0
  219. package/src/jinja/test_keyframes.html.jinja +281 -0
  220. package/src/jinja/test_loaders.html.jinja +1358 -0
  221. package/src/jinja/test_mouse.html.jinja +382 -0
  222. package/src/jinja/test_overview.html.jinja +1313 -0
  223. package/src/jinja/test_pulse.html.jinja +78 -0
  224. package/src/jinja/test_scale.html.jinja +70 -0
  225. package/src/jinja/test_shake.html.jinja +98 -0
  226. package/src/jinja/test_slide.html.jinja +78 -0
  227. package/src/jinja/test_special.html.jinja +123 -0
  228. package/src/jinja/test_spin.html.jinja +82 -0
  229. package/src/jinja/test_transforms.html.jinja +198 -0
  230. package/src/jinja/test_transitions.html.jinja +111 -0
  231. package/src/jinja/test_zoom.html.jinja +54 -0
  232. package/src/scss/classes/_animations.scss +595 -0
  233. package/src/scss/classes/_controls.scss +314 -0
  234. package/src/scss/classes/_effects.scss +283 -0
  235. package/src/scss/classes/_index.scss +28 -0
  236. package/src/scss/classes/_loaders.scss +779 -0
  237. package/src/scss/classes/_transforms.scss +138 -0
  238. package/src/scss/classes/_transitions.scss +264 -0
  239. package/src/scss/dev/_banner.scss +36 -0
  240. package/src/scss/dev/_debug.scss +18 -0
  241. package/src/scss/dev/_deprecation.scss +13 -0
  242. package/src/scss/dev/_index.scss +8 -0
  243. package/src/scss/dev/_modules.scss +23 -0
  244. package/src/scss/docs.scss +2344 -0
  245. package/src/scss/docs.scss.bak +3133 -0
  246. package/src/scss/functions/_index.scss +22 -0
  247. package/src/scss/functions/scenes/_bubble.scss +32 -0
  248. package/src/scss/functions/scenes/_index.scss +21 -0
  249. package/src/scss/index.scss +17 -0
  250. package/src/scss/maps/_controls.scss +85 -0
  251. package/src/scss/maps/_index.scss +22 -0
  252. package/src/scss/mixins/_accessibility.scss +91 -0
  253. package/src/scss/mixins/_boot.scss +51 -0
  254. package/src/scss/mixins/_index.scss +41 -0
  255. package/src/scss/mixins/_screensaver.scss +228 -0
  256. package/src/scss/mixins/_shape.scss +315 -0
  257. package/src/scss/mixins/animations/_base.scss +403 -0
  258. package/src/scss/mixins/animations/_beat.scss +137 -0
  259. package/src/scss/mixins/animations/_blink.scss +159 -0
  260. package/src/scss/mixins/animations/_bounce.scss +306 -0
  261. package/src/scss/mixins/animations/_elastic.scss +69 -0
  262. package/src/scss/mixins/animations/_fade.scss +393 -0
  263. package/src/scss/mixins/animations/_flash.scss +169 -0
  264. package/src/scss/mixins/animations/_flip.scss +251 -0
  265. package/src/scss/mixins/animations/_float.scss +141 -0
  266. package/src/scss/mixins/animations/_glow.scss +190 -0
  267. package/src/scss/mixins/animations/_heartbeat.scss +195 -0
  268. package/src/scss/mixins/animations/_hinge.scss +118 -0
  269. package/src/scss/mixins/animations/_index.scss +97 -0
  270. package/src/scss/mixins/animations/_jello.scss +123 -0
  271. package/src/scss/mixins/animations/_jiggle.scss +162 -0
  272. package/src/scss/mixins/animations/_lightspeed.scss +135 -0
  273. package/src/scss/mixins/animations/_nod.scss +153 -0
  274. package/src/scss/mixins/animations/_pop.scss +153 -0
  275. package/src/scss/mixins/animations/_pulse.scss +275 -0
  276. package/src/scss/mixins/animations/_ripple.scss +161 -0
  277. package/src/scss/mixins/animations/_roll.scss +217 -0
  278. package/src/scss/mixins/animations/_rotate.scss +728 -0
  279. package/src/scss/mixins/animations/_rubber.scss +115 -0
  280. package/src/scss/mixins/animations/_scale.scss +382 -0
  281. package/src/scss/mixins/animations/_shake.scss +233 -0
  282. package/src/scss/mixins/animations/_slide.scss +501 -0
  283. package/src/scss/mixins/animations/_spin.scss +322 -0
  284. package/src/scss/mixins/animations/_sway.scss +150 -0
  285. package/src/scss/mixins/animations/_swing.scss +245 -0
  286. package/src/scss/mixins/animations/_tada.scss +235 -0
  287. package/src/scss/mixins/animations/_twist.scss +162 -0
  288. package/src/scss/mixins/animations/_wave.scss +149 -0
  289. package/src/scss/mixins/animations/_wobble.scss +283 -0
  290. package/src/scss/mixins/animations/_zoom.scss +394 -0
  291. package/src/scss/mixins/controls/_cursor.scss +203 -0
  292. package/src/scss/mixins/controls/_hover.scss +625 -0
  293. package/src/scss/mixins/controls/_index.scss +30 -0
  294. package/src/scss/mixins/controls/_keyboard.scss +300 -0
  295. package/src/scss/mixins/controls/_pointer.scss +267 -0
  296. package/src/scss/mixins/controls/_scroll.scss +460 -0
  297. package/src/scss/mixins/controls/_scrollbar.scss +283 -0
  298. package/src/scss/mixins/controls/_selection.scss +208 -0
  299. package/src/scss/mixins/controls/_touch.scss +401 -0
  300. package/src/scss/mixins/effects/_blend.scss +128 -0
  301. package/src/scss/mixins/effects/_filter.scss +470 -0
  302. package/src/scss/mixins/effects/_focus.scss +83 -0
  303. package/src/scss/mixins/effects/_gradient.scss +130 -0
  304. package/src/scss/mixins/effects/_index.scss +28 -0
  305. package/src/scss/mixins/effects/_mask.scss +76 -0
  306. package/src/scss/mixins/effects/_opacity.scss +376 -0
  307. package/src/scss/mixins/effects/_shadow.scss +429 -0
  308. package/src/scss/mixins/keyframes/_base.scss +199 -0
  309. package/src/scss/mixins/keyframes/_index.scss +24 -0
  310. package/src/scss/mixins/keyframes/animations/_beat.scss +280 -0
  311. package/src/scss/mixins/keyframes/animations/_blink.scss +82 -0
  312. package/src/scss/mixins/keyframes/animations/_bounce.scss +292 -0
  313. package/src/scss/mixins/keyframes/animations/_fade.scss +311 -0
  314. package/src/scss/mixins/keyframes/animations/_flash.scss +165 -0
  315. package/src/scss/mixins/keyframes/animations/_flip.scss +266 -0
  316. package/src/scss/mixins/keyframes/animations/_index.scss +46 -0
  317. package/src/scss/mixins/keyframes/animations/_jiggle.scss +85 -0
  318. package/src/scss/mixins/keyframes/animations/_lightspeed.scss +73 -0
  319. package/src/scss/mixins/keyframes/animations/_nod.scss +79 -0
  320. package/src/scss/mixins/keyframes/animations/_pop.scss +78 -0
  321. package/src/scss/mixins/keyframes/animations/_pulse.scss +225 -0
  322. package/src/scss/mixins/keyframes/animations/_ripple.scss +94 -0
  323. package/src/scss/mixins/keyframes/animations/_roll.scss +124 -0
  324. package/src/scss/mixins/keyframes/animations/_rotate.scss +360 -0
  325. package/src/scss/mixins/keyframes/animations/_rubber.scss +81 -0
  326. package/src/scss/mixins/keyframes/animations/_scale.scss +308 -0
  327. package/src/scss/mixins/keyframes/animations/_shake.scss +270 -0
  328. package/src/scss/mixins/keyframes/animations/_slide.scss +345 -0
  329. package/src/scss/mixins/keyframes/animations/_spin.scss +270 -0
  330. package/src/scss/mixins/keyframes/animations/_sway.scss +83 -0
  331. package/src/scss/mixins/keyframes/animations/_twist.scss +89 -0
  332. package/src/scss/mixins/keyframes/animations/_wave.scss +90 -0
  333. package/src/scss/mixins/keyframes/animations/_wobble.scss +293 -0
  334. package/src/scss/mixins/keyframes/animations/_zoom.scss +345 -0
  335. package/src/scss/mixins/loaders/_bars.scss +128 -0
  336. package/src/scss/mixins/loaders/_base.scss +39 -0
  337. package/src/scss/mixins/loaders/_bubble.scss +395 -0
  338. package/src/scss/mixins/loaders/_circle.scss +456 -0
  339. package/src/scss/mixins/loaders/_dots.scss +248 -0
  340. package/src/scss/mixins/loaders/_graph.scss +542 -0
  341. package/src/scss/mixins/loaders/_index.scss +77 -0
  342. package/src/scss/mixins/loaders/_line.scss +471 -0
  343. package/src/scss/mixins/loaders/_objects.scss +563 -0
  344. package/src/scss/mixins/loaders/_progress.scss +477 -0
  345. package/src/scss/mixins/loaders/_rect.scss +480 -0
  346. package/src/scss/mixins/loaders/_rings.scss +377 -0
  347. package/src/scss/mixins/loaders/_skeleton.scss +461 -0
  348. package/src/scss/mixins/loaders/_special.scss +611 -0
  349. package/src/scss/mixins/loaders/_spinner.scss +175 -0
  350. package/src/scss/mixins/loaders/_text.scss +446 -0
  351. package/src/scss/mixins/transforms/_flip.scss +74 -0
  352. package/src/scss/mixins/transforms/_index.scss +28 -0
  353. package/src/scss/mixins/transforms/_matrix.scss +18 -0
  354. package/src/scss/mixins/transforms/_perspective.scss +28 -0
  355. package/src/scss/mixins/transforms/_rotate.scss +96 -0
  356. package/src/scss/mixins/transforms/_scale.scss +26 -0
  357. package/src/scss/mixins/transforms/_skew.scss +27 -0
  358. package/src/scss/mixins/transforms/_translate.scss +27 -0
  359. package/src/scss/mixins/transitions/_index.scss +22 -0
  360. package/src/scss/mixins/transitions/_transition.scss +43 -0
  361. package/src/scss/variables/_animations.scss +300 -0
  362. package/src/scss/variables/_controls.scss +178 -0
  363. package/src/scss/variables/_effects.scss +87 -0
  364. package/src/scss/variables/_index.scss +27 -0
  365. package/src/scss/variables/_keyframes.scss +28 -0
  366. package/src/scss/variables/_loaders.scss +75 -0
  367. package/src/scss/variables/_transforms.scss +85 -0
  368. package/src/scss/variables/_transitions.scss +80 -0
  369. package/src/ts/Draggable.ts +143 -0
  370. package/src/ts/Gesture.ts +226 -0
  371. package/src/ts/Keyboard.ts +195 -0
  372. package/src/ts/LoaderManager.ts +662 -0
  373. package/src/ts/Screensaver.ts +192 -0
  374. package/src/ts/VideoOverlay.ts +205 -0
  375. package/src/ts/demo.ts +1108 -0
  376. package/src/ts/index.ts +58 -0
  377. package/css/move.gl.css +0 -2
  378. package/css/move.gl.min.css +0 -2
  379. package/scss/classes/_transforms.scss +0 -124
  380. package/scss/classes/keyboard.scss +0 -18
  381. package/scss/classes/screensaver.scss +0 -15
  382. package/scss/effects/_filter.scss +0 -176
  383. package/scss/effects/_index.scss +0 -23
  384. package/scss/effects/_opacity.scss +0 -62
  385. package/scss/effects/_shadow.scss +0 -175
  386. package/scss/functions/scenes/_bubble.scss +0 -19
  387. package/scss/functions/scenes/_index.scss +0 -20
  388. package/scss/index.scss +0 -0
  389. package/scss/keyframes/_beat.scss +0 -26
  390. package/scss/keyframes/_index.scss +0 -0
  391. package/scss/maps/_index.scss +0 -0
  392. package/scss/maps/_mouse.scss +0 -96
  393. package/scss/mixins/_hover.scss +0 -51
  394. package/scss/mixins/_index.scss +0 -0
  395. package/scss/mixins/_selection.scss +0 -321
  396. package/scss/mixins/_shape.scss +0 -44
  397. package/scss/mixins/_touch.scss +0 -95
  398. package/scss/mixins/animations/--hover.scss +0 -107
  399. package/scss/mixins/animations/_base.scss +0 -337
  400. package/scss/mixins/animations/_beat.scss +0 -119
  401. package/scss/mixins/animations/_bounce.scss +0 -192
  402. package/scss/mixins/animations/_fade.scss +0 -154
  403. package/scss/mixins/animations/_flip.scss +0 -72
  404. package/scss/mixins/animations/_heartbeat.scss +0 -175
  405. package/scss/mixins/animations/_hinge.scss +0 -119
  406. package/scss/mixins/animations/_jello.scss +0 -129
  407. package/scss/mixins/animations/_jiggle.scss +0 -163
  408. package/scss/mixins/animations/_lightspeed.scss +0 -130
  409. package/scss/mixins/animations/_pop.scss +0 -150
  410. package/scss/mixins/animations/_pulse.scss +0 -213
  411. package/scss/mixins/animations/_roll.scss +0 -261
  412. package/scss/mixins/animations/_rotate.scss +0 -428
  413. package/scss/mixins/animations/_rubber.scss +0 -116
  414. package/scss/mixins/animations/_scale.scss +0 -113
  415. package/scss/mixins/animations/_shake.scss +0 -182
  416. package/scss/mixins/animations/_slide.scss +0 -294
  417. package/scss/mixins/animations/_spin.scss +0 -219
  418. package/scss/mixins/animations/_wobble.scss +0 -254
  419. package/scss/mixins/animations/_zoom.scss +0 -166
  420. package/scss/mixins/effects/_filter.scss +0 -148
  421. package/scss/mixins/effects/_index.scss +0 -0
  422. package/scss/mixins/effects/_shadow.scss +0 -21
  423. package/scss/mixins/loaders/_index.scss +0 -0
  424. package/scss/mixins/loaders/_progress.scss +0 -174
  425. package/scss/mixins/loaders/_spinner.scss +0 -101
  426. package/scss/mixins/loaders/circle_01.scss +0 -22
  427. package/scss/mixins/loaders/circle_02.scss +0 -19
  428. package/scss/mixins/loaders/circle_03.scss +0 -29
  429. package/scss/mixins/loaders/circle_inner_01.scss +0 -33
  430. package/scss/mixins/loaders/circle_inner_02.scss +0 -33
  431. package/scss/mixins/loaders/circle_inner_03.scss +0 -34
  432. package/scss/mixins/mouse/_index.scss +0 -0
  433. package/scss/mixins/scroll/_index.scss +0 -0
  434. package/scss/mixins/scroll/_scroll.scss +0 -104
  435. package/scss/mixins/transforms/_index.scss +0 -23
  436. package/scss/mixins/transforms/_matrix.scss +0 -1
  437. package/scss/mixins/transitions/_index.scss +0 -0
  438. package/scss/mixins/transitions/_transition.scss +0 -13
  439. package/scss/variables/_animation.scss +0 -91
  440. package/scss/variables/_index.scss +0 -0
  441. package/ts/ARContent.ts +0 -27
  442. package/ts/ARInteraction.ts +0 -34
  443. package/ts/AdaptiveUI.ts +0 -25
  444. package/ts/ContentStreaming.ts +0 -20
  445. package/ts/Draggable.ts +0 -71
  446. package/ts/DynamicEnvironment.ts +0 -60
  447. package/ts/Gesture.ts +0 -168
  448. package/ts/ImmersiveAudio.ts +0 -40
  449. package/ts/InteractiveCanvas.ts +0 -177
  450. package/ts/InteractiveVideo.ts +0 -29
  451. package/ts/Keyboard.ts +0 -162
  452. package/ts/RealTimeCollaboration.ts +0 -25
  453. package/ts/Screensaver.ts +0 -140
  454. package/ts/SpatialNavigation.ts +0 -38
  455. package/ts/UserProfile.ts +0 -27
  456. package/ts/VRExperience.ts +0 -58
  457. package/ts/VideoOverlay.ts +0 -116
  458. package/ts/index.ts +0 -0
  459. /package/{scss → dist/scss}/dev/_banner.scss +0 -0
  460. /package/{scss → dist/scss}/dev/_debug.scss +0 -0
  461. /package/{scss → dist/scss}/dev/_index.scss +0 -0
  462. /package/{scss/classes/_index.scss → src/html/partials/_code_block.html} +0 -0
  463. /package/{scss/functions/_index.scss → src/html/partials/_feature_card.html} +0 -0
package/src/jinja/test_loaders.html.jinja ADDED
@@ -0,0 +1,1358 @@
1
+ {% extends "_base.html.jinja" %}
2
+
3
+ {% set page_title = "Loaders | move.gl" %}
4
+ {% set body_class = "page-loaders" %}
5
+
6
+ {% block content %}
7
+ <section class="section">
8
+ <h1 class="section-title">🔄 Loaders</h1>
9
+ <p class="section-description">
10
+ A comprehensive collection of CSS loading animations. All loaders use greyscale colors for visibility
11
+ on any background. Each card shows the loader preview and the HTML code needed to implement it.
12
+ </p>
13
+
14
+ {# Spinners Section #}
15
+ <h2 class="demo-section-title">🌀 Spinners</h2>
16
+ <p class="demo-section-desc">Classic rotating spinner animations</p>
17
+ <div class="demo-grid-fixed">
18
+ <div class="demo-card-fixed">
19
+ <div class="demo-card-fixed__preview">
20
+ <div class="loader loader--spinner"></div>
21
+ </div>
22
+ <div class="demo-card-fixed__info">
23
+ <h4 class="demo-card-fixed__title">spinner</h4>
24
+ </div>
25
+ <div class="demo-card-fixed__code">
26
+ <code>&lt;div class="loader loader--spinner"&gt;&lt;/div&gt;</code>
27
+ </div>
28
+ </div>
29
+ <div class="demo-card-fixed">
30
+ <div class="demo-card-fixed__preview">
31
+ <div class="loader loader--spinner-dots"></div>
32
+ </div>
33
+ <div class="demo-card-fixed__info">
34
+ <h4 class="demo-card-fixed__title">spinner-dots</h4>
35
+ </div>
36
+ <div class="demo-card-fixed__code">
37
+ <code>&lt;div class="loader loader--spinner-dots"&gt;&lt;/div&gt;</code>
38
+ </div>
39
+ </div>
40
+ <div class="demo-card-fixed">
41
+ <div class="demo-card-fixed__preview">
42
+ <div class="loader loader--ring"></div>
43
+ </div>
44
+ <div class="demo-card-fixed__info">
45
+ <h4 class="demo-card-fixed__title">ring</h4>
46
+ </div>
47
+ <div class="demo-card-fixed__code">
48
+ <code>&lt;div class="loader loader--ring"&gt;&lt;/div&gt;</code>
49
+ </div>
50
+ </div>
51
+ <div class="demo-card-fixed">
52
+ <div class="demo-card-fixed__preview">
53
+ <div class="loader loader--dual-ring"></div>
54
+ </div>
55
+ <div class="demo-card-fixed__info">
56
+ <h4 class="demo-card-fixed__title">dual-ring</h4>
57
+ </div>
58
+ <div class="demo-card-fixed__code">
59
+ <code>&lt;div class="loader loader--dual-ring"&gt;&lt;/div&gt;</code>
60
+ </div>
61
+ </div>
62
+ <div class="demo-card-fixed">
63
+ <div class="demo-card-fixed__preview">
64
+ <div class="loader loader--windmill"></div>
65
+ </div>
66
+ <div class="demo-card-fixed__info">
67
+ <h4 class="demo-card-fixed__title">windmill</h4>
68
+ </div>
69
+ <div class="demo-card-fixed__code">
70
+ <code>&lt;div class="loader loader--windmill"&gt;&lt;/div&gt;</code>
71
+ </div>
72
+ </div>
73
+ <div class="demo-card-fixed">
74
+ <div class="demo-card-fixed__preview">
75
+ <div class="loader loader--chase"></div>
76
+ </div>
77
+ <div class="demo-card-fixed__info">
78
+ <h4 class="demo-card-fixed__title">chase</h4>
79
+ </div>
80
+ <div class="demo-card-fixed__code">
81
+ <code>&lt;div class="loader loader--chase"&gt;&lt;/div&gt;</code>
82
+ </div>
83
+ </div>
84
+ </div>
85
+
86
+ {# Circles Section #}
87
+ <h2 class="demo-section-title">⭕ Circles</h2>
88
+ <p class="demo-section-desc">Circular loading animations with various effects</p>
89
+ <div class="demo-grid-fixed">
90
+ <div class="demo-card-fixed">
91
+ <div class="demo-card-fixed__preview">
92
+ <div class="loader loader--circle-spinner"></div>
93
+ </div>
94
+ <div class="demo-card-fixed__info">
95
+ <h4 class="demo-card-fixed__title">circle-spinner</h4>
96
+ </div>
97
+ <div class="demo-card-fixed__code">
98
+ <code>&lt;div class="loader loader--circle-spinner"&gt;&lt;/div&gt;</code>
99
+ </div>
100
+ </div>
101
+ <div class="demo-card-fixed">
102
+ <div class="demo-card-fixed__preview">
103
+ <div class="loader loader--circle-pulse"></div>
104
+ </div>
105
+ <div class="demo-card-fixed__info">
106
+ <h4 class="demo-card-fixed__title">circle-pulse</h4>
107
+ </div>
108
+ <div class="demo-card-fixed__code">
109
+ <code>&lt;div class="loader loader--circle-pulse"&gt;&lt;/div&gt;</code>
110
+ </div>
111
+ </div>
112
+ <div class="demo-card-fixed">
113
+ <div class="demo-card-fixed__preview">
114
+ <div class="loader loader--circle-ripple"></div>
115
+ </div>
116
+ <div class="demo-card-fixed__info">
117
+ <h4 class="demo-card-fixed__title">circle-ripple</h4>
118
+ </div>
119
+ <div class="demo-card-fixed__code">
120
+ <code>&lt;div class="loader loader--circle-ripple"&gt;&lt;/div&gt;</code>
121
+ </div>
122
+ </div>
123
+ <div class="demo-card-fixed">
124
+ <div class="demo-card-fixed__preview">
125
+ <div class="loader loader--circle-clip"></div>
126
+ </div>
127
+ <div class="demo-card-fixed__info">
128
+ <h4 class="demo-card-fixed__title">circle-clip</h4>
129
+ </div>
130
+ <div class="demo-card-fixed__code">
131
+ <code>&lt;div class="loader loader--circle-clip"&gt;&lt;/div&gt;</code>
132
+ </div>
133
+ </div>
134
+ <div class="demo-card-fixed">
135
+ <div class="demo-card-fixed__preview">
136
+ <div class="loader loader--circle-clip-dual"></div>
137
+ </div>
138
+ <div class="demo-card-fixed__info">
139
+ <h4 class="demo-card-fixed__title">circle-clip-dual</h4>
140
+ </div>
141
+ <div class="demo-card-fixed__code">
142
+ <code>&lt;div class="loader loader--circle-clip-dual"&gt;&lt;/div&gt;</code>
143
+ </div>
144
+ </div>
145
+ <div class="demo-card-fixed">
146
+ <div class="demo-card-fixed__preview">
147
+ <div class="loader loader--circle-dual"></div>
148
+ </div>
149
+ <div class="demo-card-fixed__info">
150
+ <h4 class="demo-card-fixed__title">circle-dual</h4>
151
+ </div>
152
+ <div class="demo-card-fixed__code">
153
+ <code>&lt;div class="loader loader--circle-dual"&gt;&lt;/div&gt;</code>
154
+ </div>
155
+ </div>
156
+ <div class="demo-card-fixed">
157
+ <div class="demo-card-fixed__preview">
158
+ <div class="loader loader--circle-triple"></div>
159
+ </div>
160
+ <div class="demo-card-fixed__info">
161
+ <h4 class="demo-card-fixed__title">circle-triple</h4>
162
+ </div>
163
+ <div class="demo-card-fixed__code">
164
+ <code>&lt;div class="loader loader--circle-triple"&gt;&lt;/div&gt;</code>
165
+ </div>
166
+ </div>
167
+ <div class="demo-card-fixed">
168
+ <div class="demo-card-fixed__preview">
169
+ <div class="loader loader--circle-nested"></div>
170
+ </div>
171
+ <div class="demo-card-fixed__info">
172
+ <h4 class="demo-card-fixed__title">circle-nested</h4>
173
+ </div>
174
+ <div class="demo-card-fixed__code">
175
+ <code>&lt;div class="loader loader--circle-nested"&gt;&lt;/div&gt;</code>
176
+ </div>
177
+ </div>
178
+ <div class="demo-card-fixed">
179
+ <div class="demo-card-fixed__preview">
180
+ <div class="loader loader--circle-dot"></div>
181
+ </div>
182
+ <div class="demo-card-fixed__info">
183
+ <h4 class="demo-card-fixed__title">circle-dot</h4>
184
+ </div>
185
+ <div class="demo-card-fixed__code">
186
+ <code>&lt;div class="loader loader--circle-dot"&gt;&lt;/div&gt;</code>
187
+ </div>
188
+ </div>
189
+ <div class="demo-card-fixed">
190
+ <div class="demo-card-fixed__preview">
191
+ <div class="loader loader--circle-notch"></div>
192
+ </div>
193
+ <div class="demo-card-fixed__info">
194
+ <h4 class="demo-card-fixed__title">circle-notch</h4>
195
+ </div>
196
+ <div class="demo-card-fixed__code">
197
+ <code>&lt;div class="loader loader--circle-notch"&gt;&lt;/div&gt;</code>
198
+ </div>
199
+ </div>
200
+ <div class="demo-card-fixed">
201
+ <div class="demo-card-fixed__preview">
202
+ <div class="loader loader--circle-orbit"></div>
203
+ </div>
204
+ <div class="demo-card-fixed__info">
205
+ <h4 class="demo-card-fixed__title">circle-orbit</h4>
206
+ </div>
207
+ <div class="demo-card-fixed__code">
208
+ <code>&lt;div class="loader loader--circle-orbit"&gt;&lt;/div&gt;</code>
209
+ </div>
210
+ </div>
211
+ </div>
212
+
213
+ {# Dots Section #}
214
+ <h2 class="demo-section-title">⚫ Dots</h2>
215
+ <p class="demo-section-desc">Animated dot patterns and effects</p>
216
+ <div class="demo-grid-fixed">
217
+ <div class="demo-card-fixed">
218
+ <div class="demo-card-fixed__preview">
219
+ <div class="loader loader--dots"></div>
220
+ </div>
221
+ <div class="demo-card-fixed__info">
222
+ <h4 class="demo-card-fixed__title">dots</h4>
223
+ </div>
224
+ <div class="demo-card-fixed__code">
225
+ <code>&lt;div class="loader loader--dots"&gt;&lt;/div&gt;</code>
226
+ </div>
227
+ </div>
228
+ <div class="demo-card-fixed">
229
+ <div class="demo-card-fixed__preview">
230
+ <div class="loader loader--dots-bounce"></div>
231
+ </div>
232
+ <div class="demo-card-fixed__info">
233
+ <h4 class="demo-card-fixed__title">dots-bounce</h4>
234
+ </div>
235
+ <div class="demo-card-fixed__code">
236
+ <code>&lt;div class="loader loader--dots-bounce"&gt;&lt;/div&gt;</code>
237
+ </div>
238
+ </div>
239
+ <div class="demo-card-fixed">
240
+ <div class="demo-card-fixed__preview">
241
+ <div class="loader loader--dots-fade"></div>
242
+ </div>
243
+ <div class="demo-card-fixed__info">
244
+ <h4 class="demo-card-fixed__title">dots-fade</h4>
245
+ </div>
246
+ <div class="demo-card-fixed__code">
247
+ <code>&lt;div class="loader loader--dots-fade"&gt;&lt;/div&gt;</code>
248
+ </div>
249
+ </div>
250
+ <div class="demo-card-fixed">
251
+ <div class="demo-card-fixed__preview">
252
+ <div class="loader loader--dots-grow"></div>
253
+ </div>
254
+ <div class="demo-card-fixed__info">
255
+ <h4 class="demo-card-fixed__title">dots-grow</h4>
256
+ </div>
257
+ <div class="demo-card-fixed__code">
258
+ <code>&lt;div class="loader loader--dots-grow"&gt;&lt;/div&gt;</code>
259
+ </div>
260
+ </div>
261
+ <div class="demo-card-fixed">
262
+ <div class="demo-card-fixed__preview">
263
+ <div class="loader loader--dots-wave"></div>
264
+ </div>
265
+ <div class="demo-card-fixed__info">
266
+ <h4 class="demo-card-fixed__title">dots-wave</h4>
267
+ </div>
268
+ <div class="demo-card-fixed__code">
269
+ <code>&lt;div class="loader loader--dots-wave"&gt;&lt;/div&gt;</code>
270
+ </div>
271
+ </div>
272
+ <div class="demo-card-fixed">
273
+ <div class="demo-card-fixed__preview">
274
+ <div class="loader loader--ellipsis"></div>
275
+ </div>
276
+ <div class="demo-card-fixed__info">
277
+ <h4 class="demo-card-fixed__title">ellipsis</h4>
278
+ </div>
279
+ <div class="demo-card-fixed__code">
280
+ <code>&lt;div class="loader loader--ellipsis"&gt;&lt;/div&gt;</code>
281
+ </div>
282
+ </div>
283
+ </div>
284
+
285
+ {# Bubbles Section #}
286
+ <h2 class="demo-section-title">🫧 Bubbles</h2>
287
+ <p class="demo-section-desc">Bubble and sphere animations</p>
288
+ <div class="demo-grid-fixed">
289
+ <div class="demo-card-fixed">
290
+ <div class="demo-card-fixed__preview">
291
+ <div class="loader loader--bubble-expand"></div>
292
+ </div>
293
+ <div class="demo-card-fixed__info">
294
+ <h4 class="demo-card-fixed__title">bubble-expand</h4>
295
+ </div>
296
+ <div class="demo-card-fixed__code">
297
+ <code>&lt;div class="loader loader--bubble-expand"&gt;&lt;/div&gt;</code>
298
+ </div>
299
+ </div>
300
+ <div class="demo-card-fixed">
301
+ <div class="demo-card-fixed__preview">
302
+ <div class="loader loader--bubble-rotate"></div>
303
+ </div>
304
+ <div class="demo-card-fixed__info">
305
+ <h4 class="demo-card-fixed__title">bubble-rotate</h4>
306
+ </div>
307
+ <div class="demo-card-fixed__code">
308
+ <code>&lt;div class="loader loader--bubble-rotate"&gt;&lt;/div&gt;</code>
309
+ </div>
310
+ </div>
311
+ <div class="demo-card-fixed">
312
+ <div class="demo-card-fixed__preview">
313
+ <div class="loader loader--bubble-flip"></div>
314
+ </div>
315
+ <div class="demo-card-fixed__info">
316
+ <h4 class="demo-card-fixed__title">bubble-flip</h4>
317
+ </div>
318
+ <div class="demo-card-fixed__code">
319
+ <code>&lt;div class="loader loader--bubble-flip"&gt;&lt;/div&gt;</code>
320
+ </div>
321
+ </div>
322
+ <div class="demo-card-fixed">
323
+ <div class="demo-card-fixed__preview">
324
+ <div class="loader loader--bubble-collision"></div>
325
+ </div>
326
+ <div class="demo-card-fixed__info">
327
+ <h4 class="demo-card-fixed__title">bubble-collision</h4>
328
+ </div>
329
+ <div class="demo-card-fixed__code">
330
+ <code>&lt;div class="loader loader--bubble-collision"&gt;&lt;/div&gt;</code>
331
+ </div>
332
+ </div>
333
+ <div class="demo-card-fixed">
334
+ <div class="demo-card-fixed__preview">
335
+ <div class="loader loader--bubble-dots-bounce"></div>
336
+ </div>
337
+ <div class="demo-card-fixed__info">
338
+ <h4 class="demo-card-fixed__title">bubble-dots-bounce</h4>
339
+ </div>
340
+ <div class="demo-card-fixed__code">
341
+ <code>&lt;div class="loader loader--bubble-dots-bounce"&gt;&lt;/div&gt;</code>
342
+ </div>
343
+ </div>
344
+ <div class="demo-card-fixed">
345
+ <div class="demo-card-fixed__preview">
346
+ <div class="loader loader--bubble-dots-flash"></div>
347
+ </div>
348
+ <div class="demo-card-fixed__info">
349
+ <h4 class="demo-card-fixed__title">bubble-dots-flash</h4>
350
+ </div>
351
+ <div class="demo-card-fixed__code">
352
+ <code>&lt;div class="loader loader--bubble-dots-flash"&gt;&lt;/div&gt;</code>
353
+ </div>
354
+ </div>
355
+ <div class="demo-card-fixed">
356
+ <div class="demo-card-fixed__preview">
357
+ <div class="loader loader--bubble-dots-pulse"></div>
358
+ </div>
359
+ <div class="demo-card-fixed__info">
360
+ <h4 class="demo-card-fixed__title">bubble-dots-pulse</h4>
361
+ </div>
362
+ <div class="demo-card-fixed__code">
363
+ <code>&lt;div class="loader loader--bubble-dots-pulse"&gt;&lt;/div&gt;</code>
364
+ </div>
365
+ </div>
366
+ <div class="demo-card-fixed">
367
+ <div class="demo-card-fixed__preview">
368
+ <div class="loader loader--bubble-dots-rotate"></div>
369
+ </div>
370
+ <div class="demo-card-fixed__info">
371
+ <h4 class="demo-card-fixed__title">bubble-dots-rotate</h4>
372
+ </div>
373
+ <div class="demo-card-fixed__code">
374
+ <code>&lt;div class="loader loader--bubble-dots-rotate"&gt;&lt;/div&gt;</code>
375
+ </div>
376
+ </div>
377
+ </div>
378
+
379
+ {# Bars Section #}
380
+ <h2 class="demo-section-title">📊 Bars</h2>
381
+ <p class="demo-section-desc">Bar and equalizer animations</p>
382
+ <div class="demo-grid-fixed">
383
+ <div class="demo-card-fixed">
384
+ <div class="demo-card-fixed__preview">
385
+ <div class="loader loader--bars"></div>
386
+ </div>
387
+ <div class="demo-card-fixed__info">
388
+ <h4 class="demo-card-fixed__title">bars</h4>
389
+ </div>
390
+ <div class="demo-card-fixed__code">
391
+ <code>&lt;div class="loader loader--bars"&gt;&lt;/div&gt;</code>
392
+ </div>
393
+ </div>
394
+ <div class="demo-card-fixed">
395
+ <div class="demo-card-fixed__preview">
396
+ <div class="loader loader--bar-wave"></div>
397
+ </div>
398
+ <div class="demo-card-fixed__info">
399
+ <h4 class="demo-card-fixed__title">bar-wave</h4>
400
+ </div>
401
+ <div class="demo-card-fixed__code">
402
+ <code>&lt;div class="loader loader--bar-wave"&gt;&lt;/div&gt;</code>
403
+ </div>
404
+ </div>
405
+ <div class="demo-card-fixed">
406
+ <div class="demo-card-fixed__preview">
407
+ <div class="loader loader--bar-pulse"></div>
408
+ </div>
409
+ <div class="demo-card-fixed__info">
410
+ <h4 class="demo-card-fixed__title">bar-pulse</h4>
411
+ </div>
412
+ <div class="demo-card-fixed__code">
413
+ <code>&lt;div class="loader loader--bar-pulse"&gt;&lt;/div&gt;</code>
414
+ </div>
415
+ </div>
416
+ <div class="demo-card-fixed">
417
+ <div class="demo-card-fixed__preview">
418
+ <div class="loader loader--bar-bounce"></div>
419
+ </div>
420
+ <div class="demo-card-fixed__info">
421
+ <h4 class="demo-card-fixed__title">bar-bounce</h4>
422
+ </div>
423
+ <div class="demo-card-fixed__code">
424
+ <code>&lt;div class="loader loader--bar-bounce"&gt;&lt;/div&gt;</code>
425
+ </div>
426
+ </div>
427
+ <div class="demo-card-fixed">
428
+ <div class="demo-card-fixed__preview">
429
+ <div class="loader loader--bar-equalizer"></div>
430
+ </div>
431
+ <div class="demo-card-fixed__info">
432
+ <h4 class="demo-card-fixed__title">bar-equalizer</h4>
433
+ </div>
434
+ <div class="demo-card-fixed__code">
435
+ <code>&lt;div class="loader loader--bar-equalizer"&gt;&lt;/div&gt;</code>
436
+ </div>
437
+ </div>
438
+ <div class="demo-card-fixed">
439
+ <div class="demo-card-fixed__preview">
440
+ <div class="loader loader--bar-expand"></div>
441
+ </div>
442
+ <div class="demo-card-fixed__info">
443
+ <h4 class="demo-card-fixed__title">bar-expand</h4>
444
+ </div>
445
+ <div class="demo-card-fixed__code">
446
+ <code>&lt;div class="loader loader--bar-expand"&gt;&lt;/div&gt;</code>
447
+ </div>
448
+ </div>
449
+ <div class="demo-card-fixed">
450
+ <div class="demo-card-fixed__preview">
451
+ <div class="loader loader--bar-shrink"></div>
452
+ </div>
453
+ <div class="demo-card-fixed__info">
454
+ <h4 class="demo-card-fixed__title">bar-shrink</h4>
455
+ </div>
456
+ <div class="demo-card-fixed__code">
457
+ <code>&lt;div class="loader loader--bar-shrink"&gt;&lt;/div&gt;</code>
458
+ </div>
459
+ </div>
460
+ <div class="demo-card-fixed">
461
+ <div class="demo-card-fixed__preview">
462
+ <div class="loader loader--bar-flash"></div>
463
+ </div>
464
+ <div class="demo-card-fixed__info">
465
+ <h4 class="demo-card-fixed__title">bar-flash</h4>
466
+ </div>
467
+ <div class="demo-card-fixed__code">
468
+ <code>&lt;div class="loader loader--bar-flash"&gt;&lt;/div&gt;</code>
469
+ </div>
470
+ </div>
471
+ <div class="demo-card-fixed">
472
+ <div class="demo-card-fixed__preview">
473
+ <div class="loader loader--bar-reveal"></div>
474
+ </div>
475
+ <div class="demo-card-fixed__info">
476
+ <h4 class="demo-card-fixed__title">bar-reveal</h4>
477
+ </div>
478
+ <div class="demo-card-fixed__code">
479
+ <code>&lt;div class="loader loader--bar-reveal"&gt;&lt;/div&gt;</code>
480
+ </div>
481
+ </div>
482
+ <div class="demo-card-fixed">
483
+ <div class="demo-card-fixed__preview">
484
+ <div class="loader loader--bar-matrix"></div>
485
+ </div>
486
+ <div class="demo-card-fixed__info">
487
+ <h4 class="demo-card-fixed__title">bar-matrix</h4>
488
+ </div>
489
+ <div class="demo-card-fixed__code">
490
+ <code>&lt;div class="loader loader--bar-matrix"&gt;&lt;/div&gt;</code>
491
+ </div>
492
+ </div>
493
+ <div class="demo-card-fixed">
494
+ <div class="demo-card-fixed__preview">
495
+ <div class="loader loader--bar-sound-wave"></div>
496
+ </div>
497
+ <div class="demo-card-fixed__info">
498
+ <h4 class="demo-card-fixed__title">bar-sound-wave</h4>
499
+ </div>
500
+ <div class="demo-card-fixed__code">
501
+ <code>&lt;div class="loader loader--bar-sound-wave"&gt;&lt;/div&gt;</code>
502
+ </div>
503
+ </div>
504
+ <div class="demo-card-fixed">
505
+ <div class="demo-card-fixed__preview">
506
+ <div class="loader loader--wave-bar"></div>
507
+ </div>
508
+ <div class="demo-card-fixed__info">
509
+ <h4 class="demo-card-fixed__title">wave-bar</h4>
510
+ </div>
511
+ <div class="demo-card-fixed__code">
512
+ <code>&lt;div class="loader loader--wave-bar"&gt;&lt;/div&gt;</code>
513
+ </div>
514
+ </div>
515
+ </div>
516
+
517
+ {# Progress Section #}
518
+ <h2 class="demo-section-title">📈 Progress</h2>
519
+ <p class="demo-section-desc">Progress bars and indicators</p>
520
+ <div class="demo-grid-fixed">
521
+ <div class="demo-card-fixed">
522
+ <div class="demo-card-fixed__preview">
523
+ <div class="loader loader--progress"></div>
524
+ </div>
525
+ <div class="demo-card-fixed__info">
526
+ <h4 class="demo-card-fixed__title">progress</h4>
527
+ </div>
528
+ <div class="demo-card-fixed__code">
529
+ <code>&lt;div class="loader loader--progress"&gt;&lt;/div&gt;</code>
530
+ </div>
531
+ </div>
532
+ <div class="demo-card-fixed">
533
+ <div class="demo-card-fixed__preview">
534
+ <div class="loader loader--progress-indeterminate"></div>
535
+ </div>
536
+ <div class="demo-card-fixed__info">
537
+ <h4 class="demo-card-fixed__title">progress-indeterminate</h4>
538
+ </div>
539
+ <div class="demo-card-fixed__code">
540
+ <code>&lt;div class="loader loader--progress-indeterminate"&gt;&lt;/div&gt;</code>
541
+ </div>
542
+ </div>
543
+ <div class="demo-card-fixed">
544
+ <div class="demo-card-fixed__preview">
545
+ <div class="loader loader--progress-circle"></div>
546
+ </div>
547
+ <div class="demo-card-fixed__info">
548
+ <h4 class="demo-card-fixed__title">progress-circle</h4>
549
+ </div>
550
+ <div class="demo-card-fixed__code">
551
+ <code>&lt;div class="loader loader--progress-circle"&gt;&lt;/div&gt;</code>
552
+ </div>
553
+ </div>
554
+ <div class="demo-card-fixed">
555
+ <div class="demo-card-fixed__preview">
556
+ <div class="loader loader--progress-dots"></div>
557
+ </div>
558
+ <div class="demo-card-fixed__info">
559
+ <h4 class="demo-card-fixed__title">progress-dots</h4>
560
+ </div>
561
+ <div class="demo-card-fixed__code">
562
+ <code>&lt;div class="loader loader--progress-dots"&gt;&lt;/div&gt;</code>
563
+ </div>
564
+ </div>
565
+ <div class="demo-card-fixed">
566
+ <div class="demo-card-fixed__preview">
567
+ <div class="loader loader--progress-fill"></div>
568
+ </div>
569
+ <div class="demo-card-fixed__info">
570
+ <h4 class="demo-card-fixed__title">progress-fill</h4>
571
+ </div>
572
+ <div class="demo-card-fixed__code">
573
+ <code>&lt;div class="loader loader--progress-fill"&gt;&lt;/div&gt;</code>
574
+ </div>
575
+ </div>
576
+ <div class="demo-card-fixed">
577
+ <div class="demo-card-fixed__preview">
578
+ <div class="loader loader--progress-gradient"></div>
579
+ </div>
580
+ <div class="demo-card-fixed__info">
581
+ <h4 class="demo-card-fixed__title">progress-gradient</h4>
582
+ </div>
583
+ <div class="demo-card-fixed__code">
584
+ <code>&lt;div class="loader loader--progress-gradient"&gt;&lt;/div&gt;</code>
585
+ </div>
586
+ </div>
587
+ <div class="demo-card-fixed">
588
+ <div class="demo-card-fixed__preview">
589
+ <div class="loader loader--progress-pulse"></div>
590
+ </div>
591
+ <div class="demo-card-fixed__info">
592
+ <h4 class="demo-card-fixed__title">progress-pulse</h4>
593
+ </div>
594
+ <div class="demo-card-fixed__code">
595
+ <code>&lt;div class="loader loader--progress-pulse"&gt;&lt;/div&gt;</code>
596
+ </div>
597
+ </div>
598
+ <div class="demo-card-fixed">
599
+ <div class="demo-card-fixed__preview">
600
+ <div class="loader loader--progress-segments"></div>
601
+ </div>
602
+ <div class="demo-card-fixed__info">
603
+ <h4 class="demo-card-fixed__title">progress-segments</h4>
604
+ </div>
605
+ <div class="demo-card-fixed__code">
606
+ <code>&lt;div class="loader loader--progress-segments"&gt;&lt;/div&gt;</code>
607
+ </div>
608
+ </div>
609
+ <div class="demo-card-fixed">
610
+ <div class="demo-card-fixed__preview">
611
+ <div class="loader loader--progress-split"></div>
612
+ </div>
613
+ <div class="demo-card-fixed__info">
614
+ <h4 class="demo-card-fixed__title">progress-split</h4>
615
+ </div>
616
+ <div class="demo-card-fixed__code">
617
+ <code>&lt;div class="loader loader--progress-split"&gt;&lt;/div&gt;</code>
618
+ </div>
619
+ </div>
620
+ <div class="demo-card-fixed">
621
+ <div class="demo-card-fixed__preview">
622
+ <div class="loader loader--progress-stripe"></div>
623
+ </div>
624
+ <div class="demo-card-fixed__info">
625
+ <h4 class="demo-card-fixed__title">progress-stripe</h4>
626
+ </div>
627
+ <div class="demo-card-fixed__code">
628
+ <code>&lt;div class="loader loader--progress-stripe"&gt;&lt;/div&gt;</code>
629
+ </div>
630
+ </div>
631
+ <div class="demo-card-fixed">
632
+ <div class="demo-card-fixed__preview">
633
+ <div class="loader loader--progress-stripe-fill"></div>
634
+ </div>
635
+ <div class="demo-card-fixed__info">
636
+ <h4 class="demo-card-fixed__title">progress-stripe-fill</h4>
637
+ </div>
638
+ <div class="demo-card-fixed__code">
639
+ <code>&lt;div class="loader loader--progress-stripe-fill"&gt;&lt;/div&gt;</code>
640
+ </div>
641
+ </div>
642
+ </div>
643
+
644
+ {# Rectangles Section #}
645
+ <h2 class="demo-section-title">🟦 Rectangles</h2>
646
+ <p class="demo-section-desc">Square and rectangle based animations</p>
647
+ <div class="demo-grid-fixed">
648
+ <div class="demo-card-fixed">
649
+ <div class="demo-card-fixed__preview">
650
+ <div class="loader loader--square"></div>
651
+ </div>
652
+ <div class="demo-card-fixed__info">
653
+ <h4 class="demo-card-fixed__title">square</h4>
654
+ </div>
655
+ <div class="demo-card-fixed__code">
656
+ <code>&lt;div class="loader loader--square"&gt;&lt;/div&gt;</code>
657
+ </div>
658
+ </div>
659
+ <div class="demo-card-fixed">
660
+ <div class="demo-card-fixed__preview">
661
+ <div class="loader loader--cube"></div>
662
+ </div>
663
+ <div class="demo-card-fixed__info">
664
+ <h4 class="demo-card-fixed__title">cube</h4>
665
+ </div>
666
+ <div class="demo-card-fixed__code">
667
+ <code>&lt;div class="loader loader--cube"&gt;&lt;/div&gt;</code>
668
+ </div>
669
+ </div>
670
+ <div class="demo-card-fixed">
671
+ <div class="demo-card-fixed__preview">
672
+ <div class="loader loader--rect-alternate"></div>
673
+ </div>
674
+ <div class="demo-card-fixed__info">
675
+ <h4 class="demo-card-fixed__title">rect-alternate</h4>
676
+ </div>
677
+ <div class="demo-card-fixed__code">
678
+ <code>&lt;div class="loader loader--rect-alternate"&gt;&lt;/div&gt;</code>
679
+ </div>
680
+ </div>
681
+ <div class="demo-card-fixed">
682
+ <div class="demo-card-fixed__preview">
683
+ <div class="loader loader--rect-diamond"></div>
684
+ </div>
685
+ <div class="demo-card-fixed__info">
686
+ <h4 class="demo-card-fixed__title">rect-diamond</h4>
687
+ </div>
688
+ <div class="demo-card-fixed__code">
689
+ <code>&lt;div class="loader loader--rect-diamond"&gt;&lt;/div&gt;</code>
690
+ </div>
691
+ </div>
692
+ <div class="demo-card-fixed">
693
+ <div class="demo-card-fixed__preview">
694
+ <div class="loader loader--rect-dual"></div>
695
+ </div>
696
+ <div class="demo-card-fixed__info">
697
+ <h4 class="demo-card-fixed__title">rect-dual</h4>
698
+ </div>
699
+ <div class="demo-card-fixed__code">
700
+ <code>&lt;div class="loader loader--rect-dual"&gt;&lt;/div&gt;</code>
701
+ </div>
702
+ </div>
703
+ <div class="demo-card-fixed">
704
+ <div class="demo-card-fixed__preview">
705
+ <div class="loader loader--rect-expand"></div>
706
+ </div>
707
+ <div class="demo-card-fixed__info">
708
+ <h4 class="demo-card-fixed__title">rect-expand</h4>
709
+ </div>
710
+ <div class="demo-card-fixed__code">
711
+ <code>&lt;div class="loader loader--rect-expand"&gt;&lt;/div&gt;</code>
712
+ </div>
713
+ </div>
714
+ <div class="demo-card-fixed">
715
+ <div class="demo-card-fixed__preview">
716
+ <div class="loader loader--rect-fill"></div>
717
+ </div>
718
+ <div class="demo-card-fixed__info">
719
+ <h4 class="demo-card-fixed__title">rect-fill</h4>
720
+ </div>
721
+ <div class="demo-card-fixed__code">
722
+ <code>&lt;div class="loader loader--rect-fill"&gt;&lt;/div&gt;</code>
723
+ </div>
724
+ </div>
725
+ <div class="demo-card-fixed">
726
+ <div class="demo-card-fixed__preview">
727
+ <div class="loader loader--rect-flip"></div>
728
+ </div>
729
+ <div class="demo-card-fixed__info">
730
+ <h4 class="demo-card-fixed__title">rect-flip</h4>
731
+ </div>
732
+ <div class="demo-card-fixed__code">
733
+ <code>&lt;div class="loader loader--rect-flip"&gt;&lt;/div&gt;</code>
734
+ </div>
735
+ </div>
736
+ <div class="demo-card-fixed">
737
+ <div class="demo-card-fixed__preview">
738
+ <div class="loader loader--rect-morph"></div>
739
+ </div>
740
+ <div class="demo-card-fixed__info">
741
+ <h4 class="demo-card-fixed__title">rect-morph</h4>
742
+ </div>
743
+ <div class="demo-card-fixed__code">
744
+ <code>&lt;div class="loader loader--rect-morph"&gt;&lt;/div&gt;</code>
745
+ </div>
746
+ </div>
747
+ <div class="demo-card-fixed">
748
+ <div class="demo-card-fixed__preview">
749
+ <div class="loader loader--rect-nested"></div>
750
+ </div>
751
+ <div class="demo-card-fixed__info">
752
+ <h4 class="demo-card-fixed__title">rect-nested</h4>
753
+ </div>
754
+ <div class="demo-card-fixed__code">
755
+ <code>&lt;div class="loader loader--rect-nested"&gt;&lt;/div&gt;</code>
756
+ </div>
757
+ </div>
758
+ <div class="demo-card-fixed">
759
+ <div class="demo-card-fixed__preview">
760
+ <div class="loader loader--rect-shrink"></div>
761
+ </div>
762
+ <div class="demo-card-fixed__info">
763
+ <h4 class="demo-card-fixed__title">rect-shrink</h4>
764
+ </div>
765
+ <div class="demo-card-fixed__code">
766
+ <code>&lt;div class="loader loader--rect-shrink"&gt;&lt;/div&gt;</code>
767
+ </div>
768
+ </div>
769
+ <div class="demo-card-fixed">
770
+ <div class="demo-card-fixed__preview">
771
+ <div class="loader loader--rect-stepped"></div>
772
+ </div>
773
+ <div class="demo-card-fixed__info">
774
+ <h4 class="demo-card-fixed__title">rect-stepped</h4>
775
+ </div>
776
+ <div class="demo-card-fixed__code">
777
+ <code>&lt;div class="loader loader--rect-stepped"&gt;&lt;/div&gt;</code>
778
+ </div>
779
+ </div>
780
+ <div class="demo-card-fixed">
781
+ <div class="demo-card-fixed__preview">
782
+ <div class="loader loader--rect-walk"></div>
783
+ </div>
784
+ <div class="demo-card-fixed__info">
785
+ <h4 class="demo-card-fixed__title">rect-walk</h4>
786
+ </div>
787
+ <div class="demo-card-fixed__code">
788
+ <code>&lt;div class="loader loader--rect-walk"&gt;&lt;/div&gt;</code>
789
+ </div>
790
+ </div>
791
+ <div class="demo-card-fixed">
792
+ <div class="demo-card-fixed__preview">
793
+ <div class="loader loader--folding"></div>
794
+ </div>
795
+ <div class="demo-card-fixed__info">
796
+ <h4 class="demo-card-fixed__title">folding</h4>
797
+ </div>
798
+ <div class="demo-card-fixed__code">
799
+ <code>&lt;div class="loader loader--folding"&gt;&lt;/div&gt;</code>
800
+ </div>
801
+ </div>
802
+ <div class="demo-card-fixed">
803
+ <div class="demo-card-fixed__preview">
804
+ <div class="loader loader--flip-card"></div>
805
+ </div>
806
+ <div class="demo-card-fixed__info">
807
+ <h4 class="demo-card-fixed__title">flip-card</h4>
808
+ </div>
809
+ <div class="demo-card-fixed__code">
810
+ <code>&lt;div class="loader loader--flip-card"&gt;&lt;/div&gt;</code>
811
+ </div>
812
+ </div>
813
+ </div>
814
+
815
+ {# Pulse & Ripple Section #}
816
+ <h2 class="demo-section-title">💫 Pulse & Ripple</h2>
817
+ <p class="demo-section-desc">Pulsating and ripple effect animations</p>
818
+ <div class="demo-grid-fixed">
819
+ <div class="demo-card-fixed">
820
+ <div class="demo-card-fixed__preview">
821
+ <div class="loader loader--pulse"></div>
822
+ </div>
823
+ <div class="demo-card-fixed__info">
824
+ <h4 class="demo-card-fixed__title">pulse</h4>
825
+ </div>
826
+ <div class="demo-card-fixed__code">
827
+ <code>&lt;div class="loader loader--pulse"&gt;&lt;/div&gt;</code>
828
+ </div>
829
+ </div>
830
+ <div class="demo-card-fixed">
831
+ <div class="demo-card-fixed__preview">
832
+ <div class="loader loader--ripple"></div>
833
+ </div>
834
+ <div class="demo-card-fixed__info">
835
+ <h4 class="demo-card-fixed__title">ripple</h4>
836
+ </div>
837
+ <div class="demo-card-fixed__code">
838
+ <code>&lt;div class="loader loader--ripple"&gt;&lt;/div&gt;</code>
839
+ </div>
840
+ </div>
841
+ <div class="demo-card-fixed">
842
+ <div class="demo-card-fixed__preview">
843
+ <div class="loader loader--bounce"></div>
844
+ </div>
845
+ <div class="demo-card-fixed__info">
846
+ <h4 class="demo-card-fixed__title">bounce</h4>
847
+ </div>
848
+ <div class="demo-card-fixed__code">
849
+ <code>&lt;div class="loader loader--bounce"&gt;&lt;/div&gt;</code>
850
+ </div>
851
+ </div>
852
+ <div class="demo-card-fixed">
853
+ <div class="demo-card-fixed__preview">
854
+ <div class="loader loader--bouncing-ball"></div>
855
+ </div>
856
+ <div class="demo-card-fixed__info">
857
+ <h4 class="demo-card-fixed__title">bouncing-ball</h4>
858
+ </div>
859
+ <div class="demo-card-fixed__code">
860
+ <code>&lt;div class="loader loader--bouncing-ball"&gt;&lt;/div&gt;</code>
861
+ </div>
862
+ </div>
863
+ <div class="demo-card-fixed">
864
+ <div class="demo-card-fixed__preview">
865
+ <div class="loader loader--heartbeat"></div>
866
+ </div>
867
+ <div class="demo-card-fixed__info">
868
+ <h4 class="demo-card-fixed__title">heartbeat</h4>
869
+ </div>
870
+ <div class="demo-card-fixed__code">
871
+ <code>&lt;div class="loader loader--heartbeat"&gt;&lt;/div&gt;</code>
872
+ </div>
873
+ </div>
874
+ <div class="demo-card-fixed">
875
+ <div class="demo-card-fixed__preview">
876
+ <div class="loader loader--gradient"></div>
877
+ </div>
878
+ <div class="demo-card-fixed__info">
879
+ <h4 class="demo-card-fixed__title">gradient</h4>
880
+ </div>
881
+ <div class="demo-card-fixed__code">
882
+ <code>&lt;div class="loader loader--gradient"&gt;&lt;/div&gt;</code>
883
+ </div>
884
+ </div>
885
+ <div class="demo-card-fixed">
886
+ <div class="demo-card-fixed__preview">
887
+ <div class="loader loader--morph"></div>
888
+ </div>
889
+ <div class="demo-card-fixed__info">
890
+ <h4 class="demo-card-fixed__title">morph</h4>
891
+ </div>
892
+ <div class="demo-card-fixed__code">
893
+ <code>&lt;div class="loader loader--morph"&gt;&lt;/div&gt;</code>
894
+ </div>
895
+ </div>
896
+ </div>
897
+
898
+ {# Text Loaders Section #}
899
+ <h2 class="demo-section-title">📝 Text</h2>
900
+ <p class="demo-section-desc">Text-based loading animations</p>
901
+ <div class="demo-grid-fixed">
902
+ <div class="demo-card-fixed">
903
+ <div class="demo-card-fixed__preview">
904
+ <div class="loader loader--typing"></div>
905
+ </div>
906
+ <div class="demo-card-fixed__info">
907
+ <h4 class="demo-card-fixed__title">typing</h4>
908
+ </div>
909
+ <div class="demo-card-fixed__code">
910
+ <code>&lt;div class="loader loader--typing"&gt;&lt;/div&gt;</code>
911
+ </div>
912
+ </div>
913
+ <div class="demo-card-fixed">
914
+ <div class="demo-card-fixed__preview">
915
+ <div class="loader loader--text-typing" data-text="Loading"></div>
916
+ </div>
917
+ <div class="demo-card-fixed__info">
918
+ <h4 class="demo-card-fixed__title">text-typing</h4>
919
+ </div>
920
+ <div class="demo-card-fixed__code">
921
+ <code>&lt;div class="loader loader--text-typing" data-text="Loading"&gt;&lt;/div&gt;</code>
922
+ </div>
923
+ </div>
924
+ <div class="demo-card-fixed">
925
+ <div class="demo-card-fixed__preview">
926
+ <div class="loader loader--text-dots" data-text="Loading"></div>
927
+ </div>
928
+ <div class="demo-card-fixed__info">
929
+ <h4 class="demo-card-fixed__title">text-dots</h4>
930
+ </div>
931
+ <div class="demo-card-fixed__code">
932
+ <code>&lt;div class="loader loader--text-dots" data-text="Loading"&gt;&lt;/div&gt;</code>
933
+ </div>
934
+ </div>
935
+ <div class="demo-card-fixed">
936
+ <div class="demo-card-fixed__preview">
937
+ <div class="loader loader--text-bounce" data-text="LOADING"></div>
938
+ </div>
939
+ <div class="demo-card-fixed__info">
940
+ <h4 class="demo-card-fixed__title">text-bounce</h4>
941
+ </div>
942
+ <div class="demo-card-fixed__code">
943
+ <code>&lt;div class="loader loader--text-bounce" data-text="LOADING"&gt;&lt;/div&gt;</code>
944
+ </div>
945
+ </div>
946
+ <div class="demo-card-fixed">
947
+ <div class="demo-card-fixed__preview">
948
+ <div class="loader loader--text-fade" data-text="Loading"></div>
949
+ </div>
950
+ <div class="demo-card-fixed__info">
951
+ <h4 class="demo-card-fixed__title">text-fade</h4>
952
+ </div>
953
+ <div class="demo-card-fixed__code">
954
+ <code>&lt;div class="loader loader--text-fade" data-text="Loading"&gt;&lt;/div&gt;</code>
955
+ </div>
956
+ </div>
957
+ <div class="demo-card-fixed">
958
+ <div class="demo-card-fixed__preview">
959
+ <div class="loader loader--text-fill" data-text="LOAD"></div>
960
+ </div>
961
+ <div class="demo-card-fixed__info">
962
+ <h4 class="demo-card-fixed__title">text-fill</h4>
963
+ </div>
964
+ <div class="demo-card-fixed__code">
965
+ <code>&lt;div class="loader loader--text-fill" data-text="LOAD"&gt;&lt;/div&gt;</code>
966
+ </div>
967
+ </div>
968
+ <div class="demo-card-fixed">
969
+ <div class="demo-card-fixed__preview">
970
+ <div class="loader loader--text-gradient" data-text="Loading"></div>
971
+ </div>
972
+ <div class="demo-card-fixed__info">
973
+ <h4 class="demo-card-fixed__title">text-gradient</h4>
974
+ </div>
975
+ <div class="demo-card-fixed__code">
976
+ <code>&lt;div class="loader loader--text-gradient" data-text="Loading"&gt;&lt;/div&gt;</code>
977
+ </div>
978
+ </div>
979
+ <div class="demo-card-fixed">
980
+ <div class="demo-card-fixed__preview">
981
+ <div class="loader loader--text-percentage"></div>
982
+ </div>
983
+ <div class="demo-card-fixed__info">
984
+ <h4 class="demo-card-fixed__title">text-percentage</h4>
985
+ </div>
986
+ <div class="demo-card-fixed__code">
987
+ <code>&lt;div class="loader loader--text-percentage"&gt;&lt;/div&gt;</code>
988
+ </div>
989
+ </div>
990
+ <div class="demo-card-fixed">
991
+ <div class="demo-card-fixed__preview">
992
+ <div class="loader loader--text-pulse" data-text="Loading"></div>
993
+ </div>
994
+ <div class="demo-card-fixed__info">
995
+ <h4 class="demo-card-fixed__title">text-pulse</h4>
996
+ </div>
997
+ <div class="demo-card-fixed__code">
998
+ <code>&lt;div class="loader loader--text-pulse" data-text="Loading"&gt;&lt;/div&gt;</code>
999
+ </div>
1000
+ </div>
1001
+ <div class="demo-card-fixed">
1002
+ <div class="demo-card-fixed__preview">
1003
+ <div class="loader loader--text-shake" data-text="Loading"></div>
1004
+ </div>
1005
+ <div class="demo-card-fixed__info">
1006
+ <h4 class="demo-card-fixed__title">text-shake</h4>
1007
+ </div>
1008
+ <div class="demo-card-fixed__code">
1009
+ <code>&lt;div class="loader loader--text-shake" data-text="Loading"&gt;&lt;/div&gt;</code>
1010
+ </div>
1011
+ </div>
1012
+ <div class="demo-card-fixed">
1013
+ <div class="demo-card-fixed__preview">
1014
+ <div class="loader loader--text-spinner"></div>
1015
+ </div>
1016
+ <div class="demo-card-fixed__info">
1017
+ <h4 class="demo-card-fixed__title">text-spinner</h4>
1018
+ </div>
1019
+ <div class="demo-card-fixed__code">
1020
+ <code>&lt;div class="loader loader--text-spinner"&gt;&lt;/div&gt;</code>
1021
+ </div>
1022
+ </div>
1023
+ <div class="demo-card-fixed">
1024
+ <div class="demo-card-fixed__preview">
1025
+ <div class="loader loader--text-spotlight" data-text="Loading"></div>
1026
+ </div>
1027
+ <div class="demo-card-fixed__info">
1028
+ <h4 class="demo-card-fixed__title">text-spotlight</h4>
1029
+ </div>
1030
+ <div class="demo-card-fixed__code">
1031
+ <code>&lt;div class="loader loader--text-spotlight" data-text="Loading"&gt;&lt;/div&gt;</code>
1032
+ </div>
1033
+ </div>
1034
+ <div class="demo-card-fixed">
1035
+ <div class="demo-card-fixed__preview">
1036
+ <div class="loader loader--text-wave" data-text="Loading"></div>
1037
+ </div>
1038
+ <div class="demo-card-fixed__info">
1039
+ <h4 class="demo-card-fixed__title">text-wave</h4>
1040
+ </div>
1041
+ <div class="demo-card-fixed__code">
1042
+ <code>&lt;div class="loader loader--text-wave" data-text="Loading"&gt;&lt;/div&gt;</code>
1043
+ </div>
1044
+ </div>
1045
+ <div class="demo-card-fixed">
1046
+ <div class="demo-card-fixed__preview">
1047
+ <div class="loader loader--brackets"></div>
1048
+ </div>
1049
+ <div class="demo-card-fixed__info">
1050
+ <h4 class="demo-card-fixed__title">brackets</h4>
1051
+ </div>
1052
+ <div class="demo-card-fixed__code">
1053
+ <code>&lt;div class="loader loader--brackets"&gt;&lt;/div&gt;</code>
1054
+ </div>
1055
+ </div>
1056
+ </div>
1057
+
1058
+ {# Skeleton Loaders Section #}
1059
+ <h2 class="demo-section-title">💀 Skeleton</h2>
1060
+ <p class="demo-section-desc">Placeholder loading effects for content</p>
1061
+ <div class="demo-grid-fixed">
1062
+ <div class="demo-card-fixed">
1063
+ <div class="demo-card-fixed__preview">
1064
+ <div class="loader loader--skeleton-shimmer" style="width: 100%; height: 40px;"></div>
1065
+ </div>
1066
+ <div class="demo-card-fixed__info">
1067
+ <h4 class="demo-card-fixed__title">skeleton-shimmer</h4>
1068
+ </div>
1069
+ <div class="demo-card-fixed__code">
1070
+ <code>&lt;div class="loader loader--skeleton-shimmer"&gt;&lt;/div&gt;</code>
1071
+ </div>
1072
+ </div>
1073
+ <div class="demo-card-fixed">
1074
+ <div class="demo-card-fixed__preview">
1075
+ <div class="loader loader--skeleton-pulse" style="width: 100%; height: 40px;"></div>
1076
+ </div>
1077
+ <div class="demo-card-fixed__info">
1078
+ <h4 class="demo-card-fixed__title">skeleton-pulse</h4>
1079
+ </div>
1080
+ <div class="demo-card-fixed__code">
1081
+ <code>&lt;div class="loader loader--skeleton-pulse"&gt;&lt;/div&gt;</code>
1082
+ </div>
1083
+ </div>
1084
+ <div class="demo-card-fixed">
1085
+ <div class="demo-card-fixed__preview">
1086
+ <div class="loader loader--skeleton-wave" style="width: 100%; height: 40px;"></div>
1087
+ </div>
1088
+ <div class="demo-card-fixed__info">
1089
+ <h4 class="demo-card-fixed__title">skeleton-wave</h4>
1090
+ </div>
1091
+ <div class="demo-card-fixed__code">
1092
+ <code>&lt;div class="loader loader--skeleton-wave"&gt;&lt;/div&gt;</code>
1093
+ </div>
1094
+ </div>
1095
+ <div class="demo-card-fixed">
1096
+ <div class="demo-card-fixed__preview">
1097
+ <div class="loader loader--skeleton-fade" style="width: 100%; height: 40px;"></div>
1098
+ </div>
1099
+ <div class="demo-card-fixed__info">
1100
+ <h4 class="demo-card-fixed__title">skeleton-fade</h4>
1101
+ </div>
1102
+ <div class="demo-card-fixed__code">
1103
+ <code>&lt;div class="loader loader--skeleton-fade"&gt;&lt;/div&gt;</code>
1104
+ </div>
1105
+ </div>
1106
+ </div>
1107
+
1108
+ {# Graphic Loaders Section #}
1109
+ <h2 class="demo-section-title">🎨 Graphic</h2>
1110
+ <p class="demo-section-desc">Visually distinctive animated loaders</p>
1111
+ <div class="demo-grid-fixed">
1112
+ <div class="demo-card-fixed">
1113
+ <div class="demo-card-fixed__preview">
1114
+ <div class="loader loader--orbit"></div>
1115
+ </div>
1116
+ <div class="demo-card-fixed__info">
1117
+ <h4 class="demo-card-fixed__title">orbit</h4>
1118
+ </div>
1119
+ <div class="demo-card-fixed__code">
1120
+ <code>&lt;div class="loader loader--orbit"&gt;&lt;/div&gt;</code>
1121
+ </div>
1122
+ </div>
1123
+ <div class="demo-card-fixed">
1124
+ <div class="demo-card-fixed__preview">
1125
+ <div class="loader loader--atom"></div>
1126
+ </div>
1127
+ <div class="demo-card-fixed__info">
1128
+ <h4 class="demo-card-fixed__title">atom</h4>
1129
+ </div>
1130
+ <div class="demo-card-fixed__code">
1131
+ <code>&lt;div class="loader loader--atom"&gt;&lt;/div&gt;</code>
1132
+ </div>
1133
+ </div>
1134
+ <div class="demo-card-fixed">
1135
+ <div class="demo-card-fixed__preview">
1136
+ <div class="loader loader--dna"></div>
1137
+ </div>
1138
+ <div class="demo-card-fixed__info">
1139
+ <h4 class="demo-card-fixed__title">dna</h4>
1140
+ </div>
1141
+ <div class="demo-card-fixed__code">
1142
+ <code>&lt;div class="loader loader--dna"&gt;&lt;/div&gt;</code>
1143
+ </div>
1144
+ </div>
1145
+ <div class="demo-card-fixed">
1146
+ <div class="demo-card-fixed__preview">
1147
+ <div class="loader loader--infinity"></div>
1148
+ </div>
1149
+ <div class="demo-card-fixed__info">
1150
+ <h4 class="demo-card-fixed__title">infinity</h4>
1151
+ </div>
1152
+ <div class="demo-card-fixed__code">
1153
+ <code>&lt;div class="loader loader--infinity"&gt;&lt;/div&gt;</code>
1154
+ </div>
1155
+ </div>
1156
+ <div class="demo-card-fixed">
1157
+ <div class="demo-card-fixed__preview">
1158
+ <div class="loader loader--star"></div>
1159
+ </div>
1160
+ <div class="demo-card-fixed__info">
1161
+ <h4 class="demo-card-fixed__title">star</h4>
1162
+ </div>
1163
+ <div class="demo-card-fixed__code">
1164
+ <code>&lt;div class="loader loader--star"&gt;&lt;/div&gt;</code>
1165
+ </div>
1166
+ </div>
1167
+ <div class="demo-card-fixed">
1168
+ <div class="demo-card-fixed__preview">
1169
+ <div class="loader loader--heart"></div>
1170
+ </div>
1171
+ <div class="demo-card-fixed__info">
1172
+ <h4 class="demo-card-fixed__title">heart</h4>
1173
+ </div>
1174
+ <div class="demo-card-fixed__code">
1175
+ <code>&lt;div class="loader loader--heart"&gt;&lt;/div&gt;</code>
1176
+ </div>
1177
+ </div>
1178
+ <div class="demo-card-fixed">
1179
+ <div class="demo-card-fixed__preview">
1180
+ <div class="loader loader--wifi"></div>
1181
+ </div>
1182
+ <div class="demo-card-fixed__info">
1183
+ <h4 class="demo-card-fixed__title">wifi</h4>
1184
+ </div>
1185
+ <div class="demo-card-fixed__code">
1186
+ <code>&lt;div class="loader loader--wifi"&gt;&lt;/div&gt;</code>
1187
+ </div>
1188
+ </div>
1189
+ <div class="demo-card-fixed">
1190
+ <div class="demo-card-fixed__preview">
1191
+ <div class="loader loader--gear"></div>
1192
+ </div>
1193
+ <div class="demo-card-fixed__info">
1194
+ <h4 class="demo-card-fixed__title">gear</h4>
1195
+ </div>
1196
+ <div class="demo-card-fixed__code">
1197
+ <code>&lt;div class="loader loader--gear"&gt;&lt;/div&gt;</code>
1198
+ </div>
1199
+ </div>
1200
+ </div>
1201
+
1202
+ {# Objects Section #}
1203
+ <h2 class="demo-section-title">🎭 Objects</h2>
1204
+ <p class="demo-section-desc">Real-world object inspired loaders</p>
1205
+ <div class="demo-grid-fixed">
1206
+ <div class="demo-card-fixed">
1207
+ <div class="demo-card-fixed__preview">
1208
+ <div class="loader loader--hourglass"></div>
1209
+ </div>
1210
+ <div class="demo-card-fixed__info">
1211
+ <h4 class="demo-card-fixed__title">hourglass</h4>
1212
+ </div>
1213
+ <div class="demo-card-fixed__code">
1214
+ <code>&lt;div class="loader loader--hourglass"&gt;&lt;/div&gt;</code>
1215
+ </div>
1216
+ </div>
1217
+ <div class="demo-card-fixed">
1218
+ <div class="demo-card-fixed__preview">
1219
+ <div class="loader loader--clock"></div>
1220
+ </div>
1221
+ <div class="demo-card-fixed__info">
1222
+ <h4 class="demo-card-fixed__title">clock</h4>
1223
+ </div>
1224
+ <div class="demo-card-fixed__code">
1225
+ <code>&lt;div class="loader loader--clock"&gt;&lt;/div&gt;</code>
1226
+ </div>
1227
+ </div>
1228
+ <div class="demo-card-fixed">
1229
+ <div class="demo-card-fixed__preview">
1230
+ <div class="loader loader--battery"></div>
1231
+ </div>
1232
+ <div class="demo-card-fixed__info">
1233
+ <h4 class="demo-card-fixed__title">battery</h4>
1234
+ </div>
1235
+ <div class="demo-card-fixed__code">
1236
+ <code>&lt;div class="loader loader--battery"&gt;&lt;/div&gt;</code>
1237
+ </div>
1238
+ </div>
1239
+ <div class="demo-card-fixed">
1240
+ <div class="demo-card-fixed__preview">
1241
+ <div class="loader loader--book"></div>
1242
+ </div>
1243
+ <div class="demo-card-fixed__info">
1244
+ <h4 class="demo-card-fixed__title">book</h4>
1245
+ </div>
1246
+ <div class="demo-card-fixed__code">
1247
+ <code>&lt;div class="loader loader--book"&gt;&lt;/div&gt;</code>
1248
+ </div>
1249
+ </div>
1250
+ <div class="demo-card-fixed">
1251
+ <div class="demo-card-fixed__preview">
1252
+ <div class="loader loader--clipboard"></div>
1253
+ </div>
1254
+ <div class="demo-card-fixed__info">
1255
+ <h4 class="demo-card-fixed__title">clipboard</h4>
1256
+ </div>
1257
+ <div class="demo-card-fixed__code">
1258
+ <code>&lt;div class="loader loader--clipboard"&gt;&lt;/div&gt;</code>
1259
+ </div>
1260
+ </div>
1261
+ <div class="demo-card-fixed">
1262
+ <div class="demo-card-fixed__preview">
1263
+ <div class="loader loader--coin"></div>
1264
+ </div>
1265
+ <div class="demo-card-fixed__info">
1266
+ <h4 class="demo-card-fixed__title">coin</h4>
1267
+ </div>
1268
+ <div class="demo-card-fixed__code">
1269
+ <code>&lt;div class="loader loader--coin"&gt;&lt;/div&gt;</code>
1270
+ </div>
1271
+ </div>
1272
+ <div class="demo-card-fixed">
1273
+ <div class="demo-card-fixed__preview">
1274
+ <div class="loader loader--document"></div>
1275
+ </div>
1276
+ <div class="demo-card-fixed__info">
1277
+ <h4 class="demo-card-fixed__title">document</h4>
1278
+ </div>
1279
+ <div class="demo-card-fixed__code">
1280
+ <code>&lt;div class="loader loader--document"&gt;&lt;/div&gt;</code>
1281
+ </div>
1282
+ </div>
1283
+ <div class="demo-card-fixed">
1284
+ <div class="demo-card-fixed__preview">
1285
+ <div class="loader loader--envelope"></div>
1286
+ </div>
1287
+ <div class="demo-card-fixed__info">
1288
+ <h4 class="demo-card-fixed__title">envelope</h4>
1289
+ </div>
1290
+ <div class="demo-card-fixed__code">
1291
+ <code>&lt;div class="loader loader--envelope"&gt;&lt;/div&gt;</code>
1292
+ </div>
1293
+ </div>
1294
+ <div class="demo-card-fixed">
1295
+ <div class="demo-card-fixed__preview">
1296
+ <div class="loader loader--search"></div>
1297
+ </div>
1298
+ <div class="demo-card-fixed__info">
1299
+ <h4 class="demo-card-fixed__title">search</h4>
1300
+ </div>
1301
+ <div class="demo-card-fixed__code">
1302
+ <code>&lt;div class="loader loader--search"&gt;&lt;/div&gt;</code>
1303
+ </div>
1304
+ </div>
1305
+ </div>
1306
+
1307
+ {# Physics Section #}
1308
+ <h2 class="demo-section-title">⚛️ Physics</h2>
1309
+ <p class="demo-section-desc">Motion-based physics animations</p>
1310
+ <div class="demo-grid-fixed">
1311
+ <div class="demo-card-fixed">
1312
+ <div class="demo-card-fixed__preview">
1313
+ <div class="loader loader--pendulum"></div>
1314
+ </div>
1315
+ <div class="demo-card-fixed__info">
1316
+ <h4 class="demo-card-fixed__title">pendulum</h4>
1317
+ </div>
1318
+ <div class="demo-card-fixed__code">
1319
+ <code>&lt;div class="loader loader--pendulum"&gt;&lt;/div&gt;</code>
1320
+ </div>
1321
+ </div>
1322
+ <div class="demo-card-fixed">
1323
+ <div class="demo-card-fixed__preview">
1324
+ <div class="loader loader--seesaw"></div>
1325
+ </div>
1326
+ <div class="demo-card-fixed__info">
1327
+ <h4 class="demo-card-fixed__title">seesaw</h4>
1328
+ </div>
1329
+ <div class="demo-card-fixed__code">
1330
+ <code>&lt;div class="loader loader--seesaw"&gt;&lt;/div&gt;</code>
1331
+ </div>
1332
+ </div>
1333
+ <div class="demo-card-fixed">
1334
+ <div class="demo-card-fixed__preview">
1335
+ <div class="loader loader--ping-pong"></div>
1336
+ </div>
1337
+ <div class="demo-card-fixed__info">
1338
+ <h4 class="demo-card-fixed__title">ping-pong</h4>
1339
+ </div>
1340
+ <div class="demo-card-fixed__code">
1341
+ <code>&lt;div class="loader loader--ping-pong"&gt;&lt;/div&gt;</code>
1342
+ </div>
1343
+ </div>
1344
+ <div class="demo-card-fixed">
1345
+ <div class="demo-card-fixed__preview">
1346
+ <div class="loader loader--rolling-rock"></div>
1347
+ </div>
1348
+ <div class="demo-card-fixed__info">
1349
+ <h4 class="demo-card-fixed__title">rolling-rock</h4>
1350
+ </div>
1351
+ <div class="demo-card-fixed__code">
1352
+ <code>&lt;div class="loader loader--rolling-rock"&gt;&lt;/div&gt;</code>
1353
+ </div>
1354
+ </div>
1355
+ </div>
1356
+
1357
+ </section>
1358
+ {% endblock content %}