Tiny JavaScript module that makes the Safari Toolbar colorful. It uses native toolbar's transparency so there are two restrictions:
- Works only at the Safari on MacOS or iOS
- Displays after some scroll offset
Install module via Yarn, then import to the Code.
yarn add safari-beauty-toolbaror with NPM
npm i safari-beauty-toolbar --saveYou can also download dist/sct.min.js and manually connect it with your project.
import SBToolbar from 'safari-beauty-toolbar';Basic usage is quite simple: just pass your brand color to the constructor.
const toolbarColor = new SBToolbar({
color: "red"
});| param | type | default | description |
|---|---|---|---|
color |
string | - | Toolbar color. Required |
This makes the Toolbar colorful. Try to reload the page and scroll it down.
Note. Because of transparency value of the Toolbar, you probably should pass little more saturated color than the usual brand's color.
Note. Place the initialization code at the bottom of
<body>-tag or call after document-ready event.
There are some additional methods that your can find useful in some cases.
blink({interval, transitionSpeed})Parameters passed as the destructuring assignment.
| param | type | default | description |
|---|---|---|---|
interval |
number | 400 | time between transparent and opaque color in ms |
transitionSpeed |
number | 500 | speed of transparency changing in ms |
Usage example
toolbarColor.blink({
interval: 300,
transitionSpeed: 1000
});
animate({colors, speed})Parameters passed as the destructuring assignment.
| param | type | default | description |
|---|---|---|---|
colors |
string[] | - | list of colors to change. Required. |
speed |
number | 800 | speed of color transition in ms |
Usage example
toolbarColor.animate({
colors: ["#ff0a8a", "blue", "#61ffa7", "yellow"],
speed: 600
});
Method allowed to use Toolbar's underlayer as a progressbar.
Before some process starts, call
startProgress({color, estimate})and after finish, call
stopProgress() The first method begins to increase with of the underlayer up to 90% and stop there for waiting stopProgress.
For better experience your can pass average time of the process via estimate option.
| param | type | default | description |
|---|---|---|---|
color |
string | #05c7ff | loader color |
estimate |
number | 3500 | average time of the process |
Usage example
/**
* Call before the process (for example, AJAX request)
*/
toolbarPane.startProgress({
color: "#05c7ff",
estimate: 3500
});
/**
* Call after the process will be finished
* We use the timeout for the demonstration
*/
setTimeout(function(){
toolbarPane.stopProgress();
}, 4850);Can be used to reinitialize the Module with new options
reinit({color}) | param | type | default | description |
|---|---|---|---|
color |
string | - | Toolbar color. Required |
Used to stop blinking effect
stopBlinking() Used to stop the animation
stopAnimation() Combines stopBlinking, stopAnimation and stopProgress
stopAllEffects() Totally removes all Module's stuff.
destroy()