`
chennanfei
  • 浏览: 40927 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

Loading bar made in Canvas

阅读更多

 

<!DOCTYPE HTML>  
<html>  
<head>  
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="keywords" content="Amazon" /><meta name="description" content="Amazon.com" /><meta name="apple-touch-fullscreen" content="YES" />
    <meta name="viewport" content="format-detection=no,initial-scale=1.0,maximum-scale=1.0,user-scalable=0,width=device-width" />
    <title>Happy shopping</title>
    <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
    <style>
        .bd-rd-sw {border-radius: 6px; box-shadow: 0 1px 3px rgba(34, 25, 25, 0.4);}
        .hidden {display: none;}  
        .loading {background-color: #DFDFDF; padding: 20px; position: fixed; left: 50%; top: 20%; z-index: 999;}  
        .overlay {background-color: #DFDFDF; height: 100%; opacity: 0.6; position: absolute; width:100%;}
    </style>
</head>  
<body> 
    <script type="text/javascript">
    var UI = (function() {
        function ProgressWidget(canvasId) {
            var CIRCLE_COUNT = 5;  
            var CIRCLE_OFFSET = 10;  
            var CIRCLE_RADIUS = 5;  
            var CIRCLE_LINE = 1;
            var COLOR_NORMAL = '#FFFFFF';
            var COLOR_SELECTED = '#5995BF';
            var DOUBLE_PI = Math.PI * 2;
            var INTERVAL_TIME = 300;
            var LINE_WIDTH = 1;
            var START_POINT = {x: 10, y: 15};
            
            // create DOM objects
            var front = $("#loading");  
            if (front.length == 0) {
                front = $("<div class='loading bd-sw hidden' id='loading'></div>");
                $("body").append(front);
            }
            
            var canvas = $("#progressCanvas");
            if (canvas.length == 0) {
                canvas = $("<canvas id='progressCanvas' width='150' height='30'></canvas>");
                front.append(canvas);
                
                var w = front.width() / 2;
                front.css('margin-left', -1 * w);
            }
            
            var _count = 0;
            var _drawContext = null;
            var _drawArea = document.getElementById('progressCanvas');
            if (_drawArea && _drawArea.getContext) { 
                _drawContext = _drawArea.getContext('2d');
            }
            var _task = null;
            
            function draw() {
                _drawContext.clearRect(0, 0, _drawArea.clientWidth, _drawArea.clientHeight);
                _drawContext.lineWidth = 1;
          
                var vx = START_POINT.x, vy = START_POINT.y;
                var radius = CIRCLE_RADIUS;
                var c = _count % CIRCLE_COUNT;
                  
                for (var j = 0; j < CIRCLE_COUNT; j++) {
                    _drawContext.fillStyle = j == c ? COLOR_SELECTED : COLOR_NORMAL;
          
                    _drawContext.beginPath();
                    _drawContext.arc(vx, vy, radius, 0, DOUBLE_PI, true);
                    _drawContext.fill();
                    _drawContext.closePath();
          
                    radius += 2;
                    vx += CIRCLE_OFFSET + radius * 2;
                }
                  
                _count++;
            }

            this.hide = function() {
                front.fadeOut();

                if (_task != null) {
                    clearInterval(_task);
                    _task == null;
                }
            };
            
            this.isRunning = function() {
                return front.is(':visible');
            };
            
            this.show = function(message) {
                if (_drawContext == null) {
                    return;
                }

                _task = setInterval(draw, INTERVAL_TIME);
                front.show();
            };            
        } // Object - ProgressWidget
          
        return {  
            'getLoadingWidget': function() { return new ProgressWidget(); }
        };  
    })();
   
      
    var loading = UI.getLoadingWidget();
    loading.show();
    </script>  
</body>  
</html>
分享到：
类似Pinterest的瀑布流布局
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics