Webcomponents statusbar
- beautiful
- easy to use
- accessible
- time saving
https://tjb-webcomponents.github.io/tjb-statusbar/
You might want to use a Polyfill for WebComponent:
<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.2.0/webcomponents-lite.js"></script>
Include it:
<script
src="https://tjb-webcomponents.github.io/tjb-statusbar/tjb-statusbar.min.js"
type="module"
></script>
import 'https://tjb-webcomponents.github.io/tjb-statusbar/tjb-statusbar.min.js'
Console:
npm i -S tjb-statusbar
Then in your code:
import 'tjb-statusbar';
<tjb-statusbar></tjb-statusbar>
With all attributes:
<tjb-statusbar status="loading"></tjb-statusbar>
status
can beloading
|alert
|success
|info
- can be triggered programmatically:
tjbStatusbar.status = 'alert'
Default public values:
:host {
--statusbar-width: 100%;
--statusbar-height: 5px;
--statusbar-position: absolute;
--statusbar-left: 0;
--statusbar-bottom: 0;
--statusbar-top: auto;
--statusbar-right: auto;
--status-loading: linear-gradient(
to right,
#4cd964,
#007aff,
#ff2d55,
#5856d6,
#4cd964
);
--status-alert: #fa354c;
--status-success: #4cd964;
--status-info: #007aff;
}
These can be overwritten easily by targeting the element. Example:
tjb-statusbar {
--status-alert: red;
}