New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Progress bars #23
Comments
What are your toughts on this, maybe I can help? |
We are dealing with other parts of the framework right now so it would be great if you could help! |
Sure, any toughts on this yet? |
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. |
Maybe we could make it an jquery plugin? |
I don't think jQuery should be necessary here. On Thu, Jan 8, 2015 at 12:59 PM, David Söderberg notifications@github.com
Doggy sends his greetings from Mars. |
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 |
How about you just try making the indeterminate bar first and we can think about the other one after |
Alright 😄 |
Alright here is a first try: .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:
So what do you think? |
It's looking pretty good. Do you wanna try experimenting with some easing? |
Sure but I thought I could do determinate first :) |
Also fee free to join our chat room here, where it is easier to have discussion about new features. https://gitter.im/Dogfalo/materialize |
Added in 0c4e9b9 |
No description provided.
The text was updated successfully, but these errors were encountered: