diff --git a/src/app/app.css b/src/app/app.css index 6142069..629ce0e 100644 --- a/src/app/app.css +++ b/src/app/app.css @@ -74,4 +74,153 @@ .tooltip:hover .tooltiptext { visibility: visible; +} + +.overlay-loader { + display: inline-block; + width: 24px; + height: 24px; + position: relative; + top: 0; + left: -15px; + right: 0; + bottom: 0; +} +.overlay-loader .loader { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + margin: auto; + width: 62px; + height: 62px; + animation-name: rotateAnim; + -o-animation-name: rotateAnim; + -ms-animation-name: rotateAnim; + -webkit-animation-name: rotateAnim; + -moz-animation-name: rotateAnim; + animation-duration: 0.98s; + -o-animation-duration: 0.98s; + -ms-animation-duration: 0.98s; + -webkit-animation-duration: 0.98s; + -moz-animation-duration: 0.98s; + animation-iteration-count: infinite; + -o-animation-iteration-count: infinite; + -ms-animation-iteration-count: infinite; + -webkit-animation-iteration-count: infinite; + -moz-animation-iteration-count: infinite; + animation-timing-function: linear; + -o-animation-timing-function: linear; + -ms-animation-timing-function: linear; + -webkit-animation-timing-function: linear; + -moz-animation-timing-function: linear; +} +.overlay-loader .loader div { + width: 5px; + height: 5px; + border-radius: 50%; + border: 1px solid rgb(0,0,0); + position: absolute; + top: 1px; + left: 0; + right: 0; + bottom: 0; + margin: auto; +} +.overlay-loader .loader div:nth-child(odd) { + border-top: none; + border-left: none; +} +.overlay-loader .loader div:nth-child(even) { + border-bottom: none; + border-right: none; +} +.overlay-loader .loader div:nth-child(2) { + border-width: 1px; + left: 0px; + top: -2px; + width: 7px; + height: 7px; +} +.overlay-loader .loader div:nth-child(3) { + border-width: 1px; + left: -1px; + top: 2px; + width: 11px; + height: 11px; +} +.overlay-loader .loader div:nth-child(4) { + border-width: 2px; + left: -1px; + top: -2px; + width: 15px; + height: 15px; +} +.overlay-loader .loader div:nth-child(5) { + border-width: 2px; + left: -1px; + top: 2px; + width: 20px; + height: 20px; +} +.overlay-loader .loader div:nth-child(6) { + border-width: 2px; + left: 0px; + top: -2px; + width: 25px; + height: 25px; +} +.overlay-loader .loader div:nth-child(7) { + border-width: 2px; + left: 0px; + top: 4px; + width: 31px; + height: 31px; +} + + +@keyframes rotateAnim { + from { + transform: rotate(360deg); + } + to { + transform: rotate(0deg); + } +} + +@-o-keyframes rotateAnim { + from { + -o-transform: rotate(360deg); + } + to { + -o-transform: rotate(0deg); + } +} + +@-ms-keyframes rotateAnim { + from { + -ms-transform: rotate(360deg); + } + to { + -ms-transform: rotate(0deg); + } +} + +@-webkit-keyframes rotateAnim { + from { + -webkit-transform: rotate(360deg); + } + to { + -webkit-transform: rotate(0deg); + } +} + +@-moz-keyframes rotateAnim { + from { + -moz-transform: rotate(360deg); + } + to { + -moz-transform: rotate(0deg); + } } \ No newline at end of file diff --git a/src/app/torrent-page.js b/src/app/torrent-page.js index ae6b214..0064b15 100644 --- a/src/app/torrent-page.js +++ b/src/app/torrent-page.js @@ -4,11 +4,9 @@ import formatBytes from './format-bytes' import {List, ListItem} from 'material-ui/List'; import Subheader from 'material-ui/Subheader'; -import Divider from 'material-ui/Divider'; import {Tabs, Tab} from 'material-ui/Tabs'; import ActionInfo from 'material-ui/svg-icons/action/info'; import RaisedButton from 'material-ui/RaisedButton'; -import FontIcon from 'material-ui/FontIcon'; import FileFolder from 'material-ui/svg-icons/file/folder'; import NoImage from './images/no-image-icon.png' diff --git a/src/app/torrent.js b/src/app/torrent.js index 43105d5..ca86e2a 100644 --- a/src/app/torrent.js +++ b/src/app/torrent.js @@ -6,7 +6,6 @@ import Divider from 'material-ui/Divider'; import PagesPie from './pages-pie.js'; import TorrentPage from './torrent-page' -import Spinner24 from './images/spinner_24.gif' import LinearProgress from 'material-ui/LinearProgress'; let rating = require('./rating'); @@ -229,6 +228,7 @@ export default class Torrent extends Component { return (
{ const link = '/torrent/' + torrent.hash; if(e.button === 1) @@ -356,7 +356,17 @@ export default class Torrent extends Component { : this.state.askDownloading && !this.state.downloading ? - +
+
+
+
+
+
+
+
+
+
+
: this.state.askDownloading && this.state.downloading && diff --git a/src/background/api.js b/src/background/api.js index f5a5516..eb26f49 100644 --- a/src/background/api.js +++ b/src/background/api.js @@ -607,7 +607,8 @@ module.exports = async ({ received: bytes, downloaded: torrent.downloaded, speed: torrent.downloadSpeed, - progress: torrent.progress + progress: torrent.progress, + timeRemaining: torrent.timeRemaining }) }) })