loadingio / loading-bar Goto Github PK

Flexible, light weighted and super fast Progress Bar Library

License: MIT License

CSS 0.73% LiveScript 49.14% JavaScript 48.14% HTML 0.02% Shell 1.96%

loading-bar's Introduction

loading-Bar

loading-Bar is a highly flexible, open sourced progress bar library based on SVG. For demo and documentation, check out the official website: https://loading.io/progress/

Example

Usage

download and include the required JS and CSS files:

<link rel="stylesheet" type="text/css" href="loading-bar.css"/>
<script type="text/javascript" src="loading-bar.js"></script>
<div class="ldBar"></div>

Building

Install prerequisites

sudo npm install -g gulp

Build

git clone https://github.com/loadingio/loading-bar
cd loading-bar
npm install
gulp

Built files will be written into ./build directory

LICENSE

MIT License

loading-bar's People

Contributors

Stargazers

Watchers

loading-bar's Issues

want change the color of the percent text

can't change the color of the percent text,can u creat a api

SASS ?

.scss file instead of .css files for bundlers.

Hide Label And Disable Anitmation?

Greetings, thanks for this very nice widget..

i have two request/question.

how can i disable/hide the Label?
how can i disable the animation? just fill the value at once not from 0 to value.
is it possible loop the animation? like i set 100 as value and it keeps animating from 0 to 100 like marquee style progress when value is not definite.

hope that make sense?

thanks in advance

Make clear what counts as free or not free?

I'm a bit confused coming from the loading.io site; can you clarify what is covered in the MIT license in this repo, and what one must pay for?

Cannot read property 'ldBar' of null

Trying to get this running on a dead basic html file in most recent version of chrome...and not all the time, but sometimes I am seeing this error. Anyone have any ideas what might be causing it?

It's when I try and instantiate with this command b = new ldBar('h3 .lDbar')

loading-bar.ls:95 Uncaught TypeError: Cannot read property 'ldBar' of null
    at new ldBar (loading-bar.ls:95)
    at <anonymous>:1:5

here is my html file

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="/assets/loadingbar.css"/>
        <script type="text/javascript" src="/assets/loadingbar.js"></script>
    </head>
    <body>
        <h3 class="ldBar" data-preset="text" data-value="35">This is the bar.</h3>
    </body>
</html>

get value during animation and events for value checkpoint

we can add some checkpoints in the progress of the bar and make different visual states when the value crosses those checkpoints.

To make this possible we have to calculate the intermediate value during progress bar transition to precisely match the timing and the desired visual effects.

support gradients for loading bar image fill?

data-fill-background only seems to support solid colors, not gradients like data-fill and data-stroke. Would it not be a trivial update?

I'd consider contributing, but I'm not familiar with the coffeescript this lib is written in.

data-path doesn't work when height is zero in the path

Progress bar with gif animations

Hi!

Is it possible to use a gif in the progress bar as: Helixbar or this other progress bar?

Thanks!

fill type progress bar not showing in Safari and Firefox

looks like it's because some mandatory attributes are missing

Updating configuration on new instance not working

I'm trying to change the progress bar color after a user click, but even if I create a new instance of ldBar, I have no success:

    $(document).ready(function () {
        let p2 = new ldBar('#p2', {
            'preset': 'circle',
            'stroke': 'red'
        });
        p2.set(50, false);

        $('.btn-test').on('click', function () {

            let n = Math.floor(Math.random() * 100);
            p2 = new ldBar('#p2', {
                'stroke': 'green'
            });
            p2.set(n, false);
        });
    });

Is there a way to change configuration after the instance has been created?

Thank you for this great library!

Release on npm

