Skip to content
Permalink
Browse files

customize with css

  • Loading branch information...
jacoborus committed Apr 14, 2016
1 parent 4d17cb3 commit 93532311353a0920ec01393d39c6f2374c768f87
Showing with 34 additions and 8 deletions.
  1. +24 −0 README.md
  2. +3 −2 bower.json
  3. +2 −2 demo.html → demos/demos.html
  4. +1 −1 nanobar.js
  5. +4 −3 package.json
@@ -88,6 +88,30 @@ nanobar.go( 76 ); // size bar 76%
nanobar.go(100);
```

### Customize bars

Nanobar injects a style tag in your HTML head. Bar divs has class `.bar`, and its containers `.nanobar`, so you can overwrite its values.

Default css:

```css
.nanobar {
width: 100%;
height: 4px;
z-index: 9999;
top:0
}
.bar {
width: 0;
height: 100%;
transition: height .3s;
background:#000;
}
```

You should know what to do with that ;)


<br><br>

---
@@ -1,19 +1,20 @@
{
"name": "nanobar",
"description": "Very lightweight js progress bars",
"version": "0.4.0",
"version": "0.4.1",
"main": "nanobar.js",
"keywords": [
"loader",
"progress",
"progressbar",
"progress bar",
"CSS3",
"html"
],
"author": [
"Jacobo Tabernero jacobo@xarope.eu"
],
"license": "MIT",
"homepage": "http://nanobar.jacoborus.codes",
"bugs": {
"url": "https://github.com/jacoborus/nanobar/issues"
},
@@ -33,7 +33,7 @@
margin: 0 auto;
}
#centered .nanobar .bar {
background: url('demos/img/rainbow.gif') 100%;
background: url('img/rainbow.gif') 100%;
height: 9px;
}
</style>
@@ -69,7 +69,7 @@ <h1 id="nanobar">nanobar.js</h1>
</p>
</div>

<script src="nanobar.js"></script>
<script src="../nanobar.js"></script>
<script>
var simplebar = new Nanobar();
simplebar.go(50);
@@ -81,7 +81,7 @@
}

function Nanobar (opts) {
opts || (opts = {})
opts = opts || {}
// set options
var el = document.createElement('div'),
applyGo,
@@ -1,6 +1,6 @@
{
"name": "nanobar",
"version": "0.4.0",
"version": "0.4.1",
"description": "Very lightweight js progress bars (for browsers)",
"main": "nanobar.js",
"scripts": {
@@ -13,7 +13,8 @@
"url": "git@github.com:jacoborus/nanobar.git"
},
"keywords": [
"progressbar",
"loader",
"progress bar",
"css3",
"js",
"html"
@@ -23,7 +24,7 @@
"bugs": {
"url": "https://github.com/jacoborus/nanobar/issues"
},
"homepage": "http://nanobar.micronube.com",
"homepage": "http://nanobar.jacoborus.codes",
"namespace": "Nanobar",
"devDependencies": {
"eslint": "^2.6.0",

0 comments on commit 9353231

Please sign in to comment.
You can’t perform that action at this time.