https://github.com/rofixro/css-3d-progress

3D Progress Bar
https://github.com/rofixro/css-3d-progress

progress-bar react svelte vue webcomponents

Last synced: 3 months ago
JSON representation

3D Progress Bar

• Host: GitHub
• URL: https://github.com/rofixro/css-3d-progress
• Owner: rofixro
• License: mit
• Created: 2020-05-09T17:22:01.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2024-02-02T01:35:52.000Z (9 months ago)
• Last Synced: 2024-05-21T09:34:59.416Z (6 months ago)
• Topics: progress-bar, react, svelte, vue, webcomponents
• Language: HTML
• Homepage: https://css-3d-progress.netlify.app
• Size: 659 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-svelte - css-3d-progress - A 3D Progress Bar component (UI Components / Miscellaneous)

README

        
![logo](logo.png)

A 3D progress bar component written using web Components, supports Vue, React and Svelte.

## Install

```bash

npm install css-3d-progress

```

## Usage

### Web Components

```html

  

    

    css-3d-progress

    

    

    

      body {

        margin: 0;

        height: 100vh;

        display: grid;

        place-items: center;

        background-color: #d0d0d0;

      }

    

  

  

    


      

    

  


```

### Vue

```vue

import "css-3d-progress";

import { ref } from "vue";

const percent = ref(60);

  


    

  


```

### React

```jsx

import "css-3d-progress";

import { useState } from "react";

function App() {

  const [percent] = useState(60);

  const style = { width: "20em" };

  return (

    <>

      


        

      

    >

  );

}


export default App;

```

### Svelte

```svelte

  import "css-3d-progress";

  const percent = 60;

  


    

  


```

## Options

| Name          | Type   | Default                      | Description                      |

| ------------- | ------ | ---------------------------- | -------------------------------- |

| percent       | string | 0                            | To set the completion percentage |

| is-animation  | string | false                        | Whether to enable flow effects   |

| stroke-color  | string | \#ec008c99                   | The color of progress bar        |

| trail-color   | string | \#fefefe4d                   | The color of unfilled part       |

| back-shadow   | string | -0.5em -1.5em 4em \#ec008ccc | Box-shadow on back               |

| bottom-shadow | string | 0em 0em 2em \#ec008ccc       | Box-shadow on bottom             |

## Badge

[![standard-readme compliant](https://img.shields.io/badge/readme%20style-standard-brightgreen.svg?style=flat-square)](https://github.com/RichardLitt/standard-readme)

## Related Efforts

* [Pure CSS Progress](https://codepen.io/rgg/pen/QbRyOq)

* [3D Progress Bars [Day 04]](https://codepen.io/dhiisti/pen/JjGMjOQ)

## License

[MIT](LICENSE)