├── LICENSE.md ├── README.md ├── bower.json ├── css ├── csspin-balls.css ├── csspin-boxes.css ├── csspin-bubble.css ├── csspin-eclipse.css ├── csspin-flip.css ├── csspin-heart.css ├── csspin-hue.css ├── csspin-meter.css ├── csspin-morph.css ├── csspin-pinwheel.css ├── csspin-round.css └── csspin-skeleton.css ├── csspin.css ├── index.html ├── less ├── _balls.less ├── _boxes.less ├── _bubble.less ├── _eclipse.less ├── _flip.less ├── _globals.less ├── _heart.less ├── _hue.less ├── _meter.less ├── _morph.less ├── _pinwheel.less ├── _round.less ├── _skeleton.less ├── csspin-balls.less ├── csspin-boxes.less ├── csspin-bubble.less ├── csspin-eclipse.less ├── csspin-flip.less ├── csspin-heart.less ├── csspin-hue.less ├── csspin-meter.less ├── csspin-morph.less ├── csspin-pinwheel.less ├── csspin-round.less ├── csspin-skeleton.less └── csspin.less └── style.css /LICENSE.md: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2016 Webkul Software 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # CSSPIN 2 | CSS Spinners and Loaders - Modular, Customizable and Single HTML Element Code. 3 | 4 | CSSPIN Library has a different set of interactive Pure CSS Loaders and Spinners which are built on the top of LESS Preprocessor. Individual Pure CSS Loader or Spinner can be easily customized and can be embedded with Single HTML Element in your next Dev Project. 5 | 6 | ## Demo 7 | Check out [Spinners in Motion](https://webkul.github.io/csspin/) 8 | 9 | ## Project Using CSSPIN 10 | [Opencart Point of Sale](http://oc-demo.webkul.com/pos/wkpos/) 11 | 12 | ## Installation 13 | Install CSSPIN with **npm** or **Bower** Package Manager 14 | ``` 15 | npm install csspin 16 | ``` 17 | 18 | ``` 19 | bower install csspin 20 | ``` 21 | [![CSSPIN Video](http://webkul.com/blog/wp-content/uploads/2016/12/csspin-video.png)](https://youtu.be/18uY-YueJeI) 22 | 23 | ## Less File Structure 24 | ``` 25 | ./less/ 26 | ... _globals.less 27 | ... _round.less 28 | ... csspin-xxxx.less 29 | ... csspin.less 30 | ``` 31 | 32 | ## How Less Stucture Works? 33 | * Less files ```with _``` are partials and have actual magic 34 | * Less files ```without _``` only imports partials 35 | * Less files named ```csspin-xxxx.less``` imports ```_globals.less``` and respective ```_partial.less``` 36 | * Less files named ```csspin-xxxx.less``` acts as an individual module and can be compiled to ```css/csspin-xxxx.css``` for individual use 37 | * Less file named ```csspin.less``` imports all the partials and is compiled to ```csspin.css``` 38 | 39 | ## CSS File Structure 40 | ``` 41 | ./css/ 42 | ... csspin-xxxx.css 43 | ./csspin.css 44 | ``` 45 | 46 | ## How CSS Structure Works? 47 | * CSS File named ```csspin.css``` consists CSS of all the spinners 48 | * CSS File named ```csspin-xxxx.css``` consists CSS of respective spinners 49 | 50 | ## Credits 51 | Crafted with :heart: at [Webkul UXlab](http://design.webkul.com) 52 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "csspin", 3 | "homepage": "https://webkul.github.io/csspin/", 4 | "authors": [ 5 | "Nitish Kumar " 6 | ], 7 | "description": "CSS Spinners and Loaders - Modular, Customizable and Single HTML Element Code", 8 | "main": "csspin.css", 9 | "keywords": [ 10 | "csspin", 11 | "css", 12 | "less", 13 | "spinner", 14 | "spinners", 15 | "loader", 16 | "loaders", 17 | "css loader", 18 | "css loaders", 19 | "less loader", 20 | "less loaders", 21 | "modular css", 22 | "modular less", 23 | "css spinner", 24 | "css loader", 25 | "pure css loader", 26 | "pure css loaders", 27 | "pure less loader", 28 | "pure less loaders" 29 | ], 30 | "license": "MIT", 31 | "ignore": [ 32 | "**/.*", 33 | "node_modules", 34 | "bower_components", 35 | "test", 36 | "tests" 37 | ] 38 | } 39 | -------------------------------------------------------------------------------- /css/csspin-balls.css: -------------------------------------------------------------------------------- 1 | .cp-spinner{width:48px;height:48px;display:inline-block;box-sizing:border-box;position:relative}.cp-balls{animation:cp-balls-animate 1s linear infinite}.cp-balls:before{border-radius:50%;content:" ";width:24px;height:24px;display:inline-block;box-sizing:border-box;background-color:#0fd6ff;position:absolute;top:0;left:0;animation:cp-balls-animate-before 1s ease-in-out infinite}.cp-balls:after{border-radius:50%;content:" ";width:24px;height:24px;display:inline-block;box-sizing:border-box;background-color:#eb68a1;position:absolute;bottom:0;right:0;animation:cp-balls-animate-after 1s ease-in-out infinite}@keyframes cp-balls-animate{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}@keyframes cp-balls-animate-before{0%{transform:translate(-5px,-5px)}50%{transform:translate(0,0)}100%{transform:translate(-5px,-5px)}}@keyframes cp-balls-animate-after{0%{transform:translate(5px,5px)}50%{transform:translate(0,0)}100%{transform:translate(5px,5px)}} -------------------------------------------------------------------------------- /css/csspin-boxes.css: -------------------------------------------------------------------------------- 1 | .cp-spinner{width:48px;height:48px;display:inline-block;box-sizing:border-box;position:relative}.cp-boxes:before{width:24px;height:24px;display:inline-block;box-sizing:border-box;content:" ";background:#58bd55;position:absolute;top:12px;left:0;animation:cp-boxes-animate-before 1s ease-in-out infinite}.cp-boxes:after{width:24px;height:24px;display:inline-block;box-sizing:border-box;content:" ";background:#58bd55;position:absolute;top:12px;right:0;animation:cp-boxes-animate-after 1s ease-in-out infinite}@keyframes cp-boxes-animate-before{0%{transform:translateX(-24px) rotate(45deg)}50%{transform:translateX(-8px) rotate(225deg)}100%{transform:translateX(-24px) rotate(45deg)}}@keyframes cp-boxes-animate-after{0%{transform:translateX(24px) rotate(45deg)}50%{transform:translateX(8px) rotate(-225deg)}100%{transform:translateX(24px) rotate(45deg)}} -------------------------------------------------------------------------------- /css/csspin-bubble.css: -------------------------------------------------------------------------------- 1 | .cp-spinner{width:48px;height:48px;display:inline-block;box-sizing:border-box;position:relative}.cp-bubble{border-radius:50%;width:24px;height:24px;display:inline-block;box-sizing:border-box;background:#58bd55;animation:cp-bubble-animate 1s linear infinite}.cp-bubble:before{border-radius:50%;content:" ";width:24px;height:24px;display:inline-block;box-sizing:border-box;background-color:#58bd55;position:absolute;left:-30px;animation:cp-bubble-animate-before 1s ease-in-out infinite}.cp-bubble:after{border-radius:50%;content:" ";width:24px;height:24px;display:inline-block;box-sizing:border-box;background-color:#58bd55;position:absolute;right:-30px;animation:cp-bubble-animate-after 1s ease-in-out infinite}@keyframes cp-bubble-animate{0%{opacity:.5;transform:scale(1) translateX(0)}25%{opacity:1;transform:scale(1.1) translateX(-15px)}50%{opacity:1;transform:scale(1.2) translateX(15px)}100%{opacity:.5;transform:scale(1) translateX(0)}}@keyframes cp-bubble-animate-before{0%{opacity:.5;transform:scale(1)}25%{transform:scale(1.1)}100%,50%{opacity:1;transform:scale(1)}}@keyframes cp-bubble-animate-after{0%,50%{opacity:.5;transform:scale(1)}50%{transform:scale(1.1)}100%,75%{opacity:1;transform:scale(1)}} -------------------------------------------------------------------------------- /css/csspin-eclipse.css: -------------------------------------------------------------------------------- 1 | .cp-spinner{width:48px;height:48px;display:inline-block;box-sizing:border-box;position:relative}.cp-eclipse{width:12px;height:12px;display:inline-block;box-sizing:border-box;border-radius:50%;background:#f3d53f;margin:12px;animation:cp-eclipse-animate 1s ease-out infinite}.cp-eclipse:before{border-radius:50%;content:" ";width:48px;height:48px;display:inline-block;box-sizing:border-box;border-top:solid 6px transparent;border-right:solid 6px #f3d53f;border-bottom:solid 6px transparent;border-left:solid 6px transparent;position:absolute;top:-18px;left:-18px}.cp-eclipse:after{border-radius:50%;content:" ";width:48px;height:48px;display:inline-block;box-sizing:border-box;border-top:solid 6px transparent;border-right:solid 6px transparent;border-bottom:solid 6px transparent;border-left:solid 6px #f3d53f;position:absolute;top:-18px;right:-18px}@keyframes cp-eclipse-animate{0%{transform:rotate(0)}100%{transform:rotate(360deg)}} -------------------------------------------------------------------------------- /css/csspin-flip.css: -------------------------------------------------------------------------------- 1 | .cp-spinner{width:48px;height:48px;display:inline-block;box-sizing:border-box;position:relative}.cp-flip{transform-style:preserve-3d;perspective:10em}.cp-flip:before{width:48px;height:48px;display:inline-block;box-sizing:border-box;background:#F56151;content:" ";position:absolute;top:0;left:0;animation:cp-flip-animate-before 2s linear infinite}@keyframes cp-flip-animate-before{0%{transform:rotateY(0) rotateX(0)}25%{transform:rotateY(360deg) rotateX(0)}50%{transform:rotateY(360deg) rotateX(360deg)}75%{transform:rotateY(0) rotateX(360deg)}100%{transform:rotateY(0) rotateX(0)}} -------------------------------------------------------------------------------- /css/csspin-heart.css: -------------------------------------------------------------------------------- 1 | .cp-spinner{width:48px;height:48px;display:inline-block;box-sizing:border-box;position:relative}.cp-heart{animation:cp-heart-animate 2s ease-in-out infinite}.cp-heart:before{border-radius:12px 12px 0 0;content:" ";width:24px;height:35px;display:inline-block;box-sizing:border-box;background-color:#eb68a1;transform:rotate(-45deg);position:absolute;top:0;left:8px}.cp-heart:after{border-radius:12px 12px 0 0;content:" ";width:24px;height:35px;display:inline-block;box-sizing:border-box;background-color:#eb68a1;transform:rotate(45deg);position:absolute;top:0;right:8px}@keyframes cp-heart-animate{0%{transform:scale(.9);transform-origin:center}15%{transform:scale(1.4);transform-origin:center}30%{transform:scale(.9);transform-origin:center}45%{transform:scale(1.4);transform-origin:center}100%,60%{transform:scale(.9);transform-origin:center}} -------------------------------------------------------------------------------- /css/csspin-hue.css: -------------------------------------------------------------------------------- 1 | .cp-spinner{width:48px;height:48px;display:inline-block;box-sizing:border-box;position:relative}.cp-hue{width:24px;height:24px;display:inline-block;box-sizing:border-box;background:#f56151;border-radius:50%;animation:cp-hue-animate 1s ease-in-out infinite}.cp-hue:before{border-radius:0 12px 12px 0;content:" ";width:12px;height:24px;display:inline-block;box-sizing:border-box;background:#fff;position:absolute;top:0;right:0;animation:cp-hue-animate-before 1s ease-in-out infinite}@keyframes cp-hue-animate{0%{background:#f56151}25%{background:#58bd55}50%{background:#eb68a1}75%{background:#f3d53f}100%{background:#f56151}}@keyframes cp-hue-animate-before{0%{transform:rotateY(0);transform-origin:left center;opacity:.5}30%,70%{transform:rotateY(180deg);transform-origin:left center;opacity:.2}100%{transform:rotateY(0);opacity:.5}} -------------------------------------------------------------------------------- /css/csspin-meter.css: -------------------------------------------------------------------------------- 1 | .cp-spinner{width:48px;height:48px;display:inline-block;box-sizing:border-box;position:relative}.cp-meter{border-radius:50%;border-top:solid 6px #0fd6ff;border-right:solid 6px #0fd6ff;border-bottom:solid 6px #0fd6ff;border-left:solid 6px #0fd6ff;width:48px;height:48px;display:inline-block;box-sizing:border-box}.cp-meter:before{border-radius:3px;content:" ";width:6px;height:12px;display:inline-block;box-sizing:border-box;background-color:#0fd6ff;position:absolute;top:5px;left:16px;transform-origin:center bottom;animation:cp-meter-animate-before 1s linear infinite}@keyframes cp-meter-animate-before{0%{transform:rotate(-45deg)}100%{transform:rotate(315deg)}} -------------------------------------------------------------------------------- /css/csspin-morph.css: -------------------------------------------------------------------------------- 1 | .cp-spinner{width:48px;height:48px;display:inline-block;box-sizing:border-box;position:relative}.cp-morph{width:48px;height:48px;display:inline-block;box-sizing:border-box;background:#0fd6ff;animation:cp-morph-animate 1s linear infinite}@keyframes cp-morph-animate{0%{transform:rotate(0) scale(1);border-radius:0;background:#f3d53f}25%,75%{transform:rotate(180deg) scale(.4);border-radius:50%;background:#0fd6ff}100%{transform:rotate(360deg) scale(1);border-radius:0;background:#f3d53f}} -------------------------------------------------------------------------------- /css/csspin-pinwheel.css: -------------------------------------------------------------------------------- 1 | .cp-spinner{width:48px;height:48px;display:inline-block;box-sizing:border-box;position:relative}.cp-pinwheel{border-radius:50%;width:48px;height:48px;display:inline-block;box-sizing:border-box;border-top:solid 24px #0fd6ff;border-right:solid 24px #58bd55;border-bottom:solid 24px #eb68a1;border-left:solid 24px #f3d53f;animation:cp-pinwheel-animate 1s linear infinite}@keyframes cp-pinwheel-animate{0%{border-top-color:#0fd6ff;border-right-color:#58bd55;border-bottom-color:#eb68a1;border-left-color:#f3d53f;transform:rotate(0)}25%{border-top-color:#eb68a1;border-right-color:#f3d53f;border-bottom-color:#0fd6ff;border-left-color:#58bd55}50%{border-top-color:#0fd6ff;border-right-color:#58bd55;border-bottom-color:#eb68a1;border-left-color:#f3d53f}75%{border-top-color:#eb68a1;border-right-color:#f3d53f;border-bottom-color:#0fd6ff;border-left-color:#58bd55}100%{border-top-color:#0fd6ff;border-right-color:#58bd55;border-bottom-color:#eb68a1;border-left-color:#f3d53f;transform:rotate(360deg)}} -------------------------------------------------------------------------------- /css/csspin-round.css: -------------------------------------------------------------------------------- 1 | .cp-spinner{width:48px;height:48px;display:inline-block;box-sizing:border-box;position:relative}.cp-round:before{border-radius:50%;content:" ";width:48px;height:48px;display:inline-block;box-sizing:border-box;border-top:solid 6px #bababa;border-right:solid 6px #bababa;border-bottom:solid 6px #bababa;border-left:solid 6px #bababa;position:absolute;top:0;left:0}.cp-round:after{border-radius:50%;content:" ";width:48px;height:48px;display:inline-block;box-sizing:border-box;border-top:solid 6px #F56151;border-right:solid 6px transparent;border-bottom:solid 6px transparent;border-left:solid 6px transparent;position:absolute;top:0;left:0;animation:cp-round-animate 1s ease-in-out infinite}@keyframes cp-round-animate{0%{transform:rotate(0)}100%{transform:rotate(360deg)}} -------------------------------------------------------------------------------- /css/csspin-skeleton.css: -------------------------------------------------------------------------------- 1 | .cp-spinner{width:48px;height:48px;display:inline-block;box-sizing:border-box;position:relative}.cp-skeleton{border-radius:50%;border-top:solid 6px #f56151;border-right:solid 6px transparent;border-bottom:solid 6px transparent;border-left:solid 6px transparent;animation:cp-skeleton-animate 1s linear infinite}.cp-skeleton:before{border-radius:50%;content:" ";width:48px;height:48px;display:inline-block;box-sizing:border-box;border-top:solid 6px transparent;border-right:solid 6px transparent;border-bottom:solid 6px transparent;border-left:solid 6px #f56151;position:absolute;top:-6px;left:-6px;transform:rotateZ(-30deg)}.cp-skeleton:after{border-radius:50%;content:" ";width:48px;height:48px;display:inline-block;box-sizing:border-box;border-top:solid 6px transparent;border-right:solid 6px #f56151;border-bottom:solid 6px transparent;border-left:solid 6px transparent;position:absolute;top:-6px;right:-6px;transform:rotateZ(30deg)}@keyframes cp-skeleton-animate{0%{transform:rotate(0);opacity:1}50%{opacity:.7}100%{transform:rotate(360deg);opacity:1}} -------------------------------------------------------------------------------- /csspin.css: -------------------------------------------------------------------------------- 1 | .cp-spinner{width:48px;height:48px;display:inline-block;box-sizing:border-box;position:relative}.cp-round:before{border-radius:50%;content:" ";width:48px;height:48px;display:inline-block;box-sizing:border-box;border-top:solid 6px #bababa;border-right:solid 6px #bababa;border-bottom:solid 6px #bababa;border-left:solid 6px #bababa;position:absolute;top:0;left:0}.cp-round:after{border-radius:50%;content:" ";width:48px;height:48px;display:inline-block;box-sizing:border-box;border-top:solid 6px #f56151;border-right:solid 6px transparent;border-bottom:solid 6px transparent;border-left:solid 6px transparent;position:absolute;top:0;left:0;animation:cp-round-animate 1s ease-in-out infinite}@keyframes cp-round-animate{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}.cp-pinwheel{border-radius:50%;width:48px;height:48px;display:inline-block;box-sizing:border-box;border-top:solid 24px #0fd6ff;border-right:solid 24px #58bd55;border-bottom:solid 24px #eb68a1;border-left:solid 24px #f3d53f;animation:cp-pinwheel-animate 1s linear infinite}@keyframes cp-pinwheel-animate{0%{border-top-color:#0fd6ff;border-right-color:#58bd55;border-bottom-color:#eb68a1;border-left-color:#f3d53f;transform:rotate(0)}25%{border-top-color:#eb68a1;border-right-color:#f3d53f;border-bottom-color:#0fd6ff;border-left-color:#58bd55}50%{border-top-color:#0fd6ff;border-right-color:#58bd55;border-bottom-color:#eb68a1;border-left-color:#f3d53f}75%{border-top-color:#eb68a1;border-right-color:#f3d53f;border-bottom-color:#0fd6ff;border-left-color:#58bd55}100%{border-top-color:#0fd6ff;border-right-color:#58bd55;border-bottom-color:#eb68a1;border-left-color:#f3d53f;transform:rotate(360deg)}}.cp-balls{animation:cp-balls-animate 1s linear infinite}.cp-balls:before{border-radius:50%;content:" ";width:24px;height:24px;display:inline-block;box-sizing:border-box;background-color:#0fd6ff;position:absolute;top:0;left:0;animation:cp-balls-animate-before 1s ease-in-out infinite}.cp-balls:after{border-radius:50%;content:" ";width:24px;height:24px;display:inline-block;box-sizing:border-box;background-color:#eb68a1;position:absolute;bottom:0;right:0;animation:cp-balls-animate-after 1s ease-in-out infinite}@keyframes cp-balls-animate{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}@keyframes cp-balls-animate-before{0%{transform:translate(-5px,-5px)}50%{transform:translate(0,0)}100%{transform:translate(-5px,-5px)}}@keyframes cp-balls-animate-after{0%{transform:translate(5px,5px)}50%{transform:translate(0,0)}100%{transform:translate(5px,5px)}}.cp-bubble{border-radius:50%;width:24px;height:24px;display:inline-block;box-sizing:border-box;background:#58bd55;animation:cp-bubble-animate 1s linear infinite}.cp-bubble:before{border-radius:50%;content:" ";width:24px;height:24px;display:inline-block;box-sizing:border-box;background-color:#58bd55;position:absolute;left:-30px;animation:cp-bubble-animate-before 1s ease-in-out infinite}.cp-bubble:after{border-radius:50%;content:" ";width:24px;height:24px;display:inline-block;box-sizing:border-box;background-color:#58bd55;position:absolute;right:-30px;animation:cp-bubble-animate-after 1s ease-in-out infinite}@keyframes cp-bubble-animate{0%{opacity:.5;transform:scale(1) translateX(0)}25%{opacity:1;transform:scale(1.1) translateX(-15px)}50%{opacity:1;transform:scale(1.2) translateX(15px)}100%{opacity:.5;transform:scale(1) translateX(0)}}@keyframes cp-bubble-animate-before{0%{opacity:.5;transform:scale(1)}25%{transform:scale(1.1)}100%,50%{opacity:1;transform:scale(1)}}@keyframes cp-bubble-animate-after{0%,50%{opacity:.5;transform:scale(1)}50%{transform:scale(1.1)}100%,75%{opacity:1;transform:scale(1)}}.cp-flip{transform-style:preserve-3d;perspective:10em}.cp-flip:before{width:48px;height:48px;display:inline-block;box-sizing:border-box;background:#f56151;content:" ";position:absolute;top:0;left:0;animation:cp-flip-animate-before 2s linear infinite}@keyframes cp-flip-animate-before{0%{transform:rotateY(0) rotateX(0)}25%{transform:rotateY(360deg) rotateX(0)}50%{transform:rotateY(360deg) rotateX(360deg)}75%{transform:rotateY(0) rotateX(360deg)}100%{transform:rotateY(0) rotateX(0)}}.cp-hue{width:24px;height:24px;display:inline-block;box-sizing:border-box;background:#f56151;border-radius:50%;animation:cp-hue-animate 1s ease-in-out infinite}.cp-hue:before{border-radius:0 12px 12px 0;content:" ";width:12px;height:24px;display:inline-block;box-sizing:border-box;background:#fff;position:absolute;top:0;right:0;animation:cp-hue-animate-before 1s ease-in-out infinite}@keyframes cp-hue-animate{0%{background:#f56151}25%{background:#58bd55}50%{background:#eb68a1}75%{background:#f3d53f}100%{background:#f56151}}@keyframes cp-hue-animate-before{0%{transform:rotateY(0);transform-origin:left center;opacity:.5}30%,70%{transform:rotateY(180deg);transform-origin:left center;opacity:.2}100%{transform:rotateY(0);opacity:.5}}.cp-skeleton{border-radius:50%;border-top:solid 6px #f56151;border-right:solid 6px transparent;border-bottom:solid 6px transparent;border-left:solid 6px transparent;animation:cp-skeleton-animate 1s linear infinite}.cp-skeleton:before{border-radius:50%;content:" ";width:48px;height:48px;display:inline-block;box-sizing:border-box;border-top:solid 6px transparent;border-right:solid 6px transparent;border-bottom:solid 6px transparent;border-left:solid 6px #f56151;position:absolute;top:-6px;left:-6px;transform:rotateZ(-30deg)}.cp-skeleton:after{border-radius:50%;content:" ";width:48px;height:48px;display:inline-block;box-sizing:border-box;border-top:solid 6px transparent;border-right:solid 6px #f56151;border-bottom:solid 6px transparent;border-left:solid 6px transparent;position:absolute;top:-6px;right:-6px;transform:rotateZ(30deg)}@keyframes cp-skeleton-animate{0%{transform:rotate(0);opacity:1}50%{opacity:.7}100%{transform:rotate(360deg);opacity:1}}.cp-eclipse{width:12px;height:12px;display:inline-block;box-sizing:border-box;border-radius:50%;background:#f3d53f;margin:12px;animation:cp-eclipse-animate 1s ease-out infinite}.cp-eclipse:before{border-radius:50%;content:" ";width:48px;height:48px;display:inline-block;box-sizing:border-box;border-top:solid 6px transparent;border-right:solid 6px #f3d53f;border-bottom:solid 6px transparent;border-left:solid 6px transparent;position:absolute;top:-18px;left:-18px}.cp-eclipse:after{border-radius:50%;content:" ";width:48px;height:48px;display:inline-block;box-sizing:border-box;border-top:solid 6px transparent;border-right:solid 6px transparent;border-bottom:solid 6px transparent;border-left:solid 6px #f3d53f;position:absolute;top:-18px;right:-18px}@keyframes cp-eclipse-animate{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}.cp-boxes:before{width:24px;height:24px;display:inline-block;box-sizing:border-box;content:" ";background:#58bd55;position:absolute;top:12px;left:0;animation:cp-boxes-animate-before 1s ease-in-out infinite}.cp-boxes:after{width:24px;height:24px;display:inline-block;box-sizing:border-box;content:" ";background:#58bd55;position:absolute;top:12px;right:0;animation:cp-boxes-animate-after 1s ease-in-out infinite}@keyframes cp-boxes-animate-before{0%{transform:translateX(-24px) rotate(45deg)}50%{transform:translateX(-8px) rotate(225deg)}100%{transform:translateX(-24px) rotate(45deg)}}@keyframes cp-boxes-animate-after{0%{transform:translateX(24px) rotate(45deg)}50%{transform:translateX(8px) rotate(-225deg)}100%{transform:translateX(24px) rotate(45deg)}}.cp-morph{width:48px;height:48px;display:inline-block;box-sizing:border-box;background:#0fd6ff;animation:cp-morph-animate 1s linear infinite}@keyframes cp-morph-animate{0%{transform:rotate(0) scale(1);border-radius:0;background:#f3d53f}25%,75%{transform:rotate(180deg) scale(.4);border-radius:50%;background:#0fd6ff}100%{transform:rotate(360deg) scale(1);border-radius:0;background:#f3d53f}}.cp-heart{animation:cp-heart-animate 2s ease-in-out infinite}.cp-heart:before{border-radius:12px 12px 0 0;content:" ";width:24px;height:35px;display:inline-block;box-sizing:border-box;background-color:#eb68a1;transform:rotate(-45deg);position:absolute;top:0;left:8px}.cp-heart:after{border-radius:12px 12px 0 0;content:" ";width:24px;height:35px;display:inline-block;box-sizing:border-box;background-color:#eb68a1;transform:rotate(45deg);position:absolute;top:0;right:8px}@keyframes cp-heart-animate{0%{transform:scale(.9);transform-origin:center}15%{transform:scale(1.4);transform-origin:center}30%{transform:scale(.9);transform-origin:center}45%{transform:scale(1.4);transform-origin:center}100%,60%{transform:scale(.9);transform-origin:center}}.cp-meter{border-radius:50%;border-top:solid 6px #0fd6ff;border-right:solid 6px #0fd6ff;border-bottom:solid 6px #0fd6ff;border-left:solid 6px #0fd6ff;width:48px;height:48px;display:inline-block;box-sizing:border-box}.cp-meter:before{border-radius:3px;content:" ";width:6px;height:12px;display:inline-block;box-sizing:border-box;background-color:#0fd6ff;position:absolute;top:5px;left:16px;transform-origin:center bottom;animation:cp-meter-animate-before 1s linear infinite}@keyframes cp-meter-animate-before{0%{transform:rotate(-45deg)}100%{transform:rotate(315deg)}} -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CSSPIN - CSS Spinners and Loaders 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 |

