Progress bars

[dogfalo]

Progress bars

[davidsoderberg]

What are your toughts on this, maybe I can help?

[Dogfalo]

We are dealing with other parts of the framework right now so it would be great if you could help!

[davidsoderberg]

Sure, any toughts on this yet?

[acburst]

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.

[davidsoderberg]

Maybe we could make it an jquery plugin?

[Dogfalo]

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.

[davidsoderberg]

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...

[acburst]

How about you just try making the indeterminate bar first and we can think about the other one after

[davidsoderberg]

Alright 😄

[davidsoderberg]

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?

[acburst]

It's looking pretty good. Do you wanna try experimenting with some easing?

[davidsoderberg]

Sure but I thought I could do determinate first :)

[Dogfalo]

Also fee free to join our chat room here, where it is easier to have discussion about new features. https://gitter.im/Dogfalo/materialize

[Dogfalo]

Added in 0c4e9b9