It would be very good to release loading-bar on npm. The name is taken by some other lib (https://www.npmjs.com/package/loading-bar), but you could use scoped packages: https://docs.npmjs.com/getting-started/scoped-packages

Putting any text underneath loading bar (yes I'm dumb)

Hi, I'm a stupid developer here

I'm struggling to put text underneath and have it be inline with the loading bar, so whenever the loading bar moves, so does the text. Again dumb question, but I've been struggling with it for hours.

thanks again lol.

Harry

no transition in Safari and Firefox

Responsive / Full width bar

Hi,

I'm trying to make the bar full width of the corresponding container element.

So for example I have this:

<div class="container">
    <div class="col-50">
        <div class="ldBar" data-value="50" data-min="0" data-max="200">
        </div>
    </div>
</div>

.container has max-width 1170px. .col-50 has width 50%.

I want the bar to have the same width as the column. But the bar always defaults to 80px.

How can I achieve this?

Thanks for your help.

Animation does not work with data-img

I have tried using it with presets and it works like a charm, but with data-img animation simply does not work. Here's the fiddle.
https://jsfiddle.net/artutava/bv80fhke/5/

Is there any way to lower the space margin around a progressbar? It also seems that its getting larger the larger the data-pattern-size attribute gets. First screenshot shows a data-pattern-size of 100, second one has data-pattern-size="20". Maybe there is a attribute or workaround I don't see.

Thank you guys!

how to use in angular?

Hi, how can i use loading-bar in angular compnent?

NPM package mismatch

Hey, I think the code in the package
https://www.npmjs.com/package/@loadingio/loading-bar

mismatch the code in the github repository even tho the version numbers match.

for example setting "max" and "min" has no effect at all.
please consider updating the code correctly in npm.com
thanks.

ldBar init failed when there is no class in target element

className is used with indexOf but it's possible to be null when target element has no class attribute.

Gray background isn't displayed on MS Edge

Default gray background doesn't show on Edge. Example: Kirby at https://loading.io/progress

Getting error on some browsers

I was trying to use this for a game loading screen on GMod and the HTML loading screen browser is quite outdated when I try and use this on the loading screen get this error
"[HTML] URL/loading-bar.js:653: Uncaught TypeError: Object function Array() { [native code] } has no method 'from'"

as this is a very old browser version is there any way I could get this working on it or not?

Fill bar is not visible when using v-if

Fill bar is not visible when using v-if

Very unresponsive/glitchy when updating every second

I'm receiving value updates from a websocket connection every second and the bar does not update consistently at all:

2022-02-15.18-37-57.mp4

And when I disable animations, the value is completely incorrect:

2022-02-15.18-39-49.mp4

Relevant code:

var thingy = new ldBar("#thing");
ws = new WebSocket("ws://localhost:4000/ws/metrics")

ws.onopen = function() {
    console.log('WS Connected')
}

ws.onmessage = function(evt) {
    console.log('WS Message:',evt.data)
    thingy.set(evt.data)
}

<div
    id="thing"
    data-preset="fan"
    class="ldBar label-center"
    data-value="0"
    data-min="0"
    data-max="1000"
></div>

Maximum call stack size exceeded

at line 107

domTree = (n,o) ->
    n = newNode n
    for k,v of o => if k != \attr => n.appendChild domTree(k, v or {})
    n.attrs(o.attr or {})
    n

add setConfig for updating ldBar configuration

Wrong values are displayed

When initialized by Javascript, wrong values are displayed in a random manner:

My first page refresh:

Second (correct):

Third:

Fourth:

My source code to produce these results:

https://github.com/aktos-io/scada.js/tree/72de1d8fcf724e349fee1b0978ced87c019e6b91/src/client/components/progress

NS_ERROR_FAILURE when using set() in Firefox

Not sure how to reproduce but I have been getting this error sometimes when using set() with any number.

According to this post it has something to do with type coercion where Chrome does it and Firefox doesn't.

data-value attribute is not being tracked

Changing data-value attribute dynamically by the template engine (RactiveJS, in my case) does not make progress bar to update its value.

Tip: Re-rendering the progress bar solves the issue.

Does it support fill background for a stroke type progress bar

I believe the circle preset progress bar is stroke type, I was wondering if it is possible to fill the background in the circle. However seems the background option is only available for fill type progress bar.

Build step missing

As a Livescript user, I may know how to build a Livescript file but the build step should be included in the README.md.

Moreover, the .styl file uses relative import files, which are not included in the source.

ProgressBar with Asynchronous Value ?

Hello There,

I would like to find the way to use your library with percentage calculated,

I saw we can set the value, but to use progress bar with data changed in live ??

For example for updloading files it's (bytes / totalBytesFiles) *100 right ? ok But how to update value changing while uploading is used ?

In Javascript we can set value :
ldbar = new ldBar(document.querySelector('.ldBar'));
ldbar.set(80);

So the bar move and fill by until 80% is reach ok, but this 80 is static, my values are changing while my method is running

How can i achieve this ? Maybe with "data-transition-in" ???

Thanks for your answer :)

stroke type progress bar with pattern not showing in Safari and Firefox

Why label value is not correct

It occurs when I use api to setRate. Use data-value to disable counting animation can avoid this error.

Loading component using svg with label out off place

Hello, im not sure if this is a bug or bad usage of the component but the motor icon appears out of place and his label way far from it im using a position absolute on the styles so probably that is causing the issue anyone got any ideas on how i could fix this?
obs : sometimes the component appears correctly tho

customizable range of value

like, instead of 0 ~ 100, we can use 1 ~ 10, 0 ~ 200, etc.

Need an option to remove bar animation

In realtime SCADA environments, data should be displayed as is, not with easing. Thus, we need an option to disable only progress bar (value) animation (ie. not the buble animation).

loading php page

how do I load a php script in a page?

<div class="ldBar">
<?php
require 'ip_validate.php';
?>
</div>

Add to popular CDNs

I admit loading-bar looks awesome and I'll give it a whir shortly. But I am a great fan of content delivery networks (CDNs) offering better UX (user experience) as a librarie grows in popularity and is used across many sites. Mainly because when it comes off a popular CDN like Cloudflare there's a good chance a copy is already cached from another site.

I filed a New Library quest for it:

cdnjs/cdnjs#13717

But they are a tad shortstaffed in responding to them (understandably, for an awesome free service we can't really stomp up and down insisting on prompt action). On which front I don't expect it here either. But I did want to a) let you know and b) let you know you can PR an add to their CND it seems:

cdnjs/cdnjs#13715

Though I've not read up on exactly how yet.

It's also a good way to boost popularity methinks.

Great little bar you made here. Thanks!

Vertical bar

What's the best way to create a vertical bar?

Conflict between tiptap and loadingio/loading-bar

Hi,

I'm using nextjs and I have a page wich displays a chart using the library loadingio/loading-bar. Then I have a button to display an editor, where tiptap comes in, and that's when the problem appears. In isolation both libraries works fine, however when I have the chart already displayed and then I add the tiptap on that page the app brokes.

I have this simple demo where you can reproduce the problem by clicking on the button, which is a similar approach to what I have in my app.

https://codesandbox.io/s/tiptap-loadingio-fr4fj1

Thank you for your help.

ldBar doesn't appear in angular 2 app

Hi,
I have an angular 2 app. I've tried to user loading bar, but it doesn't work.

In my index.html I import js and css files

<link rel="stylesheet" type="text/css" href="plugins/loading.io/loading-bar.css">
<script type="text/javascript" src="plugins/loading.io/loading-bar.js"></script>

and in my experience.component.html I load the bar like this

<div class="ldBar" data-value="50"></div>

but nothing happens. I tried it on a single html file, and works fine.

PS: Sorry for my english

PS2: I'm using angular quickstart proyect

img option can only be passed via data-img attribute

img initialization option is only working when it is passed by data-img attribute. It doesn't work if we initialize it by javascript code, ie.:

new ldBar my-element, do 
    img: "/path/to/img.svg"
    type: "fill"

uncaught (in promise) DOMException: Failed to execute 'createElementNS' on 'Document'

Got this error by adding a simple progress bar to the html body:
<div class="ldBar" data-value="50"></div>

Initializing progress inside a hidden div leads empty progress bar

If you initialize progress bar inside a hidden div causes progress bar not to render.

Workaround

Re-rendering (removing from DOM and restoring it back) solves the problem.

TODO

Add a jsFiddle link