CSSPIN

27 |

CSS Spinners and Loaders - Modular, Customizable and Single HTML Element Code

28 | View on Github 29 | Tweet 30 | 31 | 32 | 33 |
34 | 35 | 36 | 49 | 50 | 51 | 52 | 65 | 66 | 67 | 68 | 81 | 82 | 83 | 84 | 97 | 98 | 99 | 100 | 113 | 114 | 115 | 116 | 129 | 130 | 131 | 132 | 145 | 146 | 147 | 148 | 161 | 162 | 163 | 164 | 177 | 178 | 179 | 180 | 193 | 194 | 195 | 196 | 209 | 210 | 211 | 212 | 225 | 226 | 227 |
228 | 229 | 230 | 231 |

© Crafted with 232 | 233 | 234 | at Webkul UXlab

235 | 236 | 237 |
238 | 239 | 240 | 241 | -------------------------------------------------------------------------------- /less/_balls.less: -------------------------------------------------------------------------------- 1 | /*Balls Spinner*/ 2 | .cp-balls{ 3 | animation: cp-balls-animate @speed3x linear infinite; 4 | } 5 | 6 | .cp-balls:before{ 7 | border-radius: 50%; 8 | content: " "; 9 | .bounding-box(@boxSize/2, @boxSize/2); 10 | background-color: @firstColor; 11 | position: absolute; 12 | top: 0; 13 | left: 0; 14 | animation: cp-balls-animate-before @speed3x ease-in-out infinite; 15 | } 16 | 17 | .cp-balls:after{ 18 | border-radius: 50%; 19 | content: " "; 20 | .bounding-box(@boxSize/2, @boxSize/2); 21 | background-color: @thirdColor; 22 | position: absolute; 23 | bottom: 0; 24 | right: 0; 25 | animation: cp-balls-animate-after @speed3x ease-in-out infinite; 26 | } 27 | 28 | /*Balls Spinner Animation*/ 29 | @keyframes cp-balls-animate{ 30 | 0%{ 31 | transform: rotate(0deg); 32 | } 33 | 100%{ 34 | transform: rotate(360deg); 35 | } 36 | } 37 | 38 | @keyframes cp-balls-animate-before{ 39 | 0%{ 40 | transform: translate(-5px, -5px); 41 | } 42 | 50%{ 43 | transform: translate(0px, 0px); 44 | } 45 | 100%{ 46 | transform: translate(-5px, -5px); 47 | } 48 | } 49 | 50 | @keyframes cp-balls-animate-after{ 51 | 0%{ 52 | transform: translate(5px, 5px); 53 | } 54 | 50%{ 55 | transform: translate(0px, 0px); 56 | } 57 | 100%{ 58 | transform: translate(5px, 5px); 59 | } 60 | } -------------------------------------------------------------------------------- /less/_boxes.less: -------------------------------------------------------------------------------- 1 | /*Boxes Spinner*/ 2 | .cp-boxes:before{ 3 | .bounding-box(@boxSize/2, @boxSize/2); 4 | content: " "; 5 | background: @secondColor; 6 | position: absolute; 7 | top: (@boxSize/8*2); 8 | left: 0; 9 | animation: cp-boxes-animate-before @speed3x ease-in-out infinite; 10 | } 11 | .cp-boxes:after{ 12 | .bounding-box(@boxSize/2, @boxSize/2); 13 | content: " "; 14 | background: @secondColor; 15 | position: absolute; 16 | top: (@boxSize/8*2); 17 | right: 0; 18 | animation: cp-boxes-animate-after @speed3x ease-in-out infinite; 19 | } 20 | 21 | /*Boxes Spinner Animation*/ 22 | @keyframes cp-boxes-animate-before{ 23 | 0%{ 24 | transform: translateX(-@boxSize/2) rotate(45deg); 25 | } 26 | 50%{ 27 | transform: translateX(-@boxSize/6) rotate(225deg); 28 | } 29 | 100%{ 30 | transform: translateX(-@boxSize/2) rotate(45deg); 31 | } 32 | } 33 | 34 | @keyframes cp-boxes-animate-after{ 35 | 0%{ 36 | transform: translateX(@boxSize/2) rotate(45deg); 37 | } 38 | 50%{ 39 | transform: translateX(@boxSize/6) rotate(-225deg); 40 | } 41 | 100%{ 42 | transform: translateX(@boxSize/2) rotate(45deg); 43 | } 44 | } -------------------------------------------------------------------------------- /less/_bubble.less: -------------------------------------------------------------------------------- 1 | /*Bubble Spinner*/ 2 | .cp-bubble{ 3 | border-radius: 50%; 4 | .bounding-box(@boxSize/2, @boxSize/2); 5 | background: @secondColor; 6 | animation: cp-bubble-animate @speed3x linear infinite; 7 | } 8 | 9 | .cp-bubble:before{ 10 | border-radius: 50%; 11 | content: " "; 12 | .bounding-box(@boxSize/2, @boxSize/2); 13 | background-color: @secondColor; 14 | position: absolute; 15 | left: -(@boxSize/8*5); 16 | animation: cp-bubble-animate-before @speed3x ease-in-out infinite; 17 | } 18 | 19 | .cp-bubble:after{ 20 | border-radius: 50%; 21 | content: " "; 22 | .bounding-box(@boxSize/2, @boxSize/2); 23 | background-color: @secondColor; 24 | position: absolute; 25 | right: -(@boxSize/8*5); 26 | animation: cp-bubble-animate-after @speed3x ease-in-out infinite; 27 | } 28 | 29 | /*Bubble Spinner Animation*/ 30 | @keyframes cp-bubble-animate{ 31 | 0% { 32 | opacity: .5; 33 | transform: scale(1) translateX(0px); 34 | } 35 | 25%{ 36 | opacity: 1; 37 | transform: scale(1.1) translateX(-15px); 38 | } 39 | 50%{ 40 | opacity: 1; 41 | transform: scale(1.2) translateX(15px); 42 | } 43 | 100%{ 44 | opacity: .5; 45 | transform: scale(1) translateX(0px); 46 | } 47 | } 48 | 49 | @keyframes cp-bubble-animate-before{ 50 | 0%{ 51 | opacity: .5; 52 | transform: scale(1); 53 | } 54 | 25%{ 55 | transform: scale(1.1); 56 | } 57 | 50%, 100%{ 58 | opacity: 1; 59 | transform: scale(1); 60 | } 61 | } 62 | 63 | @keyframes cp-bubble-animate-after{ 64 | 0%,50%{ 65 | opacity: .5; 66 | transform: scale(1); 67 | } 68 | 50%{ 69 | transform: scale(1.1); 70 | } 71 | 75%, 100%{ 72 | opacity: 1; 73 | transform: scale(1); 74 | } 75 | } -------------------------------------------------------------------------------- /less/_eclipse.less: -------------------------------------------------------------------------------- 1 | /*Eclipse Spinner*/ 2 | .cp-eclipse{ 3 | .bounding-box(@boxSize/4, @boxSize/4); 4 | border-radius: 50%; 5 | background: @fourthColor; 6 | margin: @boxSize/4; 7 | animation: cp-eclipse-animate @speed3x ease-out infinite; 8 | } 9 | .cp-eclipse:before{ 10 | border-radius: 50%; 11 | content: " "; 12 | .bounding-box(@boxSize, @boxSize); 13 | .border(@boxSize/8, @transparent, @fourthColor, @transparent, @transparent); 14 | position: absolute; 15 | top: -(@boxSize/8*3); 16 | left: -(@boxSize/8*3); 17 | } 18 | .cp-eclipse:after{ 19 | border-radius: 50%; 20 | content: " "; 21 | .bounding-box(@boxSize, @boxSize); 22 | .border(@boxSize/8, @transparent, @transparent, @transparent, @fourthColor); 23 | position: absolute; 24 | top: -(@boxSize/8*3); 25 | right: -(@boxSize/8*3); 26 | } 27 | 28 | /*Eclipse Spinner Animation*/ 29 | @keyframes cp-eclipse-animate{ 30 | 0%{ 31 | transform: rotate(0deg); 32 | } 33 | 100%{ 34 | transform: rotate(360deg); 35 | } 36 | } -------------------------------------------------------------------------------- /less/_flip.less: -------------------------------------------------------------------------------- 1 | /*Flip Spinner*/ 2 | .cp-flip{ 3 | transform-style: preserve-3d; 4 | perspective: 10em; 5 | } 6 | .cp-flip:before{ 7 | .bounding-box(@boxSize, @boxSize); 8 | background: @primaryColor; 9 | content: " "; 10 | position: absolute; 11 | top: 0; 12 | left: 0; 13 | animation: cp-flip-animate-before @speed2x linear infinite; 14 | } 15 | 16 | /*Flip Spinner Animation*/ 17 | @keyframes cp-flip-animate-before{ 18 | 0% { 19 | transform: rotateY(0deg) rotateX(0deg); 20 | } 21 | 25%{ 22 | transform: rotateY(360deg) rotateX(0deg); 23 | } 24 | 50%{ 25 | transform: rotateY(360deg) rotateX(360deg); 26 | } 27 | 75%{ 28 | transform: rotateY(0deg) rotateX(360deg); 29 | } 30 | 100%{ 31 | transform: rotateY(0deg) rotateX(0deg); 32 | } 33 | } -------------------------------------------------------------------------------- /less/_globals.less: -------------------------------------------------------------------------------- 1 | /*Global Variables*/ 2 | /*Colors*/ 3 | @primaryColor: #F56151; 4 | @bgColor: #bababa; 5 | @firstColor: #0fd6ff; 6 | @secondColor:#58bd55; 7 | @thirdColor: #eb68a1; 8 | @fourthColor: #f3d53f; 9 | @transparent: transparent; 10 | 11 | /*Box Size*/ 12 | @boxSize: 48px; 13 | 14 | /*Speed*/ 15 | @speed2x: 2s; 16 | @speed3x: 1s; 17 | @speed4x: .5s; 18 | 19 | /*Global Mixins*/ 20 | .bounding-box(@width, @height){ 21 | width: @width; 22 | height: @height; 23 | display: inline-block; 24 | box-sizing: border-box; 25 | } 26 | 27 | .border(@borderWidth, @top, @right, @bottom, @left){ 28 | border-top: solid @borderWidth @top; 29 | border-right: solid @borderWidth @right; 30 | border-bottom: solid @borderWidth @bottom; 31 | border-left: solid @borderWidth @left; 32 | } 33 | 34 | /*Global Spinner*/ 35 | .cp-spinner{ 36 | .bounding-box(@boxSize, @boxSize); 37 | position: relative; 38 | } -------------------------------------------------------------------------------- /less/_heart.less: -------------------------------------------------------------------------------- 1 | /*Heart Spinner*/ 2 | .cp-heart{ 3 | animation: cp-heart-animate @speed2x ease-in-out infinite; 4 | } 5 | 6 | .cp-heart:before{ 7 | border-radius: @boxSize/4 @boxSize/4 0 0; 8 | content: " "; 9 | .bounding-box(@boxSize/2, @boxSize/4*3-1); 10 | background-color: @thirdColor; 11 | transform: rotate(-45deg); 12 | position: absolute; 13 | top: 0; 14 | left: @boxSize/6; 15 | } 16 | 17 | .cp-heart:after{ 18 | border-radius: @boxSize/4 @boxSize/4 0 0; 19 | content: " "; 20 | .bounding-box(@boxSize/2, @boxSize/4*3-1); 21 | background-color: @thirdColor; 22 | transform: rotate(45deg); 23 | position: absolute; 24 | top: 0; 25 | right: @boxSize/6; 26 | } 27 | 28 | /*Heart Spinner Animation*/ 29 | @keyframes cp-heart-animate{ 30 | 0% { 31 | transform: scale(.9); 32 | transform-origin: center; 33 | } 34 | 15%{ 35 | transform: scale(1.4); 36 | transform-origin: center; 37 | } 38 | 30%{ 39 | transform: scale(.9); 40 | transform-origin: center; 41 | } 42 | 45%{ 43 | transform: scale(1.4); 44 | transform-origin: center; 45 | } 46 | 60%, 100%{ 47 | transform: scale(.9); 48 | transform-origin: center; 49 | } 50 | } -------------------------------------------------------------------------------- /less/_hue.less: -------------------------------------------------------------------------------- 1 | /*Hue Spinner*/ 2 | .cp-hue{ 3 | .bounding-box(@boxSize/2, @boxSize/2); 4 | background: @primaryColor; 5 | border-radius: 50%; 6 | animation: cp-hue-animate @speed3x ease-in-out infinite; 7 | } 8 | .cp-hue:before{ 9 | border-radius: 0% @boxSize/4 @boxSize/4 0%; 10 | content: " "; 11 | .bounding-box(@boxSize/4, @boxSize/2); 12 | background: white; 13 | position: absolute; 14 | top: 0; 15 | right: 0; 16 | animation: cp-hue-animate-before @speed3x ease-in-out infinite; 17 | } 18 | 19 | /*Hue Spinner Animation*/ 20 | @keyframes cp-hue-animate{ 21 | 0%{ 22 | background: @primaryColor; 23 | } 24 | 25%{ 25 | background: @secondColor; 26 | } 27 | 50%{ 28 | background: @thirdColor; 29 | } 30 | 75%{ 31 | background: @fourthColor; 32 | } 33 | 100%{ 34 | background: @primaryColor; 35 | } 36 | } 37 | 38 | @keyframes cp-hue-animate-before{ 39 | 0%{ 40 | transform: rotateY(0deg); 41 | transform-origin: left center; 42 | opacity: .5; 43 | } 44 | 30%, 70%{ 45 | transform: rotateY(180deg); 46 | transform-origin: left center; 47 | opacity: .2; 48 | } 49 | 100%{ 50 | transform: rotateY(0deg); 51 | opacity: .5; 52 | } 53 | } -------------------------------------------------------------------------------- /less/_meter.less: -------------------------------------------------------------------------------- 1 | /*Meter Spinner*/ 2 | .cp-meter{ 3 | border-radius: 50%; 4 | .border(@boxSize/8, @firstColor, @firstColor ,@firstColor ,@firstColor); 5 | .bounding-box(@boxSize, @boxSize); 6 | } 7 | 8 | .cp-meter:before{ 9 | border-radius: @boxSize/16; 10 | content: " "; 11 | .bounding-box(@boxSize/8, @boxSize/4); 12 | background-color: @firstColor; 13 | position: absolute; 14 | top: ceil(@boxSize/10); 15 | left: @boxSize/3; 16 | transform-origin: center bottom; 17 | animation: cp-meter-animate-before @speed3x linear infinite; 18 | } 19 | 20 | /*Meter Spinner Animation*/ 21 | @keyframes cp-meter-animate-before{ 22 | 0% { 23 | transform: rotate(-45deg); 24 | } 25 | 100%{ 26 | transform: rotate(315deg); 27 | } 28 | } -------------------------------------------------------------------------------- /less/_morph.less: -------------------------------------------------------------------------------- 1 | /*Morph Spinner*/ 2 | .cp-morph{ 3 | .bounding-box(@boxSize, @boxSize); 4 | background: @firstColor; 5 | animation: cp-morph-animate @speed3x linear infinite; 6 | } 7 | 8 | /*Morph Spinner Animation*/ 9 | @keyframes cp-morph-animate{ 10 | 0%{ 11 | transform: rotate(0deg) scale(1); 12 | border-radius: 0%; 13 | background: @fourthColor; 14 | 15 | } 16 | 25%, 75%{ 17 | transform: rotate(180deg) scale(.4); 18 | border-radius: 50%; 19 | background: @firstColor; 20 | } 21 | 100%{ 22 | transform: rotate(360deg) scale(1); 23 | border-radius: 0%; 24 | background: @fourthColor; 25 | } 26 | } -------------------------------------------------------------------------------- /less/_pinwheel.less: -------------------------------------------------------------------------------- 1 | /*Pinwheel Spinner*/ 2 | .cp-pinwheel{ 3 | border-radius: 50%; 4 | .bounding-box(@boxSize, @boxSize); 5 | .border(@boxSize/2, @firstColor, @secondColor, @thirdColor, @fourthColor); 6 | animation: cp-pinwheel-animate @speed3x linear infinite; 7 | } 8 | 9 | /*Pinwheel Spinner Animation*/ 10 | @keyframes cp-pinwheel-animate{ 11 | 0%{ 12 | border-top-color: @firstColor; 13 | border-right-color: @secondColor; 14 | border-bottom-color: @thirdColor; 15 | border-left-color: @fourthColor; 16 | transform: rotate(0deg); 17 | } 18 | 25%{ 19 | border-top-color: @thirdColor; 20 | border-right-color: @fourthColor; 21 | border-bottom-color: @firstColor; 22 | border-left-color: @secondColor; 23 | } 24 | 50%{ 25 | border-top-color: @firstColor; 26 | border-right-color: @secondColor; 27 | border-bottom-color: @thirdColor; 28 | border-left-color: @fourthColor; 29 | } 30 | 75%{ 31 | border-top-color: @thirdColor; 32 | border-right-color: @fourthColor; 33 | border-bottom-color: @firstColor; 34 | border-left-color: @secondColor; 35 | } 36 | 100%{ 37 | border-top-color: @firstColor; 38 | border-right-color: @secondColor; 39 | border-bottom-color: @thirdColor; 40 | border-left-color: @fourthColor; 41 | transform: rotate(360deg); 42 | } 43 | 44 | } -------------------------------------------------------------------------------- /less/_round.less: -------------------------------------------------------------------------------- 1 | /*Round Spinner*/ 2 | .cp-round:before{ 3 | border-radius: 50%; 4 | content: " "; 5 | .bounding-box(@boxSize, @boxSize); 6 | .border(@boxSize/8, @bgColor, @bgColor, @bgColor, @bgColor); 7 | position: absolute; 8 | top: 0; 9 | left: 0; 10 | } 11 | 12 | .cp-round:after{ 13 | border-radius: 50%; 14 | content: " "; 15 | .bounding-box(@boxSize, @boxSize); 16 | .border(@boxSize/8, @primaryColor, @transparent, @transparent, @transparent); 17 | position: absolute; 18 | top: 0; 19 | left: 0; 20 | animation: cp-round-animate @speed3x ease-in-out infinite; 21 | } 22 | 23 | /*Round Spinner Animation*/ 24 | 25 | @keyframes cp-round-animate{ 26 | 0%{ 27 | transform: rotate(0deg); 28 | } 29 | 100%{ 30 | transform: rotate(360deg); 31 | } 32 | } -------------------------------------------------------------------------------- /less/_skeleton.less: -------------------------------------------------------------------------------- 1 | /*Skeleton Spinner*/ 2 | .cp-skeleton{ 3 | border-radius: 50%; 4 | .border(@boxSize/8, @primaryColor, @transparent, @transparent, @transparent); 5 | animation: cp-skeleton-animate @speed3x linear infinite; 6 | } 7 | .cp-skeleton:before{ 8 | border-radius: 50%; 9 | content: " "; 10 | .bounding-box(@boxSize, @boxSize); 11 | .border(@boxSize/8, @transparent, @transparent, @transparent, @primaryColor); 12 | position: absolute; 13 | top: -(@boxSize/8); 14 | left: -(@boxSize/8); 15 | transform: rotateZ(-30deg); 16 | } 17 | .cp-skeleton:after{ 18 | border-radius: 50%; 19 | content: " "; 20 | .bounding-box(@boxSize, @boxSize); 21 | .border(@boxSize/8, @transparent, @primaryColor, @transparent, @transparent); 22 | position: absolute; 23 | top: -(@boxSize/8); 24 | right: -(@boxSize/8); 25 | transform: rotateZ(30deg); 26 | } 27 | 28 | /*Skeleton Spinner Animation*/ 29 | @keyframes cp-skeleton-animate{ 30 | 0%{ 31 | transform: rotate(0deg); 32 | opacity: 1; 33 | } 34 | 50%{ 35 | opacity: .7; 36 | } 37 | 100%{ 38 | transform: rotate(360deg); 39 | opacity: 1; 40 | } 41 | } -------------------------------------------------------------------------------- /less/csspin-balls.less: -------------------------------------------------------------------------------- 1 | /*Only Spinner Balls*/ 2 | @import url("_globals.less"); 3 | @import url("_balls.less"); -------------------------------------------------------------------------------- /less/csspin-boxes.less: -------------------------------------------------------------------------------- 1 | /*Only Spinner Boxes*/ 2 | @import url("_globals.less"); 3 | @import url("_boxes.less"); -------------------------------------------------------------------------------- /less/csspin-bubble.less: -------------------------------------------------------------------------------- 1 | /*Only Spinner Bubble*/ 2 | @import url("_globals.less"); 3 | @import url("_bubble.less"); -------------------------------------------------------------------------------- /less/csspin-eclipse.less: -------------------------------------------------------------------------------- 1 | /*Only Spinner Eclipse*/ 2 | @import url("_globals.less"); 3 | @import url("_eclipse.less"); -------------------------------------------------------------------------------- /less/csspin-flip.less: -------------------------------------------------------------------------------- 1 | /*Only Spinner Flip*/ 2 | @import url("_globals.less"); 3 | @import url("_flip.less"); -------------------------------------------------------------------------------- /less/csspin-heart.less: -------------------------------------------------------------------------------- 1 | /*Only Spinner Heart*/ 2 | @import url("_globals.less"); 3 | @import url("_heart.less"); -------------------------------------------------------------------------------- /less/csspin-hue.less: -------------------------------------------------------------------------------- 1 | /*Only Spinner Hue*/ 2 | @import url("_globals.less"); 3 | @import url("_hue.less"); -------------------------------------------------------------------------------- /less/csspin-meter.less: -------------------------------------------------------------------------------- 1 | /*Only Spinner Meter*/ 2 | @import url("_globals.less"); 3 | @import url("_meter.less"); -------------------------------------------------------------------------------- /less/csspin-morph.less: -------------------------------------------------------------------------------- 1 | /*Only Spinner Morph*/ 2 | @import url("_globals.less"); 3 | @import url("_morph.less"); -------------------------------------------------------------------------------- /less/csspin-pinwheel.less: -------------------------------------------------------------------------------- 1 | /*Only Spinner Pinwheel*/ 2 | @import url("_globals.less"); 3 | @import url("_pinwheel.less"); -------------------------------------------------------------------------------- /less/csspin-round.less: -------------------------------------------------------------------------------- 1 | /*Only Spinner Round*/ 2 | @import url("_globals.less"); 3 | @import url("_round.less"); -------------------------------------------------------------------------------- /less/csspin-skeleton.less: -------------------------------------------------------------------------------- 1 | /*Only Spinner Skeleton*/ 2 | @import url("_globals.less"); 3 | @import url("_skeleton.less"); -------------------------------------------------------------------------------- /less/csspin.less: -------------------------------------------------------------------------------- 1 | @import url("_globals.less"); 2 | @import url("_round.less"); 3 | @import url("_pinwheel.less"); 4 | @import url("_balls.less"); 5 | @import url("_bubble.less"); 6 | @import url("_flip.less"); 7 | @import url("_hue.less"); 8 | @import url("_skeleton.less"); 9 | @import url("_eclipse.less"); 10 | @import url("_boxes.less"); 11 | @import url("_morph.less"); 12 | @import url("_heart.less"); 13 | @import url("_meter.less"); -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | .cp-wrapper{ 2 | text-align: center; 3 | margin: 45px auto; 4 | font-family: 'Roboto Condensed', sans-serif; 5 | } 6 | h1{ 7 | color: #00ACC1; 8 | font-size: 2.8em; 9 | } 10 | h1 span{ 11 | color: #00838F; 12 | } 13 | p{ 14 | color: #4a5b6c; 15 | font-size: 1.2em; 16 | } 17 | p.credits{ 18 | font-size: 1em; 19 | } 20 | p.credits a{ 21 | margin: 0px; 22 | } 23 | a:link, a:active, a:visited{ 24 | color: #3F51B5; 25 | text-decoration: none; 26 | font-size: 1em; 27 | text-transform: uppercase; 28 | border-bottom: dashed 1px #3F51B5; 29 | margin: 0px 10px; 30 | } 31 | a:hover{ 32 | border-bottom: none; 33 | } 34 | .cp-spinners{ 35 | margin: 10px auto; 36 | } 37 | .cp-spinner-block{ 38 | display: inline-block; 39 | width: 40%; 40 | margin: 40px 20px; 41 | } 42 | .cp-spinner-block span{ 43 | color: #4a5b6c; 44 | display: block; 45 | padding: 5px 0px; 46 | } 47 | .cp-spinner-block pre{ 48 | font-size: .75em; 49 | background-color: #f0f0f0; 50 | padding: 4px 7px; 51 | border-radius: 2px; 52 | font-family: "Lucida Console", Monaco, monospace; 53 | display: inline-block; 54 | white-space: pre-wrap; 55 | } 56 | 57 | @media only screen and (max-width: 1024px){ 58 | .cp-wrapper{ 59 | width: 100%; 60 | } 61 | .cp-spinner-block{ 62 | display: block; 63 | width: 90%; 64 | margin: 40px 5%; 65 | } 66 | } 67 | @media only screen and (min-width: 1025px) and (max-width: 1400px){ 68 | .cp-wrapper{ 69 | width: 70%; 70 | } 71 | .cp-spinner-block{ 72 | margin: 40px auto; 73 | } 74 | } 75 | @media only screen and (min-width: 1500px){ 76 | .cp-wrapper{ 77 | width: 90%; 78 | } 79 | .cp-spinner-block{ 80 | display: inline-block; 81 | width: 30%; 82 | margin: 40px 20px; 83 | } 84 | } 85 | @media only screen and (min-width: 1700px){ 86 | .cp-wrapper{ 87 | width: 70%; 88 | } 89 | .cp-spinner-block{ 90 | display: inline-block; 91 | width: 30%; 92 | margin: 40px 20px; 93 | } 94 | } --------------------------------------------------------------------------------