Coder Social home page Coder Social logo

ngx-progress-loader's Introduction

Angular Ngx-ProgressLoader

How was Ngx-Progress Loader born?

While developing my website, I was looking for a component to use to represent my confidence level with various technologies.

As you can imagine, I certainly found a ready-made component that was right for me, but what's the point of life without some difficulty? ๐Ÿ˜‚

So I decided to provide my personal interpretation of the component which until then was just an idea in my head ๐Ÿ’ช ๐Ÿ˜„

Feel free to sift through the code ๐Ÿ”Ž, take inspiration, use the component, report bugs ๐Ÿ› and if you like, even leave a star โญ


Warning

The component is still under active development, and at the moment a stable version is not yet available.

As a result, both the methods of use and the API may undergo significant changes.


Table of contents

Version

NgxProgressLoader Angular
v1.x -
v0.x >=17.0.0 <18.0.0

Browser Support

Chrome
Chrome
Firefox
Firefox
IE / Edge
IE / Edge
iOS Safari
Safari
Opera
Opera
Latest โœ” Latest โœ” IE11, Edge โœ” Latest โœ” Latest โœ”

Features

  • Circle Loader
  • Multi Circle Loader
  • Square Loader
  • Content projection
  • Infinite loop animation
  • Customization

Installation

ngx-progress-loader is available via npm

Using npm:

$ npm install ngx-progress-loader --save

Configuration

Customization

Color

ngx-progress-loader is presented with default colors that can be used.

Color Hex Code Default
black black! #1a1a1a
white white! #d9d9d9
blue blue! #3498DB true
orange orange! #F39C12
green green! #27AE60
purple purple! #7D3C98

The desired color can be indicated via the color input. If omitted, the default coloring is used.

โ€ผ๏ธ It isn't currently possible to use color input to indicate custom colors. However, you can customize the coloring by using custom CSS rules. For more information see the section Css Customization

  <ngx-progress-loader
    type="circle"
    color="purple">
  </ngx-progress-loader>

CSS Customization

โš ๏ธ The library is still under active development! Many properties may have been implemented only partially and therefore not available for all components

You can customize the appearance of your components by editing the CSS custom properties.

CSS Custom Propriety Description Support
--track-color Allows customization of the loader track color!
Track customization can only be done through the use of custom CSS.
โœ”๏ธ
--progress-color Allows you to change the color of the Loader. You can indicate coloring in any format allowed by CSS (hex, rgb/rgba,...)
โ€ผ๏ธ The color input takes precedence over the CSS property
โœ”๏ธ

Demo

Example

  <ngx-progress-loader
    type="circle"
    [value]='progressValue'
    color="orange">
  </ngx-progress-loader>

ngx-progress-loader's People

Contributors

0xraffsarr avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.