├── loading.zip ├── images └── MA4poJbQzw1.gif ├── .gitattributes ├── .sass-cache ├── 343b6d73ce38ad5e4d3e435774b318f8db39113b │ ├── print.scssc │ ├── loading.scssc │ ├── ie.scssc │ └── screen.scssc ├── 595fac6b687c9031debfb4ea4c8b3511cc17aba3 │ └── _hacks.scssc ├── 3746710bfe7e0b2975954c3a0118ba047eb1860b │ ├── _columns.scssc │ ├── _filter.scssc │ ├── _flexbox.scssc │ ├── _images.scssc │ ├── _opacity.scssc │ ├── _regions.scssc │ ├── _animation.scssc │ ├── _box-shadow.scssc │ ├── _box-sizing.scssc │ ├── _font-face.scssc │ ├── _transform.scssc │ ├── _transition.scssc │ ├── _border-radius.scssc │ ├── _hyphenation.scssc │ ├── _inline-block.scssc │ ├── _text-shadow.scssc │ ├── _background-clip.scssc │ ├── _background-size.scssc │ ├── _user-interface.scssc │ ├── _background-origin.scssc │ ├── _deprecated-support.scssc │ └── _appearance.scssc ├── 8f94eb898a9783786c406a84806e4fc94c68aa1c │ └── _ellipsis.scssc ├── b4dc5ef3282a087fe58bacd7d9b56433752b3ac9 │ ├── _support.scssc │ ├── _reset.scssc │ ├── _layout.scssc │ └── _css3.scssc ├── 3aa8e0230493eb6fd1c3680539c42b9bb329e1c6 │ ├── _stretching.scssc │ ├── _sticky-footer.scssc │ └── _grid-background.scssc ├── f20dab5b7fb1216f35d8484ebb92bc8dca57139a │ └── _utilities.scssc ├── 79db1df0af0471c2664c612e8a6fdc3832f23fae │ └── _link-colors.scssc └── 75fcaf1b4852ceb732871195e41567cc2a7d8997 │ └── C%058 │ └── Ruby22-x64 │ └── lib │ └── ruby │ └── gems │ └── 2.2.0 │ └── gems │ └── compass-core-1.0.3 │ └── stylesheets │ └── compass │ ├── _css3.scssc │ ├── _reset.scssc │ ├── _layout.scssc │ ├── _support.scssc │ ├── css3 │ ├── _images.scssc │ └── _background-size.scssc │ └── typography │ ├── text │ └── _ellipsis.scssc │ └── links │ └── _link-colors.scssc ├── css ├── print.css ├── ie.css └── loading.css ├── sass ├── print.scss ├── ie.scss └── loading.scss ├── config.rb ├── README.md ├── js └── loading.js └── index.html /loading.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/loading/master/loading.zip -------------------------------------------------------------------------------- /images/MA4poJbQzw1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/loading/master/images/MA4poJbQzw1.gif -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | *.js linguist-language=javascript 2 | *.css linguist-language=javascript 3 | *.html linguist-language=javascript 4 | -------------------------------------------------------------------------------- /.sass-cache/343b6d73ce38ad5e4d3e435774b318f8db39113b/print.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/loading/master/.sass-cache/343b6d73ce38ad5e4d3e435774b318f8db39113b/print.scssc -------------------------------------------------------------------------------- /.sass-cache/595fac6b687c9031debfb4ea4c8b3511cc17aba3/_hacks.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/loading/master/.sass-cache/595fac6b687c9031debfb4ea4c8b3511cc17aba3/_hacks.scssc -------------------------------------------------------------------------------- /.sass-cache/343b6d73ce38ad5e4d3e435774b318f8db39113b/loading.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/loading/master/.sass-cache/343b6d73ce38ad5e4d3e435774b318f8db39113b/loading.scssc -------------------------------------------------------------------------------- /.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_columns.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/loading/master/.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_columns.scssc -------------------------------------------------------------------------------- /.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_filter.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/loading/master/.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_filter.scssc -------------------------------------------------------------------------------- /.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_flexbox.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/loading/master/.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_flexbox.scssc -------------------------------------------------------------------------------- /.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_images.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/loading/master/.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_images.scssc -------------------------------------------------------------------------------- /.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_opacity.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/loading/master/.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_opacity.scssc -------------------------------------------------------------------------------- /.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_regions.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/loading/master/.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_regions.scssc -------------------------------------------------------------------------------- /.sass-cache/8f94eb898a9783786c406a84806e4fc94c68aa1c/_ellipsis.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/loading/master/.sass-cache/8f94eb898a9783786c406a84806e4fc94c68aa1c/_ellipsis.scssc -------------------------------------------------------------------------------- /.sass-cache/b4dc5ef3282a087fe58bacd7d9b56433752b3ac9/_support.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/loading/master/.sass-cache/b4dc5ef3282a087fe58bacd7d9b56433752b3ac9/_support.scssc -------------------------------------------------------------------------------- /.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_animation.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/loading/master/.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_animation.scssc -------------------------------------------------------------------------------- /.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_box-shadow.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/loading/master/.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_box-shadow.scssc -------------------------------------------------------------------------------- /.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_box-sizing.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/loading/master/.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_box-sizing.scssc -------------------------------------------------------------------------------- /.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_font-face.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/loading/master/.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_font-face.scssc -------------------------------------------------------------------------------- /.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_transform.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/loading/master/.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_transform.scssc -------------------------------------------------------------------------------- /.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_transition.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/loading/master/.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_transition.scssc -------------------------------------------------------------------------------- /.sass-cache/3aa8e0230493eb6fd1c3680539c42b9bb329e1c6/_stretching.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/loading/master/.sass-cache/3aa8e0230493eb6fd1c3680539c42b9bb329e1c6/_stretching.scssc -------------------------------------------------------------------------------- /.sass-cache/f20dab5b7fb1216f35d8484ebb92bc8dca57139a/_utilities.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/loading/master/.sass-cache/f20dab5b7fb1216f35d8484ebb92bc8dca57139a/_utilities.scssc -------------------------------------------------------------------------------- /.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_border-radius.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/loading/master/.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_border-radius.scssc -------------------------------------------------------------------------------- /.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_hyphenation.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/loading/master/.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_hyphenation.scssc -------------------------------------------------------------------------------- /.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_inline-block.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/loading/master/.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_inline-block.scssc -------------------------------------------------------------------------------- /.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_text-shadow.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/loading/master/.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_text-shadow.scssc -------------------------------------------------------------------------------- /.sass-cache/3aa8e0230493eb6fd1c3680539c42b9bb329e1c6/_sticky-footer.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/loading/master/.sass-cache/3aa8e0230493eb6fd1c3680539c42b9bb329e1c6/_sticky-footer.scssc -------------------------------------------------------------------------------- /.sass-cache/79db1df0af0471c2664c612e8a6fdc3832f23fae/_link-colors.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/loading/master/.sass-cache/79db1df0af0471c2664c612e8a6fdc3832f23fae/_link-colors.scssc -------------------------------------------------------------------------------- /.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_background-clip.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/loading/master/.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_background-clip.scssc -------------------------------------------------------------------------------- /.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_background-size.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/loading/master/.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_background-size.scssc -------------------------------------------------------------------------------- /.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_user-interface.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/loading/master/.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_user-interface.scssc -------------------------------------------------------------------------------- /.sass-cache/3aa8e0230493eb6fd1c3680539c42b9bb329e1c6/_grid-background.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/loading/master/.sass-cache/3aa8e0230493eb6fd1c3680539c42b9bb329e1c6/_grid-background.scssc -------------------------------------------------------------------------------- /.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_background-origin.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/loading/master/.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_background-origin.scssc -------------------------------------------------------------------------------- /.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_deprecated-support.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/loading/master/.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_deprecated-support.scssc -------------------------------------------------------------------------------- /css/print.css: -------------------------------------------------------------------------------- 1 | /* Welcome to Compass. Use this file to define print styles. 2 | * Import this file using the following HTML or equivalent: 3 | * */ 4 | -------------------------------------------------------------------------------- /sass/print.scss: -------------------------------------------------------------------------------- 1 | /* Welcome to Compass. Use this file to define print styles. 2 | * Import this file using the following HTML or equivalent: 3 | * */ 4 | -------------------------------------------------------------------------------- /css/ie.css: -------------------------------------------------------------------------------- 1 | /* Welcome to Compass. Use this file to write IE specific override styles. 2 | * Import this file using the following HTML or equivalent: 3 | * */ 6 | -------------------------------------------------------------------------------- /sass/ie.scss: -------------------------------------------------------------------------------- 1 | /* Welcome to Compass. Use this file to write IE specific override styles. 2 | * Import this file using the following HTML or equivalent: 3 | * */ 6 | -------------------------------------------------------------------------------- /.sass-cache/75fcaf1b4852ceb732871195e41567cc2a7d8997/C%058/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets/compass/_css3.scssc: -------------------------------------------------------------------------------- 1 | 3.4.22 (Selective Steve) 2 | da39a3ee5e6b4b0d3255bfef95601890afd80709 3 | o:Sass::Tree::RootNode :@children[:@filename0: @options{:@templateI":ET: 4 | @linei:@source_rangeo:Sass::Source::Range :@start_poso:Sass::Source::Position; i: @offseti: @end_poso;; i;i: 5 | @fileI"l(NOT IMPORTED) C:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets/compass/_css3.scss; 6 | T:@importere:"Compass::ImportOnce::Importero: Sass::Importers::Filesystem: 7 | @rootI"JC:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets; 8 | T:@real_rootI"JC:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets; 9 | T:@same_name_warningso:Set: 10 | @hash{ -------------------------------------------------------------------------------- /.sass-cache/75fcaf1b4852ceb732871195e41567cc2a7d8997/C%058/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets/compass/_reset.scssc: -------------------------------------------------------------------------------- 1 | 3.4.22 (Selective Steve) 2 | da39a3ee5e6b4b0d3255bfef95601890afd80709 3 | o:Sass::Tree::RootNode :@children[:@filename0: @options{:@templateI":ET: 4 | @linei:@source_rangeo:Sass::Source::Range :@start_poso:Sass::Source::Position; i: @offseti: @end_poso;; i;i: 5 | @fileI"m(NOT IMPORTED) C:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets/compass/_reset.scss; 6 | T:@importere:"Compass::ImportOnce::Importero: Sass::Importers::Filesystem: 7 | @rootI"JC:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets; 8 | T:@real_rootI"JC:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets; 9 | T:@same_name_warningso:Set: 10 | @hash{ -------------------------------------------------------------------------------- /.sass-cache/75fcaf1b4852ceb732871195e41567cc2a7d8997/C%058/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets/compass/_layout.scssc: -------------------------------------------------------------------------------- 1 | 3.4.22 (Selective Steve) 2 | da39a3ee5e6b4b0d3255bfef95601890afd80709 3 | o:Sass::Tree::RootNode :@children[:@filename0: @options{:@templateI":ET: 4 | @linei:@source_rangeo:Sass::Source::Range :@start_poso:Sass::Source::Position; i: @offseti: @end_poso;; i;i: 5 | @fileI"n(NOT IMPORTED) C:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets/compass/_layout.scss; 6 | T:@importere:"Compass::ImportOnce::Importero: Sass::Importers::Filesystem: 7 | @rootI"JC:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets; 8 | T:@real_rootI"JC:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets; 9 | T:@same_name_warningso:Set: 10 | @hash{ -------------------------------------------------------------------------------- /.sass-cache/75fcaf1b4852ceb732871195e41567cc2a7d8997/C%058/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets/compass/_support.scssc: -------------------------------------------------------------------------------- 1 | 3.4.22 (Selective Steve) 2 | da39a3ee5e6b4b0d3255bfef95601890afd80709 3 | o:Sass::Tree::RootNode :@children[:@filename0: @options{:@templateI":ET: 4 | @linei:@source_rangeo:Sass::Source::Range :@start_poso:Sass::Source::Position; i: @offseti: @end_poso;; i;i: 5 | @fileI"o(NOT IMPORTED) C:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets/compass/_support.scss; 6 | T:@importere:"Compass::ImportOnce::Importero: Sass::Importers::Filesystem: 7 | @rootI"JC:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets; 8 | T:@real_rootI"JC:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets; 9 | T:@same_name_warningso:Set: 10 | @hash{ -------------------------------------------------------------------------------- /.sass-cache/75fcaf1b4852ceb732871195e41567cc2a7d8997/C%058/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets/compass/css3/_images.scssc: -------------------------------------------------------------------------------- 1 | 3.4.22 (Selective Steve) 2 | da39a3ee5e6b4b0d3255bfef95601890afd80709 3 | o:Sass::Tree::RootNode :@children[:@filename0: @options{:@templateI":ET: 4 | @linei:@source_rangeo:Sass::Source::Range :@start_poso:Sass::Source::Position; i: @offseti: @end_poso;; i;i: 5 | @fileI"s(NOT IMPORTED) C:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets/compass/css3/_images.scss; 6 | T:@importere:"Compass::ImportOnce::Importero: Sass::Importers::Filesystem: 7 | @rootI"JC:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets; 8 | T:@real_rootI"JC:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets; 9 | T:@same_name_warningso:Set: 10 | @hash{ -------------------------------------------------------------------------------- /.sass-cache/75fcaf1b4852ceb732871195e41567cc2a7d8997/C%058/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets/compass/css3/_background-size.scssc: -------------------------------------------------------------------------------- 1 | 3.4.22 (Selective Steve) 2 | da39a3ee5e6b4b0d3255bfef95601890afd80709 3 | o:Sass::Tree::RootNode :@children[:@filename0: @options{:@templateI":ET: 4 | @linei:@source_rangeo:Sass::Source::Range :@start_poso:Sass::Source::Position; i: @offseti: @end_poso;; i;i: 5 | @fileI"|(NOT IMPORTED) C:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets/compass/css3/_background-size.scss; 6 | T:@importere:"Compass::ImportOnce::Importero: Sass::Importers::Filesystem: 7 | @rootI"JC:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets; 8 | T:@real_rootI"JC:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets; 9 | T:@same_name_warningso:Set: 10 | @hash{ -------------------------------------------------------------------------------- /.sass-cache/75fcaf1b4852ceb732871195e41567cc2a7d8997/C%058/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets/compass/typography/text/_ellipsis.scssc: -------------------------------------------------------------------------------- 1 | 3.4.22 (Selective Steve) 2 | da39a3ee5e6b4b0d3255bfef95601890afd80709 3 | o:Sass::Tree::RootNode :@children[:@filename0: @options{:@templateI":ET: 4 | @linei:@source_rangeo:Sass::Source::Range :@start_poso:Sass::Source::Position; i: @offseti: @end_poso;; i;i: 5 | @fileI"{(NOT IMPORTED) C:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets/compass/typography/text/_ellipsis.scss; 6 | T:@importere:"Compass::ImportOnce::Importero: Sass::Importers::Filesystem: 7 | @rootI"JC:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets; 8 | T:@real_rootI"JC:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets; 9 | T:@same_name_warningso:Set: 10 | @hash{ -------------------------------------------------------------------------------- /.sass-cache/75fcaf1b4852ceb732871195e41567cc2a7d8997/C%058/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets/compass/typography/links/_link-colors.scssc: -------------------------------------------------------------------------------- 1 | 3.4.22 (Selective Steve) 2 | da39a3ee5e6b4b0d3255bfef95601890afd80709 3 | o:Sass::Tree::RootNode :@children[:@filename0: @options{:@templateI":ET: 4 | @linei:@source_rangeo:Sass::Source::Range :@start_poso:Sass::Source::Position; i: @offseti: @end_poso;; i;i: 5 | @fileI"(NOT IMPORTED) C:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets/compass/typography/links/_link-colors.scss; 6 | T:@importere:"Compass::ImportOnce::Importero: Sass::Importers::Filesystem: 7 | @rootI"JC:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets; 8 | T:@real_rootI"JC:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets; 9 | T:@same_name_warningso:Set: 10 | @hash{ -------------------------------------------------------------------------------- /config.rb: -------------------------------------------------------------------------------- 1 | require 'compass/import-once/activate' 2 | # Require any additional compass plugins here. 3 | 4 | # Set this to the root of your project when deployed: 5 | http_path = "/" 6 | css_dir = "css" 7 | sass_dir = "sass" 8 | images_dir = "images" 9 | javascripts_dir = "js" 10 | 11 | # You can select your preferred output style here (can be overridden via the command line): 12 | # output_style = :expanded or :nested or :compact or :compressed 13 | 14 | # To enable relative paths to assets via compass helper functions. Uncomment: 15 | # relative_assets = true 16 | 17 | # To disable debugging comments that display the original location of your selectors. Uncomment: 18 | # line_comments = false 19 | 20 | 21 | # If you prefer the indented syntax, you might want to regenerate this 22 | # project again passing --syntax sass, or you can uncomment this: 23 | # preferred_syntax = :sass 24 | # and then run: 25 | # sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass 26 | -------------------------------------------------------------------------------- /.sass-cache/b4dc5ef3282a087fe58bacd7d9b56433752b3ac9/_reset.scssc: -------------------------------------------------------------------------------- 1 | 3.4.22 (Selective Steve) 2 | df78759f0fe6b88a633d20d26581ca4cdb829111 3 | o:Sass::Tree::RootNode :@children[o:Sass::Tree::ImportNode :@imported_filenameI"reset/utilities:ET;[:@filename0: @options{:@template0:@source_rangeo:Sass::Source::Range :@start_poso:Sass::Source::Position: 4 | @linei: @offseti: @end_poso;;i;i: 5 | @fileI"^C:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets/compass/_reset.scss; T:@importere:"Compass::ImportOnce::Importero: Sass::Importers::Filesystem: 6 | @rootI"JC:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets; T:@real_rootI"JC:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets; T:@same_name_warningso:Set: 7 | @hash{;i:@imported_file0o:Sass::Tree::MixinNode: 8 | @nameI"global-reset; T: 9 | @args[:@keywords{: @splat0:@kwarg_splat0;[; 10 | 0; @ 11 | ;i; o; ;o;;i;i;o;;i;i;@;@; 12 | 0; @ 13 | ; I"8@import "reset/utilities"; 14 | 15 | @include global-reset; 16 | ; T:@has_childrenT;i; o; ;o;;i;i;o;;i;i;@;@ -------------------------------------------------------------------------------- /.sass-cache/b4dc5ef3282a087fe58bacd7d9b56433752b3ac9/_layout.scssc: -------------------------------------------------------------------------------- 1 | 3.4.22 (Selective Steve) 2 | bbe8b1b9b6592e6ce6a7294fd0249c75049d3024 3 | o:Sass::Tree::RootNode :@children[o:Sass::Tree::ImportNode :@imported_filenameI"layout/grid-background:ET;[:@filename0: @options{:@template0: 4 | @linei:@source_rangeo:Sass::Source::Range :@start_poso:Sass::Source::Position; i: @offseti: @end_poso;; i;i&: 5 | @fileI"_C:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets/compass/_layout.scss; T:@importere:"Compass::ImportOnce::Importero: Sass::Importers::Filesystem: 6 | @rootI"JC:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets; T:@real_rootI"JC:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets; T:@same_name_warningso:Set: 7 | @hash{:@imported_file0o; ;I"layout/sticky-footer; T;[; 8 | 0; @ 9 | ; 0; i;o; ;o;; i;i;o;; i;i$;@;@;0o; ;I"layout/stretching; T;[; 10 | 0; @ 11 | ; 0; i;o; ;o;; i;i;o;; i;i!;@;@;0; 12 | 0; @ 13 | ; I"d@import "layout/grid-background"; 14 | @import "layout/sticky-footer"; 15 | @import "layout/stretching"; 16 | ; T:@has_childrenT; i;o; ;o;; i;i;o;; i;i;@;@ -------------------------------------------------------------------------------- /.sass-cache/343b6d73ce38ad5e4d3e435774b318f8db39113b/ie.scssc: -------------------------------------------------------------------------------- 1 | 3.4.22 (Selective Steve) 2 | 55d03cbe8dc4482082815585822d80503557fdcb 3 | o:Sass::Tree::RootNode :@children[o:Sass::Tree::CommentNode : @value[I"/* Welcome to Compass. Use this file to write IE specific override styles. 4 | * Import this file using the following HTML or equivalent: 5 | * */:ET: 8 | @type: normal;[:@filename0: @options{: 9 | @linei:@source_rangeo:Sass::Source::Range :@start_poso:Sass::Source::Position;i: @offseti: @end_poso;;i 10 | ;i: 11 | @fileI"&E:/myProject/loading/sass/ie.scss: encoding"GBK:@importere:"Compass::ImportOnce::Importero: Sass::Importers::Filesystem: 12 | @rootI"E:/myProject/loading; T:@real_rootI"E:/myProject/loading; T:@same_name_warningso:Set: 13 | @hash{; 0; @ :@templateI"/* Welcome to Compass. Use this file to write IE specific override styles. 14 | * Import this file using the following HTML or equivalent: 15 | * */ 18 | ; T:@has_childrenT;i;o; ;o;;i;i;o;;i;i;@;@ -------------------------------------------------------------------------------- /.sass-cache/343b6d73ce38ad5e4d3e435774b318f8db39113b/screen.scssc: -------------------------------------------------------------------------------- 1 | 3.4.22 (Selective Steve) 2 | e24c39d4800ce9f9b6b50e6a9d2d8c3fce9d548f 3 | o:Sass::Tree::RootNode :@children[o:Sass::Tree::CommentNode : @value[I" /* Welcome to Compass. 4 | * In this file you should write your main styles. (or centralize your imports) 5 | * Import this file using the following HTML or equivalent: 6 | * */:ET: 7 | @type: normal;[:@filename0: @options{: 8 | @linei:@source_rangeo:Sass::Source::Range :@start_poso:Sass::Source::Position;i: @offseti: @end_poso;;i ;io: 9 | @fileI"*E:/myProject/loading/sass/screen.scss: encoding"GBK:@importere:"Compass::ImportOnce::Importero: Sass::Importers::Filesystem: 10 | @rootI"E:/myProject/loading; T:@real_rootI"E:/myProject/loading; T:@same_name_warningso:Set: 11 | @hash{o:Sass::Tree::ImportNode :@imported_filenameI"compass/reset; T;[; 0; @ :@template0;o; ;o;;i ;i;o;;i ;i;@;@;i :@imported_file0; 0; @ ;!I"'/* Welcome to Compass. 12 | * In this file you should write your main styles. (or centralize your imports) 13 | * Import this file using the following HTML or equivalent: 14 | * */ 15 | 16 | @import "compass/reset"; 17 | ; T:@has_childrenT;i;o; ;o;;i;i;o;;i;i;@;@ -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ![](https://github.com/IFmiss/loading/blob/master/images/MA4poJbQzw1.gif) 2 | 3 | ![](https://img.shields.io/badge/IE-10%2B-orange.svg) 4 | 5 | # loading 6 | 一个兼容移动端pc以及ie10以上的loading插件 7 | 8 | 演示地址: http://www.daiwei.org/components/loading/ 9 | 10 | 11 | ### direction 12 | 方向，column纵向 row 横向 13 | ### animateIn 14 | 进入类型,这里不需要引用animatecss(因为个人觉得loading效果不需要太花哨,默认fadeInNoTransform,其他设置都不会有动画效果) 15 | ### title 16 | loading的title名称 为'' 则不显示 17 | ### titleColor 18 | title的文字颜色 19 | ### name 20 | loading的name名称 这算是唯一标识,重复的name的loading不会再生成,因此每次需要给一个name属性 21 | ### type 22 | loading显示的样式   是转动的小圆球 origin 还是图片 pic 23 | ### discription 24 | loading的描述  为'' 则不显示 25 | ### discColor 26 | loading的描述颜色 27 | ### loadingWidth 28 | 默认260 loading的宽度 29 | ### loadingBg 30 | 默认 'rgba(0, 0, 0, 0.6)' loading的背景色 31 | ### borderRadius 32 | 默认12 loading的圆角 33 | ### loadingMaskBg 34 | 默认 transparent loading的遮罩层背景色 35 | ### zIndex 36 | 默认 1000001 loading的层级 37 | 38 | #### 圆形旋转的loading样式  （origin） 39 | ### originDivWidth 40 | 默认 60 loading内部圆球区域的宽度 41 | ### originDivHeight 42 | 默认 60 loading内部圆球区域的高度 43 | ### originWidth 44 | 默认 8 小圆球的宽度 45 | ### originHeight 46 | 默认 8 小圆球的高度 47 | ### originBg 48 | 默认'#fefefe' 小圆球的背景色 49 | ### smallLoading 50 | 默认 false 是否显示更小一点的旋转小球效果 51 | 52 | #### 这是图片的样式   （pic） 53 | ### imgSrc 54 | 默认的图片地址 55 | ### imgDivWidth 56 | 默认 80 图片的宽度 57 | ### imgDivHeight 58 | 默认 80 图片的高度 59 | 60 | ### flexCenter 61 | 默认false, 是否用flex布局让loading-div垂直水平居中 62 | ### flexDirection 63 | 默认'row' row column flex的方向 横向 和 纵向 64 | ### mustRelative 65 | 默认false 调用loading的元素是否规定relative 66 | 67 | 68 | -------------------------------------------------------------------------------- /.sass-cache/b4dc5ef3282a087fe58bacd7d9b56433752b3ac9/_css3.scssc: -------------------------------------------------------------------------------- 1 | 3.4.22 (Selective Steve) 2 | ff2e5c1b784cd29f2321d28a68782dc7c9611f46 3 | o:Sass::Tree::RootNode :@children[o:Sass::Tree::ImportNode :@imported_filenameI"css3/border-radius:ET;[:@filename0: @options{:@template0: 4 | @linei:@source_rangeo:Sass::Source::Range :@start_poso:Sass::Source::Position; i: @offseti: @end_poso;; i;i": 5 | @fileI"]C:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets/compass/_css3.scss; T:@importere:"Compass::ImportOnce::Importero: Sass::Importers::Filesystem: 6 | @rootI"JC:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets; T:@real_rootI"JC:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets; T:@same_name_warningso:Set: 7 | @hash{:@imported_file0o; ;I"css3/inline-block; T;[; 8 | 0; @ 9 | ; 0; i;o; ;o;; i;i;o;; i;i!;@;@;0o; ;I"css3/opacity; T;[; 10 | 0; @ 11 | ; 0; i;o; ;o;; i;i;o;; i;i;@;@;0o; ;I"css3/box-shadow; T;[; 12 | 0; @ 13 | ; 0; i ;o; ;o;; i ;i;o;; i ;i;@;@;0o; ;I"css3/text-shadow; T;[; 14 | 0; @ 15 | ; 0; i 16 | ;o; ;o;; i 17 | ;i;o;; i 18 | ;i ;@;@;0o; ;I"css3/columns; T;[; 19 | 0; @ 20 | ; 0; i ;o; ;o;; i ;i;o;; i ;i;@;@;0o; ;I"css3/box-sizing; T;[; 21 | 0; @ 22 | ; 0; i ;o; ;o;; i ;i;o;; i ;i;@;@;0o; ;I"css3/flexbox; T;[; 23 | 0; @ 24 | ; 0; i ;o; ;o;; i ;i;o;; i ;i;@;@;0o; ;I"css3/images; T;[; 25 | 0; @ 26 | ; 0; i;o; ;o;; i;i;o;; i;i;@;@;0o; ;I"css3/background-clip; T;[; 27 | 0; @ 28 | ; 0; i;o; ;o;; i;i;o;; i;i$;@;@;0o; ;I"css3/background-origin; T;[; 29 | 0; @ 30 | ; 0; i;o; ;o;; i;i;o;; i;i&;@;@;0o; ;I"css3/background-size; T;[; 31 | 0; @ 32 | ; 0; i;o; ;o;; i;i;o;; i;i$;@;@;0o; ;I"css3/font-face; T;[; 33 | 0; @ 34 | ; 0; i;o; ;o;; i;i;o;; i;i;@;@;0o; ;I"css3/transform; T;[; 35 | 0; @ 36 | ; 0; i;o; ;o;; i;i;o;; i;i;@;@;0o; ;I"css3/transition; T;[; 37 | 0; @ 38 | ; 0; i;o; ;o;; i;i;o;; i;i;@;@;0o; ;I"css3/appearance; T;[; 39 | 0; @ 40 | ; 0; i;o; ;o;; i;i;o;; i;i;@;@;0o; ;I"css3/animation; T;[; 41 | 0; @ 42 | ; 0; i;o; ;o;; i;i;o;; i;i;@;@;0o; ;I"css3/regions; T;[; 43 | 0; @ 44 | ; 0; i;o; ;o;; i;i;o;; i;i;@;@;0o; ;I"css3/hyphenation; T;[; 45 | 0; @ 46 | ; 0; i;o; ;o;; i;i;o;; i;i ;@;@;0o; ;I"css3/filter; T;[; 47 | 0; @ 48 | ; 0; i;o; ;o;; i;i;o;; i;i;@;@;0o; ;I"css3/user-interface; T;[; 49 | 0; @ 50 | ; 0; i;o; ;o;; i;i;o;; i;i#;@;@;0; 51 | 0; @ 52 | ; I"<@import "css3/border-radius"; 53 | @import "css3/inline-block"; 54 | @import "css3/opacity"; 55 | @import "css3/box-shadow"; 56 | @import "css3/text-shadow"; 57 | @import "css3/columns"; 58 | @import "css3/box-sizing"; 59 | @import "css3/flexbox"; 60 | @import "css3/images"; 61 | @import "css3/background-clip"; 62 | @import "css3/background-origin"; 63 | @import "css3/background-size"; 64 | @import "css3/font-face"; 65 | @import "css3/transform"; 66 | @import "css3/transition"; 67 | @import "css3/appearance"; 68 | @import "css3/animation"; 69 | @import "css3/regions"; 70 | @import "css3/hyphenation"; 71 | @import "css3/filter"; 72 | @import "css3/user-interface"; 73 | ; T:@has_childrenT; i;o; ;o;; i;i;o;; i;i;@;@ -------------------------------------------------------------------------------- /.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_appearance.scssc: -------------------------------------------------------------------------------- 1 | 3.4.22 (Selective Steve) 2 | 8c228e867e069d1b52ae586e30be356946cddfdf 3 | o:Sass::Tree::RootNode :@children[ o:Sass::Tree::CommentNode : @value[I"/* Appearance */:ET: 4 | @type: silent;[:@filename0: @options{: 5 | @linei:@source_rangeo:Sass::Source::Range :@start_poso:Sass::Source::Position;i: @offseti: @end_poso;;i;i: 6 | @fileI"hC:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets/compass/css3/_appearance.scss; T:@importere:"Compass::ImportOnce::Importero: Sass::Importers::Filesystem: 7 | @rootI"JC:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets; T:@real_rootI"JC:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets; T:@same_name_warningso:Set: 8 | @hash{o:Sass::Tree::ImportNode :@imported_filenameI"compass/support; T;[; 0; @ :@template0;i;o; ;o;;i;i;o;;i;i;@;@:@imported_file0o; ;[I"6/* Change the appearance for Mozilla, Webkit and possibly the future. 9 | * The appearance property is currently not present in any newer CSS specification. 10 | * 11 | * There is no official list of accepted values, but you might check these source: 12 | * 13 | * * [Mozilla](https://developer.mozilla.org/en/CSS/-moz-appearance) 14 | * * [Webkit](http://code.google.com/p/webkit-mirror/source/browse/Source/WebCore/css/CSSValueKeywords.in?spec=svnf1aea559dcd025a8946aa7da6e4e8306f5c1b604&r=63c7d1af44430b314233fea342c3ddb2a052e365) 15 | * (search for 'appearance' within the page) */; T; 16 | ; ;[; 0; @ ;i ;o; ;o;;i ;i;o;;i;i6;@;@o:Sass::Tree::MixinDefNode: 17 | @nameI"appearance; T: 18 | @args[[o:!Sass::Script::Tree::Variable ;#I"appearance; T:@underscored_nameI"appearance; T:@css_variable_warning0;i;o; ;o;;i;i;o;;i;i#;@;@; @; @ 0: @splat0;[ o; ;[I"7/* There is no caniuse tracking for appearance. */; T; 19 | ; ;[; 0; @ ;i;o; ;o;;i;i;o;;i;i7;@;@o:Sass::Tree::VariableNode;#I"appearance; T: 20 | @expro: Sass::Script::Tree::Funcall;#I" unquote; T;$[o;% ;#I"appearance; T;&I"appearance; T;'0;i;o; ;o;;i;i;o;;i;i(;@;@; @; @ :@keywordso:Sass::Util::NormalizedMap:@key_strings{: @map{;(0:@kwarg_splat0;'0;i;o; ;o;;i;i;o;;i;i);@;@; @; @ : @guarded0: @global0;[; 0; @ ;i;o; ;o;;i;i ;o;;i;i);@;@o:Sass::Tree::MixinNode;#I"with-prefix; T;$[o: Sass::Script::Tree::Literal 21 | ;o: Sass::Script::Value::String ;I" -moz; T; @ ; 22 | :identifier:"@deprecated_interp_equivalent0;i;o; ;o;;i;i;o;;i;i!;@;@;'0; @;,o;-;.{;/{;(0;00;[o:Sass::Tree::PropNode;#[I"-moz-appearance; T;o;% ;#I"appearance; T;&I"appearance; T;'0;i;o; ;o;;i;i<;o;;i;iG;@;@; @; @ : 23 | @tabsi:@prop_syntax:new;[; 0; @ ;i;o; ;o;;i;i+;o;;i;iG;@;@:@name_source_rangeo; ;@a;o;;i;i:;@;@:@value_source_rangeo; ;o;;i;i<;@b;@;@; 0; @ ;i;o; ;o;;i;i;o;;i;i&;@;@:@has_childrenTo;3;#I"with-prefix; T;$[o;4 24 | ;o;5 ;I" -webkit; T; @ ; 25 | ;6;70;i;o; ;o;;i;i;o;;i;i$;@;@;'0; @;,o;-;.{;/{;(0;00;[o;8;#[I"-webkit-appearance; T;o;% ;#I"appearance; T;&I"appearance; T;'0;i;o; ;o;;i;i<;o;;i;iG;@;@; @; @ ;9i;:;;;[; 0; @ ;i;o; ;o;;i;i(;o;;i;iG;@;@;T; 0; @ ;i;o; ;o;;i;i;o;;i;i%;@;@;>T; 0; @ ; I"b// Appearance 26 | @import "compass/support"; 27 | 28 | // Change the appearance for Mozilla, Webkit and possibly the future. 29 | // The appearance property is currently not present in any newer CSS specification. 30 | // 31 | // There is no official list of accepted values, but you might check these source: 32 | // 33 | // * [Mozilla](https://developer.mozilla.org/en/CSS/-moz-appearance) 34 | // * [Webkit](http://code.google.com/p/webkit-mirror/source/browse/Source/WebCore/css/CSSValueKeywords.in?spec=svnf1aea559dcd025a8946aa7da6e4e8306f5c1b604&r=63c7d1af44430b314233fea342c3ddb2a052e365) 35 | // (search for 'appearance' within the page) 36 | @mixin appearance($appearance) { 37 | // There is no caniuse tracking for appearance. 38 | $appearance: unquote($appearance); 39 | @include with-prefix(-moz) { -moz-appearance: $appearance; } 40 | @include with-prefix(-webkit) { -webkit-appearance: $appearance; } 41 | } 42 | ; T;>T;i;o; ;o;;i;i;o;;i;i;@;@ -------------------------------------------------------------------------------- /js/loading.js: -------------------------------------------------------------------------------- 1 | //未曾遗忘的青春 2 | //github https://github.com/IFmiss/loading 3 | //显示Loading 4 | (function($){ 5 | $.fn.loading = function(options){ 6 | var $this = $(this); 7 | var _this = this; 8 | return this.each(function(){ 9 | var loadingPosition =''; 10 | var defaultProp = { 11 | direction: 'column', //方向，column纵向 row 横向 12 | animateIn: 'fadeInNoTransform', //进入类型 13 | title: '请稍等...', //显示什么内容 14 | name: 'loadingName', //loading的data-name的属性值 用于删除loading需要的参数 15 | type: 'origin', //pic origin 16 | discription: '这是一个描述', //loading的描述 17 | titleColor: 'rgba(255,255,255,0.7)', //title文本颜色 18 | discColor: 'rgba(255,255,255,0.7)', //disc文本颜色 19 | loadingWidth: 260, //中间的背景宽度width 20 | loadingBg: 'rgba(0, 0, 0, 0.6)', //中间的背景色 21 | borderRadius: 12, //中间的背景色的borderRadius 22 | loadingMaskBg: 'transparent', //背景遮罩层颜色 23 | zIndex: 1000001, //层级 24 | 25 | // 这是圆形旋转的loading样式 26 | originDivWidth: 60, //loadingDiv的width 27 | originDivHeight: 60, //loadingDiv的Height 28 | 29 | originWidth: 8, //小圆点width 30 | originHeight: 8, //小圆点Height 31 | originBg: '#fefefe', //小圆点背景色 32 | smallLoading: false, //显示小的loading 33 | 34 | // 这是图片的样式 (pic) 35 | imgSrc: 'http://www.daiwei.org/index/images/logo/dw.png', //默认的图片地址 36 | imgDivWidth: 80, //imgDiv的width 37 | imgDivHeight: 80, //imgDiv的Height 38 | 39 | flexCenter: false, //是否用flex布局让loading-div垂直水平居中 40 | flexDirection: 'row', //row column flex的方向 横向 和 纵向 41 | mustRelative: false, //$this是否规定relative 42 | }; 43 | 44 | 45 | var opt = $.extend(defaultProp,options || {}); 46 | 47 | //根据用户是针对body还是元素 设置对应的定位方式 48 | if($this.selector == 'body'){ 49 | $('body,html').css({ 50 | overflow:'hidden', 51 | }); 52 | loadingPosition = 'fixed'; 53 | }else if(opt.mustRelative){ 54 | $this.css({ 55 | position:'relative', 56 | }); 57 | loadingPosition = 'absolute'; 58 | }else{ 59 | loadingPosition = 'absolute'; 60 | } 61 | 62 | defaultProp._showOriginLoading = function(){ 63 | var smallLoadingMargin = opt.smallLoading ? 0 : '-10px'; 64 | if(opt.direction == 'row'){smallLoadingMargin='-6px'} 65 | 66 | //悬浮层 67 | _this.cpt_loading_mask = $('
').css({ 68 | 'background':opt.loadingMaskBg, 69 | 'z-index':opt.zIndex, 70 | 'position':loadingPosition, 71 | }).appendTo($this); 72 | 73 | //中间的显示层 74 | _this.div_loading = $('
').css({ 75 | 'background':opt.loadingBg, 76 | 'width':opt.loadingWidth, 77 | 'height':opt.loadingHeight, 78 | '-webkit-border-radius':opt.borderRadius, 79 | '-moz-border-radius':opt.borderRadius, 80 | 'border-radius':opt.borderRadius, 81 | }).appendTo(_this.cpt_loading_mask); 82 | 83 | if(opt.flexCenter){ 84 | _this.div_loading.css({ 85 | "display": "-webkit-flex", 86 | "display": "flex", 87 | "-webkit-flex-direction":opt.flexDirection, 88 | "flex-direction":opt.flexDirection, 89 | "-webkit-align-items": "center", 90 | "align-items": "center", 91 | "-webkit-justify-content": "center", 92 | "justify-content":"center", 93 | }); 94 | } 95 | 96 | //loading标题 97 | _this.loading_title = $('

').css({ 98 | color:opt.titleColor, 99 | }).html(opt.title).appendTo(_this.div_loading); 100 | 101 | //loading中间的内容 可以是图片或者转动的小圆球 102 | _this.loading = $('
').css({ 103 | 'width':opt.originDivWidth, 104 | 'height':opt.originDivHeight, 105 | }).appendTo(_this.div_loading); 106 | 107 | //描述 108 | _this.loading_discription = $('

').css({ 109 | color:opt.discColor, 110 | }).html(opt.discription).appendTo(_this.div_loading); 111 | 112 | if(opt.type == 'origin'){ 113 | _this.loadingOrigin = $('
').appendTo(_this.loading); 114 | _this.loadingOrigin.children().css({ 115 | "margin-top":smallLoadingMargin, 116 | "margin-left":smallLoadingMargin, 117 | "width":opt.originWidth, 118 | "height":opt.originHeight, 119 | "background":opt.originBg, 120 | }); 121 | } 122 | 123 | if(opt.type == 'pic'){ 124 | _this.loadingPic = $('loading').appendTo(_this.loading); 125 | } 126 | 127 | 128 | //关闭事件冒泡 和默认的事件 129 | _this.cpt_loading_mask.on('touchstart touchend touchmove click',function(e){ 130 | e.stopPropagation(); 131 | e.preventDefault(); 132 | }); 133 | }; 134 | defaultProp._createLoading = function(){ 135 | //不能生成两个loading data-name 一样的loading 136 | if($(".cpt-loading-mask[data-name="+opt.name+"]").length > 0){ 137 | // console.error('loading mask cant has same date-name('+opt.name+'), you cant set "date-name" prop when you create it'); 138 | return 139 | } 140 | 141 | defaultProp._showOriginLoading(); 142 | }; 143 | defaultProp._createLoading(); 144 | }); 145 | } 146 | 147 | })(jQuery) 148 | 149 | //关闭Loading 150 | function removeLoading(loadingName){ 151 | var loadingName = loadingName || ''; 152 | $('body,html').css({ 153 | overflow:'auto', 154 | }); 155 | 156 | if(loadingName == ''){ 157 | $(".cpt-loading-mask").remove(); 158 | }else{ 159 | var name = loadingName || 'loadingName'; 160 | $(".cpt-loading-mask[data-name="+name+"]").remove(); 161 | } 162 | } -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | loading测试效果 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 39 | 40 | 41 |
42 |
默认效果
43 |
纵向文字颜色
44 |
纵向效果无title
45 |
纵向效果无title描述
46 |
其他背景色
47 |
纵向图片效果
48 |
横向图片效果
49 |
横向进度效果,字体颜色
50 |
无过渡效果
51 |
52 | 53 | 54 | 55 | 266 | -------------------------------------------------------------------------------- /sass/loading.scss: -------------------------------------------------------------------------------- 1 | /* Welcome to Compass. 2 | * In this file you should write your main styles. (or centralize your imports) 3 | * Import this file using the following HTML or equivalent: 4 | * */ 5 | 6 | @charset "utf-8"; 7 | @import "compass/reset"; 8 | @import "compass/css3"; 9 | @import "compass/layout"; 10 | @import "compass/typography/text/ellipsis"; 11 | @import "compass/typography/links/link-colors"; 12 | 13 | //这是Loading的自定义组件样式 14 | .cpt-loading-mask *{ 15 | @include box-sizing(border-box); 16 | } 17 | .cpt-loading-mask{ 18 | &.column{ 19 | width: 100%; 20 | height: 100%; 21 | position: fixed; 22 | top: 0; 23 | left: 0; 24 | bottom: 0; 25 | right: 0; 26 | background:transparent; 27 | z-index: 100; 28 | @include translateZ(0); 29 | @include user-select(none); 30 | 31 | .div-loading{ 32 | position:absolute; 33 | top:50%; 34 | left:50%; 35 | width: 260px; 36 | background:rgba(0,0,0,0.6); 37 | @include translate(-50%,-50%); 38 | @include translate3d(-50%,-50%,0); 39 | @include border-radius(12px); 40 | padding: 16px; 41 | 42 | .loading{ 43 | position: relative; 44 | width: 60px; 45 | height: 60px; 46 | background: transparent; 47 | margin: 0 auto; 48 | 49 | &.origin{ 50 | div{ 51 | width: 80%; 52 | height: 80%; 53 | position: absolute; 54 | left: 10%; 55 | top: 10%; 56 | @include opacity(1); 57 | @include animation(load 2.28s linear infinite); 58 | 59 | span{ 60 | display: inline-block; 61 | width: 8px; 62 | height: 8px; 63 | border-radius: 50%; 64 | background: #FBC9B9; 65 | position: absolute; 66 | left: 50%; 67 | margin-top: -10px; 68 | margin-left: -10px; 69 | 70 | } 71 | 72 | &:nth-child(1){ 73 | @include animation-delay(0.2s); 74 | } 75 | &:nth-child(2){ 76 | @include animation-delay(0.4s); 77 | } 78 | &:nth-child(3){ 79 | @include animation-delay(0.6s); 80 | } 81 | &:nth-child(4){ 82 | @include animation-delay(0.8s); 83 | } 84 | &:nth-child(5){ 85 | @include animation-delay(1s); 86 | } 87 | } 88 | } 89 | 90 | &.pic{ 91 | width: 80px; 92 | height: 80px; 93 | 94 | img{ 95 | width: 100%; 96 | height: 100%; 97 | } 98 | } 99 | } 100 | 101 | .loading-title{ 102 | width: 100%; 103 | text-align: center; 104 | color: #fff; 105 | padding: 2px 0; 106 | font-size: 16px; 107 | // margin: 15px 0; 108 | margin-bottom: 20px; 109 | @include ellipsis(); 110 | } 111 | 112 | .loading-discription{ 113 | width: 100%; 114 | text-align: center; 115 | color: #fff; 116 | font-size: 12px; 117 | // margin: 15px 0; 118 | margin-top:20px; 119 | } 120 | } 121 | } 122 | 123 | &.row{ 124 | width: 100%; 125 | height: 100%; 126 | position: fixed; 127 | top: 0; 128 | left: 0; 129 | bottom: 0; 130 | right: 0; 131 | background:transparent; 132 | z-index: 100; 133 | @include translateZ(0); 134 | @include user-select(none); 135 | 136 | .div-loading{ 137 | position:absolute; 138 | top:50%; 139 | left:50%; 140 | width: 260px; 141 | background:rgba(0,0,0,0.6); 142 | @include display-flex; 143 | @include align-items(center); 144 | @include justify-content(center); 145 | @include flex-direction(row-reverse); 146 | @include translate(-50%,-50%); 147 | @include translate3d(-50%,-50%,0); 148 | @include border-radius(12px); 149 | padding: 15px; 150 | 151 | .loading{ 152 | position: relative; 153 | width: 60px; 154 | height: 60px; 155 | background: transparent; 156 | // margin: 0 auto; 157 | float: left; 158 | 159 | &.origin{ 160 | div{ 161 | width: 80%; 162 | height: 80%; 163 | position: absolute; 164 | left: 10%; 165 | top: 10%; 166 | @include opacity(1); 167 | @include animation(load 2.28s linear infinite); 168 | 169 | span{ 170 | display: inline-block; 171 | width: 8px; 172 | height: 8px; 173 | border-radius: 50%; 174 | background: #FBC9B9; 175 | position: absolute; 176 | left: 50%; 177 | margin-top: -10px; 178 | margin-left: -10px; 179 | 180 | } 181 | 182 | &:nth-child(1){ 183 | @include animation-delay(0.2s); 184 | } 185 | &:nth-child(2){ 186 | @include animation-delay(0.4s); 187 | } 188 | &:nth-child(3){ 189 | @include animation-delay(0.6s); 190 | } 191 | &:nth-child(4){ 192 | @include animation-delay(0.8s); 193 | } 194 | &:nth-child(5){ 195 | @include animation-delay(1s); 196 | } 197 | } 198 | } 199 | 200 | &.pic{ 201 | width: 80px; 202 | height: 80px; 203 | 204 | img{ 205 | width: 100%; 206 | height: 100%; 207 | } 208 | } 209 | } 210 | 211 | .loading-title{ 212 | width: 72%; 213 | text-align: center; 214 | color: #fff; 215 | font-size: 16px; 216 | padding: 2px 0; 217 | padding-left: 20px; 218 | // margin: 15px 0; 219 | margin-bottom: 0; 220 | @include ellipsis(); 221 | } 222 | 223 | .loading-discription{ 224 | display: none; 225 | width: 100%; 226 | text-align: center; 227 | color: #fff; 228 | font-size: 12px; 229 | // margin: 15px 0; 230 | margin-top:20px; 231 | } 232 | } 233 | } 234 | } 235 | 236 | .animated { 237 | animation-duration: 0.5s; 238 | animation-fill-mode: both; 239 | } 240 | 241 | .animated.infinite { 242 | animation-iteration-count: infinite; 243 | } 244 | 245 | //***************************************fadeInNoTransform 246 | @-webkit-keyframes fadeInNoTransform{ 247 | 0%{opacity:0;} 248 | 100%{opacity:1;} 249 | } 250 | 251 | @keyframes fadeInNoTransform{ 252 | 0%{opacity:0;} 253 | 100%{opacity:1;} 254 | } 255 | 256 | .fadeInNoTransform{-webkit-animation-name:fadeInNoTransform;animation-name:fadeInNoTransform} 257 | 258 | //***************************************fadeOutNoTransform 259 | @-webkit-keyframes fadeOutNoTransform{ 260 | 0%{opacity:1;} 261 | 100%{opacity:0;} 262 | } 263 | 264 | @keyframes fadeOutNoTransform{ 265 | 0%{opacity:1;} 266 | 100%{opacity:0;} 267 | } 268 | 269 | .fadeOutNoTransform{-webkit-animation-name:fadeOutNoTransform;animation-name:fadeOutNoTransform} 270 | 271 | 272 | @-webkit-keyframes load{ 273 | 0%{ 274 | @include rotate(0deg); 275 | } 276 | 10%{ 277 | @include rotate(45deg); 278 | } 279 | 50%{ 280 | @include opacity(1); 281 | @include rotate(160deg); 282 | } 283 | 62%{ 284 | @include opacity(0); 285 | } 286 | 65%{ 287 | @include opacity(0); 288 | @include rotate(200deg); 289 | } 290 | 90%{ 291 | @include rotate(340deg); 292 | } 293 | 100%{ 294 | @include rotate(360deg); 295 | } 296 | } 297 | 298 | @-moz-keyframes load{ 299 | 0%{ 300 | @include rotate(0deg); 301 | } 302 | 10%{ 303 | @include rotate(45deg); 304 | } 305 | 50%{ 306 | @include opacity(1); 307 | @include rotate(160deg); 308 | } 309 | 62%{ 310 | @include opacity(0); 311 | } 312 | 65%{ 313 | @include opacity(0); 314 | @include rotate(200deg); 315 | } 316 | 90%{ 317 | @include rotate(340deg); 318 | } 319 | 100%{ 320 | @include rotate(360deg); 321 | } 322 | } 323 | 324 | @-ms-keyframes load{ 325 | 0%{ 326 | @include rotate(0deg); 327 | } 328 | 10%{ 329 | @include rotate(45deg); 330 | } 331 | 50%{ 332 | @include opacity(1); 333 | @include rotate(160deg); 334 | } 335 | 62%{ 336 | @include opacity(0); 337 | } 338 | 65%{ 339 | @include opacity(0); 340 | @include rotate(200deg); 341 | } 342 | 90%{ 343 | @include rotate(340deg); 344 | } 345 | 100%{ 346 | @include rotate(360deg); 347 | } 348 | } 349 | 350 | @-o-keyframes load{ 351 | 0%{ 352 | @include rotate(0deg); 353 | } 354 | 10%{ 355 | @include rotate(45deg); 356 | } 357 | 50%{ 358 | @include opacity(1); 359 | @include rotate(160deg); 360 | } 361 | 62%{ 362 | @include opacity(0); 363 | } 364 | 65%{ 365 | @include opacity(0); 366 | @include rotate(200deg); 367 | } 368 | 90%{ 369 | @include rotate(340deg); 370 | } 371 | 100%{ 372 | @include rotate(360deg); 373 | } 374 | } 375 | 376 | @keyframes load{ 377 | 0%{ 378 | @include rotate(0deg); 379 | } 380 | 10%{ 381 | @include rotate(45deg); 382 | } 383 | 50%{ 384 | @include opacity(1); 385 | @include rotate(160deg); 386 | } 387 | 62%{ 388 | @include opacity(0); 389 | } 390 | 65%{ 391 | @include opacity(0); 392 | @include rotate(200deg); 393 | } 394 | 90%{ 395 | @include rotate(340deg); 396 | } 397 | 100%{ 398 | @include rotate(360deg); 399 | } 400 | } 401 | -------------------------------------------------------------------------------- /css/loading.css: -------------------------------------------------------------------------------- 1 | /* Welcome to Compass. 2 | * In this file you should write your main styles. (or centralize your imports) 3 | * Import this file using the following HTML or equivalent: 4 | * */ 5 | /* line 5, C:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ 6 | html, body, div, span, applet, object, iframe, 7 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 8 | a, abbr, acronym, address, big, cite, code, 9 | del, dfn, em, img, ins, kbd, q, s, samp, 10 | small, strike, strong, sub, sup, tt, var, 11 | b, u, i, center, 12 | dl, dt, dd, ol, ul, li, 13 | fieldset, form, label, legend, 14 | table, caption, tbody, tfoot, thead, tr, th, td, 15 | article, aside, canvas, details, embed, 16 | figure, figcaption, footer, header, hgroup, 17 | menu, nav, output, ruby, section, summary, 18 | time, mark, audio, video { 19 | margin: 0; 20 | padding: 0; 21 | border: 0; 22 | font: inherit; 23 | font-size: 100%; 24 | vertical-align: baseline; 25 | } 26 | 27 | /* line 22, C:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ 28 | html { 29 | line-height: 1; 30 | } 31 | 32 | /* line 24, C:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ 33 | ol, ul { 34 | list-style: none; 35 | } 36 | 37 | /* line 26, C:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ 38 | table { 39 | border-collapse: collapse; 40 | border-spacing: 0; 41 | } 42 | 43 | /* line 28, C:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ 44 | caption, th, td { 45 | text-align: left; 46 | font-weight: normal; 47 | vertical-align: middle; 48 | } 49 | 50 | /* line 30, C:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ 51 | q, blockquote { 52 | quotes: none; 53 | } 54 | /* line 103, C:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ 55 | q:before, q:after, blockquote:before, blockquote:after { 56 | content: ""; 57 | content: none; 58 | } 59 | 60 | /* line 32, C:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ 61 | a img { 62 | border: none; 63 | } 64 | 65 | /* line 116, C:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ 66 | article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { 67 | display: block; 68 | } 69 | 70 | /* line 14, ../sass/loading.scss */ 71 | .cpt-loading-mask * { 72 | -moz-box-sizing: border-box; 73 | -webkit-box-sizing: border-box; 74 | box-sizing: border-box; 75 | } 76 | 77 | /* line 18, ../sass/loading.scss */ 78 | .cpt-loading-mask.column { 79 | width: 100%; 80 | height: 100%; 81 | position: fixed; 82 | top: 0; 83 | left: 0; 84 | bottom: 0; 85 | right: 0; 86 | background: transparent; 87 | z-index: 100; 88 | -moz-transform: translateZ(0); 89 | -webkit-transform: translateZ(0); 90 | transform: translateZ(0); 91 | -moz-user-select: -moz-none; 92 | -ms-user-select: none; 93 | -webkit-user-select: none; 94 | user-select: none; 95 | } 96 | /* line 31, ../sass/loading.scss */ 97 | .cpt-loading-mask.column .div-loading { 98 | position: absolute; 99 | top: 50%; 100 | left: 50%; 101 | width: 260px; 102 | background: rgba(0, 0, 0, 0.6); 103 | -moz-transform: translate(-50%, -50%); 104 | -ms-transform: translate(-50%, -50%); 105 | -webkit-transform: translate(-50%, -50%); 106 | transform: translate(-50%, -50%); 107 | -moz-transform: translate3d(-50%, -50%, 0); 108 | -webkit-transform: translate3d(-50%, -50%, 0); 109 | transform: translate3d(-50%, -50%, 0); 110 | -moz-border-radius: 12px; 111 | -webkit-border-radius: 12px; 112 | border-radius: 12px; 113 | padding: 16px; 114 | } 115 | /* line 42, ../sass/loading.scss */ 116 | .cpt-loading-mask.column .div-loading .loading { 117 | position: relative; 118 | width: 60px; 119 | height: 60px; 120 | background: transparent; 121 | margin: 0 auto; 122 | } 123 | /* line 50, ../sass/loading.scss */ 124 | .cpt-loading-mask.column .div-loading .loading.origin div { 125 | width: 80%; 126 | height: 80%; 127 | position: absolute; 128 | left: 10%; 129 | top: 10%; 130 | filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false); 131 | opacity: 1; 132 | -moz-animation: load 2.28s linear infinite; 133 | -webkit-animation: load 2.28s linear infinite; 134 | animation: load 2.28s linear infinite; 135 | } 136 | /* line 59, ../sass/loading.scss */ 137 | .cpt-loading-mask.column .div-loading .loading.origin div span { 138 | display: inline-block; 139 | width: 8px; 140 | height: 8px; 141 | border-radius: 50%; 142 | background: #FBC9B9; 143 | position: absolute; 144 | left: 50%; 145 | margin-top: -10px; 146 | margin-left: -10px; 147 | } 148 | /* line 72, ../sass/loading.scss */ 149 | .cpt-loading-mask.column .div-loading .loading.origin div:nth-child(1) { 150 | -moz-animation-delay: 0.2s; 151 | -webkit-animation-delay: 0.2s; 152 | animation-delay: 0.2s; 153 | } 154 | /* line 75, ../sass/loading.scss */ 155 | .cpt-loading-mask.column .div-loading .loading.origin div:nth-child(2) { 156 | -moz-animation-delay: 0.4s; 157 | -webkit-animation-delay: 0.4s; 158 | animation-delay: 0.4s; 159 | } 160 | /* line 78, ../sass/loading.scss */ 161 | .cpt-loading-mask.column .div-loading .loading.origin div:nth-child(3) { 162 | -moz-animation-delay: 0.6s; 163 | -webkit-animation-delay: 0.6s; 164 | animation-delay: 0.6s; 165 | } 166 | /* line 81, ../sass/loading.scss */ 167 | .cpt-loading-mask.column .div-loading .loading.origin div:nth-child(4) { 168 | -moz-animation-delay: 0.8s; 169 | -webkit-animation-delay: 0.8s; 170 | animation-delay: 0.8s; 171 | } 172 | /* line 84, ../sass/loading.scss */ 173 | .cpt-loading-mask.column .div-loading .loading.origin div:nth-child(5) { 174 | -moz-animation-delay: 1s; 175 | -webkit-animation-delay: 1s; 176 | animation-delay: 1s; 177 | } 178 | /* line 90, ../sass/loading.scss */ 179 | .cpt-loading-mask.column .div-loading .loading.pic { 180 | width: 80px; 181 | height: 80px; 182 | } 183 | /* line 94, ../sass/loading.scss */ 184 | .cpt-loading-mask.column .div-loading .loading.pic img { 185 | width: 100%; 186 | height: 100%; 187 | } 188 | /* line 101, ../sass/loading.scss */ 189 | .cpt-loading-mask.column .div-loading .loading-title { 190 | width: 100%; 191 | text-align: center; 192 | color: #fff; 193 | padding: 2px 0; 194 | font-size: 16px; 195 | margin-bottom: 20px; 196 | white-space: nowrap; 197 | overflow: hidden; 198 | -ms-text-overflow: ellipsis; 199 | -o-text-overflow: ellipsis; 200 | text-overflow: ellipsis; 201 | } 202 | /* line 112, ../sass/loading.scss */ 203 | .cpt-loading-mask.column .div-loading .loading-discription { 204 | width: 100%; 205 | text-align: center; 206 | color: #fff; 207 | font-size: 12px; 208 | margin-top: 20px; 209 | } 210 | /* line 123, ../sass/loading.scss */ 211 | .cpt-loading-mask.row { 212 | width: 100%; 213 | height: 100%; 214 | position: fixed; 215 | top: 0; 216 | left: 0; 217 | bottom: 0; 218 | right: 0; 219 | background: transparent; 220 | z-index: 100; 221 | -moz-transform: translateZ(0); 222 | -webkit-transform: translateZ(0); 223 | transform: translateZ(0); 224 | -moz-user-select: -moz-none; 225 | -ms-user-select: none; 226 | -webkit-user-select: none; 227 | user-select: none; 228 | } 229 | /* line 136, ../sass/loading.scss */ 230 | .cpt-loading-mask.row .div-loading { 231 | position: absolute; 232 | top: 50%; 233 | left: 50%; 234 | width: 260px; 235 | background: rgba(0, 0, 0, 0.6); 236 | display: -webkit-flex; 237 | display: flex; 238 | -webkit-align-items: center; 239 | align-items: center; 240 | -webkit-justify-content: center; 241 | justify-content: center; 242 | -webkit-flex-direction: row-reverse; 243 | flex-direction: row-reverse; 244 | -moz-transform: translate(-50%, -50%); 245 | -ms-transform: translate(-50%, -50%); 246 | -webkit-transform: translate(-50%, -50%); 247 | transform: translate(-50%, -50%); 248 | -moz-transform: translate3d(-50%, -50%, 0); 249 | -webkit-transform: translate3d(-50%, -50%, 0); 250 | transform: translate3d(-50%, -50%, 0); 251 | -moz-border-radius: 12px; 252 | -webkit-border-radius: 12px; 253 | border-radius: 12px; 254 | padding: 15px; 255 | } 256 | /* line 151, ../sass/loading.scss */ 257 | .cpt-loading-mask.row .div-loading .loading { 258 | position: relative; 259 | width: 60px; 260 | height: 60px; 261 | background: transparent; 262 | float: left; 263 | } 264 | /* line 160, ../sass/loading.scss */ 265 | .cpt-loading-mask.row .div-loading .loading.origin div { 266 | width: 80%; 267 | height: 80%; 268 | position: absolute; 269 | left: 10%; 270 | top: 10%; 271 | filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false); 272 | opacity: 1; 273 | -moz-animation: load 2.28s linear infinite; 274 | -webkit-animation: load 2.28s linear infinite; 275 | animation: load 2.28s linear infinite; 276 | } 277 | /* line 169, ../sass/loading.scss */ 278 | .cpt-loading-mask.row .div-loading .loading.origin div span { 279 | display: inline-block; 280 | width: 8px; 281 | height: 8px; 282 | border-radius: 50%; 283 | background: #FBC9B9; 284 | position: absolute; 285 | left: 50%; 286 | margin-top: -10px; 287 | margin-left: -10px; 288 | } 289 | /* line 182, ../sass/loading.scss */ 290 | .cpt-loading-mask.row .div-loading .loading.origin div:nth-child(1) { 291 | -moz-animation-delay: 0.2s; 292 | -webkit-animation-delay: 0.2s; 293 | animation-delay: 0.2s; 294 | } 295 | /* line 185, ../sass/loading.scss */ 296 | .cpt-loading-mask.row .div-loading .loading.origin div:nth-child(2) { 297 | -moz-animation-delay: 0.4s; 298 | -webkit-animation-delay: 0.4s; 299 | animation-delay: 0.4s; 300 | } 301 | /* line 188, ../sass/loading.scss */ 302 | .cpt-loading-mask.row .div-loading .loading.origin div:nth-child(3) { 303 | -moz-animation-delay: 0.6s; 304 | -webkit-animation-delay: 0.6s; 305 | animation-delay: 0.6s; 306 | } 307 | /* line 191, ../sass/loading.scss */ 308 | .cpt-loading-mask.row .div-loading .loading.origin div:nth-child(4) { 309 | -moz-animation-delay: 0.8s; 310 | -webkit-animation-delay: 0.8s; 311 | animation-delay: 0.8s; 312 | } 313 | /* line 194, ../sass/loading.scss */ 314 | .cpt-loading-mask.row .div-loading .loading.origin div:nth-child(5) { 315 | -moz-animation-delay: 1s; 316 | -webkit-animation-delay: 1s; 317 | animation-delay: 1s; 318 | } 319 | /* line 200, ../sass/loading.scss */ 320 | .cpt-loading-mask.row .div-loading .loading.pic { 321 | width: 80px; 322 | height: 80px; 323 | } 324 | /* line 204, ../sass/loading.scss */ 325 | .cpt-loading-mask.row .div-loading .loading.pic img { 326 | width: 100%; 327 | height: 100%; 328 | } 329 | /* line 211, ../sass/loading.scss */ 330 | .cpt-loading-mask.row .div-loading .loading-title { 331 | width: 72%; 332 | text-align: center; 333 | color: #fff; 334 | font-size: 16px; 335 | padding: 2px 0; 336 | padding-left: 20px; 337 | margin-bottom: 0; 338 | white-space: nowrap; 339 | overflow: hidden; 340 | -ms-text-overflow: ellipsis; 341 | -o-text-overflow: ellipsis; 342 | text-overflow: ellipsis; 343 | } 344 | /* line 223, ../sass/loading.scss */ 345 | .cpt-loading-mask.row .div-loading .loading-discription { 346 | display: none; 347 | width: 100%; 348 | text-align: center; 349 | color: #fff; 350 | font-size: 12px; 351 | margin-top: 20px; 352 | } 353 | 354 | /* line 236, ../sass/loading.scss */ 355 | .animated { 356 | animation-duration: 0.5s; 357 | animation-fill-mode: both; 358 | } 359 | 360 | /* line 241, ../sass/loading.scss */ 361 | .animated.infinite { 362 | animation-iteration-count: infinite; 363 | } 364 | 365 | @-webkit-keyframes fadeInNoTransform { 366 | 0% { 367 | opacity: 0; 368 | } 369 | 100% { 370 | opacity: 1; 371 | } 372 | } 373 | @keyframes fadeInNoTransform { 374 | 0% { 375 | opacity: 0; 376 | } 377 | 100% { 378 | opacity: 1; 379 | } 380 | } 381 | /* line 256, ../sass/loading.scss */ 382 | .fadeInNoTransform { 383 | -webkit-animation-name: fadeInNoTransform; 384 | animation-name: fadeInNoTransform; 385 | } 386 | 387 | @-webkit-keyframes fadeOutNoTransform { 388 | 0% { 389 | opacity: 1; 390 | } 391 | 100% { 392 | opacity: 0; 393 | } 394 | } 395 | @keyframes fadeOutNoTransform { 396 | 0% { 397 | opacity: 1; 398 | } 399 | 100% { 400 | opacity: 0; 401 | } 402 | } 403 | /* line 269, ../sass/loading.scss */ 404 | .fadeOutNoTransform { 405 | -webkit-animation-name: fadeOutNoTransform; 406 | animation-name: fadeOutNoTransform; 407 | } 408 | 409 | @-webkit-keyframes load { 410 | 0% { 411 | -moz-transform: rotate(0deg); 412 | -ms-transform: rotate(0deg); 413 | -webkit-transform: rotate(0deg); 414 | transform: rotate(0deg); 415 | } 416 | 10% { 417 | -moz-transform: rotate(45deg); 418 | -ms-transform: rotate(45deg); 419 | -webkit-transform: rotate(45deg); 420 | transform: rotate(45deg); 421 | } 422 | 50% { 423 | filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false); 424 | opacity: 1; 425 | -moz-transform: rotate(160deg); 426 | -ms-transform: rotate(160deg); 427 | -webkit-transform: rotate(160deg); 428 | transform: rotate(160deg); 429 | } 430 | 62% { 431 | filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); 432 | opacity: 0; 433 | } 434 | 65% { 435 | filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); 436 | opacity: 0; 437 | -moz-transform: rotate(200deg); 438 | -ms-transform: rotate(200deg); 439 | -webkit-transform: rotate(200deg); 440 | transform: rotate(200deg); 441 | } 442 | 90% { 443 | -moz-transform: rotate(340deg); 444 | -ms-transform: rotate(340deg); 445 | -webkit-transform: rotate(340deg); 446 | transform: rotate(340deg); 447 | } 448 | 100% { 449 | -moz-transform: rotate(360deg); 450 | -ms-transform: rotate(360deg); 451 | -webkit-transform: rotate(360deg); 452 | transform: rotate(360deg); 453 | } 454 | } 455 | @-moz-keyframes load { 456 | 0% { 457 | -moz-transform: rotate(0deg); 458 | -ms-transform: rotate(0deg); 459 | -webkit-transform: rotate(0deg); 460 | transform: rotate(0deg); 461 | } 462 | 10% { 463 | -moz-transform: rotate(45deg); 464 | -ms-transform: rotate(45deg); 465 | -webkit-transform: rotate(45deg); 466 | transform: rotate(45deg); 467 | } 468 | 50% { 469 | filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false); 470 | opacity: 1; 471 | -moz-transform: rotate(160deg); 472 | -ms-transform: rotate(160deg); 473 | -webkit-transform: rotate(160deg); 474 | transform: rotate(160deg); 475 | } 476 | 62% { 477 | filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); 478 | opacity: 0; 479 | } 480 | 65% { 481 | filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); 482 | opacity: 0; 483 | -moz-transform: rotate(200deg); 484 | -ms-transform: rotate(200deg); 485 | -webkit-transform: rotate(200deg); 486 | transform: rotate(200deg); 487 | } 488 | 90% { 489 | -moz-transform: rotate(340deg); 490 | -ms-transform: rotate(340deg); 491 | -webkit-transform: rotate(340deg); 492 | transform: rotate(340deg); 493 | } 494 | 100% { 495 | -moz-transform: rotate(360deg); 496 | -ms-transform: rotate(360deg); 497 | -webkit-transform: rotate(360deg); 498 | transform: rotate(360deg); 499 | } 500 | } 501 | @-ms-keyframes load { 502 | 0% { 503 | -moz-transform: rotate(0deg); 504 | -ms-transform: rotate(0deg); 505 | -webkit-transform: rotate(0deg); 506 | transform: rotate(0deg); 507 | } 508 | 10% { 509 | -moz-transform: rotate(45deg); 510 | -ms-transform: rotate(45deg); 511 | -webkit-transform: rotate(45deg); 512 | transform: rotate(45deg); 513 | } 514 | 50% { 515 | filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false); 516 | opacity: 1; 517 | -moz-transform: rotate(160deg); 518 | -ms-transform: rotate(160deg); 519 | -webkit-transform: rotate(160deg); 520 | transform: rotate(160deg); 521 | } 522 | 62% { 523 | filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); 524 | opacity: 0; 525 | } 526 | 65% { 527 | filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); 528 | opacity: 0; 529 | -moz-transform: rotate(200deg); 530 | -ms-transform: rotate(200deg); 531 | -webkit-transform: rotate(200deg); 532 | transform: rotate(200deg); 533 | } 534 | 90% { 535 | -moz-transform: rotate(340deg); 536 | -ms-transform: rotate(340deg); 537 | -webkit-transform: rotate(340deg); 538 | transform: rotate(340deg); 539 | } 540 | 100% { 541 | -moz-transform: rotate(360deg); 542 | -ms-transform: rotate(360deg); 543 | -webkit-transform: rotate(360deg); 544 | transform: rotate(360deg); 545 | } 546 | } 547 | @-o-keyframes load { 548 | 0% { 549 | -moz-transform: rotate(0deg); 550 | -ms-transform: rotate(0deg); 551 | -webkit-transform: rotate(0deg); 552 | transform: rotate(0deg); 553 | } 554 | 10% { 555 | -moz-transform: rotate(45deg); 556 | -ms-transform: rotate(45deg); 557 | -webkit-transform: rotate(45deg); 558 | transform: rotate(45deg); 559 | } 560 | 50% { 561 | filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false); 562 | opacity: 1; 563 | -moz-transform: rotate(160deg); 564 | -ms-transform: rotate(160deg); 565 | -webkit-transform: rotate(160deg); 566 | transform: rotate(160deg); 567 | } 568 | 62% { 569 | filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); 570 | opacity: 0; 571 | } 572 | 65% { 573 | filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); 574 | opacity: 0; 575 | -moz-transform: rotate(200deg); 576 | -ms-transform: rotate(200deg); 577 | -webkit-transform: rotate(200deg); 578 | transform: rotate(200deg); 579 | } 580 | 90% { 581 | -moz-transform: rotate(340deg); 582 | -ms-transform: rotate(340deg); 583 | -webkit-transform: rotate(340deg); 584 | transform: rotate(340deg); 585 | } 586 | 100% { 587 | -moz-transform: rotate(360deg); 588 | -ms-transform: rotate(360deg); 589 | -webkit-transform: rotate(360deg); 590 | transform: rotate(360deg); 591 | } 592 | } 593 | @keyframes load { 594 | 0% { 595 | -moz-transform: rotate(0deg); 596 | -ms-transform: rotate(0deg); 597 | -webkit-transform: rotate(0deg); 598 | transform: rotate(0deg); 599 | } 600 | 10% { 601 | -moz-transform: rotate(45deg); 602 | -ms-transform: rotate(45deg); 603 | -webkit-transform: rotate(45deg); 604 | transform: rotate(45deg); 605 | } 606 | 50% { 607 | filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false); 608 | opacity: 1; 609 | -moz-transform: rotate(160deg); 610 | -ms-transform: rotate(160deg); 611 | -webkit-transform: rotate(160deg); 612 | transform: rotate(160deg); 613 | } 614 | 62% { 615 | filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); 616 | opacity: 0; 617 | } 618 | 65% { 619 | filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); 620 | opacity: 0; 621 | -moz-transform: rotate(200deg); 622 | -ms-transform: rotate(200deg); 623 | -webkit-transform: rotate(200deg); 624 | transform: rotate(200deg); 625 | } 626 | 90% { 627 | -moz-transform: rotate(340deg); 628 | -ms-transform: rotate(340deg); 629 | -webkit-transform: rotate(340deg); 630 | transform: rotate(340deg); 631 | } 632 | 100% { 633 | -moz-transform: rotate(360deg); 634 | -ms-transform: rotate(360deg); 635 | -webkit-transform: rotate(360deg); 636 | transform: rotate(360deg); 637 | } 638 | } 639 | --------------------------------------------------------------------------------