ローディング edo_m18 Follow 2011-11-18 15:56:02 License: MIT License Fork137 Fav5 View5995 Play Stop Reload Fullscreen Smart Phone Fork tree Readme JavaScript 116 lines HTML 1 lines CSS 58 lines ローディング jQuery v1.6.2 /** * */ ;(function () { /** * @class Loading * create loading progress. */ var Loading = function () { this.init.apply(this, arguments); }; /** * Loading prototype */ Loading.prototype = { init: function (opt) { this.el = opt.el; this.opt = opt; this._initialize(); }, start: function () { var self = this, cnt = 0, tid = setInterval(function () { cnt++; self.set(cnt * 10); if (cnt >= 10) { clearInterval(tid); return; } }, 1000); }, set: function (per) { var i = 0; if (per < 1) { per = per * 100 << 0; } else { per = per << 0; } /** * set count of percent. */ this.count.text(per + '%'); /** * set loaded status. */ per = per / 10 << 0; for (; i < per; i++ ) { this.rings[per - 1].addClass('loaded'); } /** * when 100%, fire loaded method. */ if (per === 10) { this.loaded(); } }, loaded: function () { alert('Loaded!!'); }, _initialize: function () { /** * Create loaded parsent. */ var self = this, count = $('<div class="count" />').appendTo(this.el), /** * Create loaded ring */ rings = (function () { var i = 0, max = 10, ringCont, rings = []; ringCont = $('<div class="group-ring" />').appendTo(self.el); for (; i < max; i++) { rings.push($('<div class="unit-ring" />').appendTo(ringCont)); } return rings; }()); /** * export */ this.count = count; this.rings = rings; } }; $(function () { var loading = new Loading({ el: $('#container') }); loading.start(); }); }()); <div id="container"></div> ローディング body, div, p { margin: 0; padding: 0; } #container { position: absolute; left: 50%; top: 50%; margin-top: -35px; margin-left: -35px; width: 70px; height: 70px; } .count { position: absolute; top: 27px; left: 16px; width: 40px; font-size: 12px; color: #400; text-align: center; } .group-ring { position: absolute; top: 30px; left: 30px; } .unit-ring { position: absolute; width: 10px; height: 10px; border: dotted 1px #d2151b; border-radius: 5px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .unit-ring.loaded { border-width: 5px; } .unit-ring:nth-of-type(1) { -webkit-transform: rotate(0) translate(0, -30px); } .unit-ring:nth-of-type(2) { -webkit-transform: rotate(36deg) translate(0, -30px); } .unit-ring:nth-of-type(3) { -webkit-transform: rotate(72deg) translate(0, -30px); } .unit-ring:nth-of-type(4) { -webkit-transform: rotate(108deg) translate(0, -30px); } .unit-ring:nth-of-type(5) { -webkit-transform: rotate(144deg) translate(0, -30px); } .unit-ring:nth-of-type(6) { -webkit-transform: rotate(180deg) translate(0, -30px); } .unit-ring:nth-of-type(7) { -webkit-transform: rotate(216deg) translate(0, -30px); } .unit-ring:nth-of-type(8) { -webkit-transform: rotate(252deg) translate(0, -30px); } .unit-ring:nth-of-type(9) { -webkit-transform: rotate(288deg) translate(0, -30px); } .unit-ring:nth-of-type(10) { -webkit-transform: rotate(324deg) translate(0, -30px); } /** * */ ;(function () { /** * @class Loading * create loading progress. */ var Loading = function () { this.init.apply(this, arguments); }; /** * Loading prototype */ Loading.prototype = { init: function (opt) { this.el = opt.el; this.opt = opt; this._initialize(); }, start: function () { var self = this, cnt = 0, tid = setInterval(function () { cnt++; self.set(cnt * 10); if (cnt >= 10) { clearInterval(tid); return; } }, 1000); }, set: function (per) { var i = 0; if (per < 1) { per = per * 100 << 0; } else { per = per << 0; } /** * set count of percent. */ this.count.text(per + '%'); /** * set loaded status. */ per = per / 10 << 0; for (; i < per; i++ ) { this.rings[per - 1].addClass('loaded'); } /** * when 100%, fire loaded method. */ if (per === 10) { this.loaded(); } }, loaded: function () { alert('Loaded!!'); }, _initialize: function () { /** * Create loaded parsent. */ var self = this, count = $('<div class="count" />').appendTo(this.el), /** * Create loaded ring */ rings = (function () { var i = 0, max = 10, ringCont, rings = []; ringCont = $('<div class="group-ring" />').appendTo(self.el); for (; i < max; i++) { rings.push($('<div class="unit-ring" />').appendTo(ringCont)); } return rings; }()); /** * export */ this.count = count; this.rings = rings; } }; $(function () { var loading = new Loading({ el: $('#container') }); loading.start(); }); }()); <div id="container"></div> body, div, p { margin: 0; padding: 0; } #container { position: absolute; left: 50%; top: 50%; margin-top: -35px; margin-left: -35px; width: 70px; height: 70px; } .count { position: absolute; top: 27px; left: 16px; width: 40px; font-size: 12px; color: #400; text-align: center; } .group-ring { position: absolute; top: 30px; left: 30px; } .unit-ring { position: absolute; width: 10px; height: 10px; border: dotted 1px #d2151b; border-radius: 5px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .unit-ring.loaded { border-width: 5px; } .unit-ring:nth-of-type(1) { -webkit-transform: rotate(0) translate(0, -30px); } .unit-ring:nth-of-type(2) { -webkit-transform: rotate(36deg) translate(0, -30px); } .unit-ring:nth-of-type(3) { -webkit-transform: rotate(72deg) translate(0, -30px); } .unit-ring:nth-of-type(4) { -webkit-transform: rotate(108deg) translate(0, -30px); } .unit-ring:nth-of-type(5) { -webkit-transform: rotate(144deg) translate(0, -30px); } .unit-ring:nth-of-type(6) { -webkit-transform: rotate(180deg) translate(0, -30px); } .unit-ring:nth-of-type(7) { -webkit-transform: rotate(216deg) translate(0, -30px); } .unit-ring:nth-of-type(8) { -webkit-transform: rotate(252deg) translate(0, -30px); } .unit-ring:nth-of-type(9) { -webkit-transform: rotate(288deg) translate(0, -30px); } .unit-ring:nth-of-type(10) { -webkit-transform: rotate(324deg) translate(0, -30px); } use an iframe compat browser, deer Play on jsdo.it games Share Embed QR Tag Download Complete! Description どんなゲームですか？ Control Device スマートフォンコントローラー jsdo.it WebSocket Controller» マウス キーボード タッチデバイス Fullscreen 有効 無効 jsdo.it games から削除する Submit http://jsdo.it/edo_m18/xMVY ローディング Tweet style Design view Code view code <script type="text/javascript" src="http://jsdo.it/blogparts/xMVY/js?view=design"></script><p class="ttlBpJsdoit" style="width: 465px; margin: 0; text-align: right; font-size: 11px;"><a href="http://jsdo.it/edo_m18/xMVY" title="ローディング">ローディング - jsdo.it - share JavaScript, HTML5 and CSS</a></p> Tweet twitter Tags art&design css Favorite by chicism negic kleinschmidt.. ksk1015 tomonari.fuj..: 333 Forked sort new page view favorite forked forked: ローディング 111eeerrr 00 18views 117/1/58 forked: ローディング Hooker.Kuzya.. 00 17views 117/1/58 坊主 forked: ローディング tomac 00 72views 156/1/28 loading ルービッ〇: ローディング The_Lus 00 271views 192/1/547 1 2 3 4 5 6 7 8 9 10NEXT>>
