mirror of
https://github.com/appwrite/console.git
synced 2026-04-07 19:17:46 +00:00
Torsten Dittmann
cb15bb9122
- Introduce CSS grid of circles with staggered delays - Add JS to build the animated grid and attach to DOM - Update app.html to load the studio loading script and assets
100 lines
1.9 KiB
JavaScript
100 lines
1.9 KiB
JavaScript
function createAnimatedLogo(root) {
|
|
// pattern encoded exactly like your React element tree
|
|
const pattern = [
|
|
// row 1
|
|
'',
|
|
'size1',
|
|
'size2',
|
|
'size3',
|
|
'size3',
|
|
'size2',
|
|
'size1',
|
|
'',
|
|
// row 2
|
|
'size2',
|
|
'size3',
|
|
'size4',
|
|
'size5',
|
|
'size5',
|
|
'size4',
|
|
'size3',
|
|
'size2',
|
|
// row 3
|
|
'size3',
|
|
'size4',
|
|
'size8',
|
|
'size8',
|
|
'size8',
|
|
'size8',
|
|
'size4',
|
|
'size3',
|
|
// row 4
|
|
'size3',
|
|
'size5',
|
|
'size8',
|
|
'size9',
|
|
'size9',
|
|
'size8',
|
|
'size5',
|
|
'size3',
|
|
// row 5
|
|
'size3',
|
|
'size5',
|
|
'size8',
|
|
'size9',
|
|
'size9',
|
|
'size8',
|
|
'size5',
|
|
'size3',
|
|
// row 6
|
|
'size3',
|
|
'size4',
|
|
'size8',
|
|
'size8',
|
|
'size8',
|
|
'size8',
|
|
'size4',
|
|
'size3',
|
|
// row 7
|
|
'size2',
|
|
'size3',
|
|
'size4',
|
|
'size5',
|
|
'size5',
|
|
'size4',
|
|
'size3',
|
|
'size2',
|
|
// row 8
|
|
'',
|
|
'size1',
|
|
'size2',
|
|
'size3',
|
|
'size3',
|
|
'size2',
|
|
'size1',
|
|
''
|
|
];
|
|
|
|
// build container
|
|
const grid = document.createElement('div');
|
|
grid.className = 'gridContainer';
|
|
|
|
// optional background square (hidden by default)
|
|
const backgroundSquare = document.createElement('div');
|
|
backgroundSquare.className = 'backgroundSquare';
|
|
grid.appendChild(backgroundSquare);
|
|
|
|
// insert circles and blanks
|
|
pattern.forEach((size) => {
|
|
const el = document.createElement('div');
|
|
if (size) {
|
|
el.classList.add('circle', size);
|
|
}
|
|
grid.appendChild(el);
|
|
});
|
|
|
|
root.appendChild(grid);
|
|
}
|
|
|
|
createAnimatedLogo(document.querySelector('.page-loader'));
|