Added initial implementation of loader - spinner #1631
Conversation
|
I am working on eleventy page demo & react demo for this component |
|
✔️ Deploy Preview for ecstatic-noether-150ab4 ready! 🔨 Explore the source changes: 540597e 🔍 Inspect the deploy log: https://app.netlify.com/sites/ecstatic-noether-150ab4/deploys/612ce107e240fd0007e2e9c2 😎 Browse the preview: https://deploy-preview-1631--ecstatic-noether-150ab4.netlify.app |
|
Eleventy page showing preview correctly in dev mode, but not on deployed preview |
|
@khawkins98 @nitinja just curious to know if we can build our own EMBL style loader/spinner instead of standard one. Like we can use the hexagon icon of logo and circle around it animated effect. https://monophy.com/gifs/embl-embllogo-embllogomonochrome-SU8RkgEO4bcb9bL1U9 https://www.embl.org/news/wp-content/uploads/2014/09/embl_virus_logo_animation_5sec.gif |
|
|
|
Ah looks nice 👍 |
Lerna will bump this to alpha.1 on release
|
|
||
| <div class="vf-indicator-loader--spinner__circle"></div> | ||
|
|
||
| {% if example == true %} |
There was a problem hiding this comment.
further above you used {% if container == true %}... did you mean to container here as well?
| .vf-indicator-loader--spinner__circle { | ||
| width: 32px; | ||
| height: 32px; | ||
| color: $vf-indicator-loader--border-color; |
There was a problem hiding this comment.
I have some suggestions on how to use the design tokens here. Might be clearest/best if I just do that and then we can look at the diff.
There was a problem hiding this comment.
@nitinja I still need to update this Sass, but if you could please look at the other PR comment.
There was a problem hiding this comment.
I've addressed this with commit 0c370a6
|
Looking good @nitinja — I did have a few minor things that I've noted. |
Are we good to use hexagon style or grey circle loader |
|
@sandykadam I have committed just the circle spinner as of now, I think we can't commit any design that's not approved by UX people. |
This does a couple of things: 1. Sass linting to alphabitise ordering 2. use CSS vars (custom props) — we tend to use this over the Sass vars as this allows more possibility to cascade in new values for styling
No description provided.