{"id":19846466,"url":"https://github.com/kostad02/ngxcubeloader","last_synced_at":"2026-05-10T22:36:06.563Z","repository":{"id":224053777,"uuid":"762278526","full_name":"KostaD02/NgxCubeLoader","owner":"KostaD02","description":"An angular library for cube loader","archived":false,"fork":false,"pushed_at":"2024-03-10T09:58:31.000Z","size":2432,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-14T05:38:17.025Z","etag":null,"topics":["angular","angular-loader","css-loader","cube","cube-loader","loader"],"latest_commit_sha":null,"homepage":"https://kostad02.github.io/NgxCubeLoader/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/KostaD02.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-02-23T12:57:41.000Z","updated_at":"2024-11-16T14:43:56.000Z","dependencies_parsed_at":"2024-03-09T13:45:41.424Z","dependency_job_id":"468fcdbf-74b7-4a8a-b21b-6b5b004eab68","html_url":"https://github.com/KostaD02/NgxCubeLoader","commit_stats":{"total_commits":22,"total_committers":1,"mean_commits":22.0,"dds":0.0,"last_synced_commit":"3e5d21cb8641c97d3f2ef5bb180c7157a3294934"},"previous_names":["kostad02/kd-loader","kostad02/ngxcubeloader"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KostaD02%2FNgxCubeLoader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KostaD02%2FNgxCubeLoader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KostaD02%2FNgxCubeLoader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KostaD02%2FNgxCubeLoader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/KostaD02","download_url":"https://codeload.github.com/KostaD02/NgxCubeLoader/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241225318,"owners_count":19930148,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","angular-loader","css-loader","cube","cube-loader","loader"],"created_at":"2024-11-12T13:11:36.908Z","updated_at":"2026-05-10T22:36:06.504Z","avatar_url":"https://github.com/KostaD02.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# NgxCubeLoader\r\n\r\nAngular (v17+) cube loader which can be configured.\r\n\r\n## Examples\r\n\r\nThe base animation looks like this:\r\n\r\n\u003cimg src=\"./assets/visual-single.gif\" alt=\"example view of single animation\"\u003e\r\n\r\nBut if you don't like the blue color, you could use one of the predefined colors:\r\n\r\n\u003cimg src=\"./assets/visual.gif\" alt=\"example view of many animation\"\u003e\r\n\r\n## Installation\r\n\r\n```bash\r\nnpm install ngx-cube-loader\r\n```\r\n\r\n## Usage\r\n\r\nImport `NgxCubeLoaderComponent` in your module or component where you want to use it.\r\n\r\nFor module:\r\n\r\n```ts\r\nimport { NgModule } from \"@angular/core\";\r\nimport { NgxCubeLoaderComponent } from \"ngx-cube-loader\";\r\n\r\n@NgModule({\r\n  imports: [\r\n    // ...\r\n    NgxCubeLoaderComponent,\r\n  ],\r\n})\r\nexport class AppModule {}\r\n```\r\n\r\nOr for a component if it's standalone:\r\n\r\n```ts\r\nimport { Component } from \"@angular/core\";\r\nimport { NgxCubeLoaderComponent } from \"ngx-cube-loader\";\r\n\r\n@Component({\r\n  selector: \"app-root\",\r\n  standalone: true,\r\n  imports: [NgxCubeLoaderComponent],\r\n  template: \"\u003cngx-cube-loader\u003e\u003c/ngx-cube-loader\u003e\",\r\n})\r\nexport class AppComponent {}\r\n```\r\n\r\nExample with component inputs:\r\n\r\n```ts\r\nimport { Component } from \"@angular/core\";\r\nimport { NgxCubeLoaderComponent } from \"ngx-cube-loader\";\r\n\r\n@Component({\r\n  selector: \"app-root\",\r\n  standalone: true,\r\n  imports: [NgxCubeLoaderComponent],\r\n  template: `\r\n    \u003cngx-cube-loader colorSet=\"gold\"\u003e\u003c/ngx-cube-loader\u003e\r\n    \u003cngx-cube-loader colorSet=\"random\"\u003e\u003c/ngx-cube-loader\u003e\r\n    \u003cngx-cube-loader [colorSet]=\"['#00cc00', '#009900', '#006600', '#003300']\"\u003e\u003c/ngx-cube-loader\u003e\r\n    \u003cngx-cube-loader [size]=\"20\"\u003e\u003c/ngx-cube-loader\u003e\r\n    \u003cngx-cube-loader [duration]=\"500\"\u003e\u003c/ngx-cube-loader\u003e\r\n  `,\r\n  style,\r\n})\r\nexport class AppComponent {}\r\n```\r\n\r\n## Predefined colors\r\n\r\nThe component does have 14 predefined colors. Only the blue color is hand-written, and others are generated based on the first color by using the `NgxCubeLoaderService` method `generateColorPalette`. You can use these predefined colors or modify and provide inputs.\r\n\r\n| Color  | Hex values                                      |\r\n| ------ | ----------------------------------------------- |\r\n| blue   | `'#5c8df6'` `'#145af2'` `'#447cf5'` `'#dbe3f4'` |\r\n| gold   | `'#FFD700'` `'#d2b100'` `'#a68c00'` `'#796600'` |\r\n| white  | `'#ffffff'` `'#f0f0f0'` `'#d8d8d8'` `'#b0b0b0'` |\r\n| black  | `'#000000'` `'#333333'` `'#666666'` `'#999999'` |\r\n| red    | `'#ff0000'` `'#cc0000'` `'#990000'` `'#660000'` |\r\n| orange | `'#ff9900'` `'#ff6600'` `'#ff3300'` `'#cc3300'` |\r\n| green  | `'#00cc00'` `'#009900'` `'#006600'` `'#003300'` |\r\n| yellow | `'#ffff00'` `'#cccc00'` `'#999900'` `'#666600'` |\r\n| purple | `'#9933ff'` `'#6600cc'` `'#4d0099'` `'#330066'` |\r\n| gray   | `'#D3D3D3'` `'#DCDCDC'` `'#E5E5E5'` `'#F0F0F0'` |\r\n| brown  | `'#FFB366'` `'#FFC299'` `'#FFD1B3'` `'#FFE0CC'` |\r\n| cyan   | `'#00FFFF'` `'#00CED1'` `'#20B2AA'` `'#008B8B'` |\r\n| violet | `'#8A2BE2'` `'#9400D3'` `'#800080'` `'#4B0082'` |\r\n| pink   | `'#FFC0CB'` `'#FF69B4'` `'#FF1493'` `'#DB7093'` |\r\n\r\nThere is also a predefined color `'random'`, which is completely random. You could use it, but personally, I wouldn't rely on it. The random color palette is generated by the `NgxCubeLoaderService`. First, it generates a random hex value with the `getRandomHexColor` method, and the returned value is then used for the `generateColorPalette` method as the base color, resulting in a random color palette.\r\n\r\n## API\r\n\r\nNgxCubeLoader provides one component, one service, five types and one const.\r\n\r\n### Types\r\n\r\nIn the code, there are a few types used.\r\n\r\n| Type                 | Description                                                    | First example                                  | Second example                                 |\r\n| -------------------- | -------------------------------------------------------------- | ---------------------------------------------- | ---------------------------------------------- |\r\n| `Color`              | Color which will be written in RGB or hex format               | `#5c8df6`                                      | `rgb(92, 141, 246)`                            |\r\n| `ColorSet`           | Array of `Color`, which will contain only 4 elements           | `['#5c8df6', '#145af2', '#447cf5', '#dbe3f4']` | `['#FFD700', '#d2b100', '#a68c00', '#796600']` |\r\n| `PredefinedColorSet` | Predefined color names                                         | `'blue'`                                       | `'gold'`                                       |\r\n| `CubeSize`           | Size of the cube which can be provided as a number or string   | 32                                             | `'32px'`                                       |\r\n| `CubeDuration`       | Animation duration which can be provided as a number or string | 800                                            | `800ms`                                        |\r\n\r\n### ngx-cube-loader component\r\n\r\n`ngx-cube-loader` is [standalone](https://angular.io/guide/standalone-components) component.\r\n\r\n| Property       | Description                                                      | type                                             | Default  |\r\n| -------------- | ---------------------------------------------------------------- | ------------------------------------------------ | -------- |\r\n| `[isFullSize]` | Provide full-size (100%) value for the animation wrapper element | `boolean`                                        | `false`  |\r\n| `[colorSet]`   | Each cube color                                                  | `ColorSet` or `PredefinedColorSet` or `'random'` | `'blue'` |\r\n| `[size]`       | Size of cubes                                                    | `CubeSize`                                       | `32`     |\r\n| `[duration]`   | Duration of animation                                            | `CubeDuration`                                   | `800`    |\r\n\r\n### ngx-cube-loader service\r\n\r\n`ngx-cube-loader` service have 2 method\r\n\r\n| Method                 | Params                                | Description                                                                                     | Return     |\r\n| ---------------------- | ------------------------------------- | ----------------------------------------------------------------------------------------------- | ---------- |\r\n| `generateColorPalette` | Base color (Color type), Palette Size | Method will generate array as many as provided palette size, colors will be based on base color | `ColorSet` |\r\n| `getRandomHexColor`    | None                                  | Method will generate random hex and return it                                                   | `Color`    |\r\n\r\nBased on the cube animations made by [Aaron Iker](https://dribbble.com/ai)\r\n\r\n## License\r\n\r\nngx-cube-loader is [MIT licensed](https://github.com/KostaD02/kd-loader/blob/main/LICENSE)\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkostad02%2Fngxcubeloader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkostad02%2Fngxcubeloader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkostad02%2Fngxcubeloader/lists"}