Comments (14)
What are your toughts on this, maybe I can help?
from materialize.
We are dealing with other parts of the framework right now so it would be great if you could help!
from materialize.
Sure, any toughts on this yet?
from materialize.
Take a look at this http://www.google.com/design/spec/components/progress-activity.html#progress-activity-types-of-indicators under the linear section.
If you want, you could try making the indeterminate progress bar, and maybe some form of determinate progress bar where you can have some attribute or class that sets how full the percentage is.
from materialize.
Maybe we could make it an jquery plugin?
from materialize.
I don't think jQuery should be necessary here.
On Thu, Jan 8, 2015 at 12:59 PM, David Sรถderberg [email protected]
wrote:
Maybe we could make it an jquery plugin?
โ
Reply to this email directly or view it on GitHub
#23 (comment).
Doggy sends his greetings from Mars.
from materialize.
I thinking about setting width of progess, how that will be easy to make with css. 100 classes is not a good solution. We can set it on a div like this style="width: 80%;
But that is not nice if you ask me...
from materialize.
How about you just try making the indeterminate bar first and we can think about the other one after
from materialize.
Alright ๐
from materialize.
Alright here is a first try:
CSS:
.progress {
position: relative;
height: 5px;
display: block;
width: 100%;
background-color: #c7c7c7;
margin: 1em 0;
overflow: hidden;
}
.indeterminate {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
-webkit-animation: indeterminate 1s linear infinite;
}
@-webkit-keyframes indeterminate {
0% {
-webkit-transform: translate(-100%);
}
50% {
-webkit-transform: translate(0%);
}
100% {
-webkit-transform: translate(100%);
}
}
And HTML:
<div class="progress">
<div class="indeterminate red"></div>
</div>
So what do you think?
from materialize.
It's looking pretty good. Do you wanna try experimenting with some easing?
from materialize.
Sure but I thought I could do determinate first :)
from materialize.
Also fee free to join our chat room here, where it is easier to have discussion about new features. https://gitter.im/Dogfalo/materialize
from materialize.
Added in 0c4e9b9
from materialize.
Related Issues (20)
- Unmaintained library, support this project instead ! HOT 2
- Dropdown menu of Navbar isn't working in Next.js App HOT 5
- Input build and development are different HOT 1
- There is no search button for material icons HOT 2
- Keep tooltip open HOT 4
- Materialize slider height issue HOT 2
- _forms.scss should not style global button element HOT 1
- toast screenreader accessibility HOT 1
- Calling Toast.dismissAll() a second time without any new toasts triggers error "_this29.el.parentNode is null" HOT 1
- Lorempixum images in documentation are broken HOT 1
- Link to New Project HOT 1
- Pulse effect to perform false trigger on the pulse wave HOT 2
- Label animations in shadowRoot not working HOT 1
- Materialize Select Dropdown menu not resizing when updating the list through Javascript HOT 2
- Date value keep increasing upon next and prev click, yearRange issue HOT 1
- dropdown link are not working HOT 1
- After Download css is not working correctly HOT 1
- Adding carousel options HOT 1
- Scroll-up button HOT 1
- manual option and tracking select or something
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 materialize.