Comments (13)
I think we are conflating the two a bit.. the example already in the demo that @driskull is referring to should remain (although maybe only consumed by modal, alert, etc.) - the "Square" loader in my mind is great for initial page loads, switching between apps, etc., and could be easily themed to a particular Online app's color scheme - but I think they are two different use cases and we need both. Can't think of a good differentiating name however, ha.
from calcite-design-system.
Maybe...
- calcite-loader (big square)
- calcite-loader-progress (progress square)
- calcite-loader-top (loader at top of element, can be determinate or indeterminate)
- calcite-loader-inline (small square)
from calcite-design-system.
@paulcpederson this is looking pretty dope based on the video.
Would love to art direct a little when you have the time for fine tuning
from calcite-design-system.
From the Calcite-Web 2.0 update, new design. The new design includes:
- Loader (default)
- Progress
- Inline
I can see how the progress bar Patrick shared can be valuable as well. I've seen the infinite loader from Alan's worked. Maybe it's adding it and updating the tweens to match the new calcite loader?
from calcite-design-system.
We might be able to add just Progress
and Inline
components.
I can see the Progress
component handling Alan's infinite loader bar which we usually have at the top of a panel or component. The Progress
component would just have a slot for whatever goes inside it and it would allow configuring the progress bar at the top. There would be multiple options for the progress bar like indeterminate
, indeterminate-reversed
, percentage
from calcite-design-system.
Could we in any way leverage alerts for the progression or "filename.csv is being generated" type progress containers? I'd imagine the fields would be pretty similar.
We have a "countdown" animation already for auto dismiss alerts, we can change that to be a progression bar or indeterminate loading animation based on a prop?
from calcite-design-system.
We have a "countdown" animation already for auto dismiss alerts, we can change that to be a progression bar or indeterminate loading animation based on a prop?
Yep sounds right.
Could we in any way leverage alerts for the progression or "filename.csv is being generated" type progress containers? I'd imagine the fields would be pretty similar.
Maybe just an optional string that a user could update when they update the percentage
from calcite-design-system.
When ready for the 2.0 UI update for this component please work with @bstifle.
Loading squares video above
from calcite-design-system.
@julio8a I think we still need a border-top
loader that would just go at the top of a panel and not take up space within content. Is there a design for that?
from calcite-design-system.
I'll work on getting that posted here.
from calcite-design-system.
It seems like we need:
- calcite-loader (big square)
- calcite-loader-progress (progress square)
- calcite-loader-inline (small square)
- calcite-loader-indeterminate (border loader, top of slot content)
from calcite-design-system.
Yeah that looks good, only thing we might want to add would be the determinate version of "top border":
- calcite-loader-progress (border loader, top of slot content)
from calcite-design-system.
Ok, so the plan would be to...
- Rename
calcite-progress
tocalcite-loader-top
. - Update
calcite-loader
to use new box design (big square) - Develop
calcite-loader-progress
(progress square) - Develop
calcite-loader-inline
(small square)
from calcite-design-system.
Related Issues (20)
- [modal / date-picker] Calendar can be hidden by modal HOT 2
- [input time picker] Update the open picker to make the ability to search more obvious HOT 2
- [input time zone] Update and re-organize timezone dropdown options for improved usability HOT 1
- [input time zone] add a time zone picker null state HOT 7
- Calcite Buttons do not behave consistently with HTML Buttons within a CSS Flex container HOT 2
- [combobox] highlight matching search terms HOT 2
- [text area]: allow consumers to modify minimum and maximum height and width of the text area
- [Menu Item] Add `editable` property and UI affordance
- [Menu / Menu Item] Add Menu Item Group component
- Combobox: Add way to keep height consistent when selected vs not selected
- Update description of headingLevel property to clarify what it's used for HOT 3
- DateTime Picker
- Multi-select chip group affordance enhancement HOT 2
- split up commonTest helpers into individual modules
- CalciteTabNav throwing console.error on load HOT 1
- List loses divider lines when consumer includes Tailwind HOT 3
- date-picker: focus is missing when using arrow/page keys to switch between months HOT 2
- Color slider
- Panel: Allow esc key to be cancelled and prevent closing HOT 2
- Action: Create localized template for aria-label
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from calcite-design-system.