prvi
This commit is contained in:
David Štaleker
57
ZpcBulletinBoard/wwwroot/lib/spinkit/CHANGELOG.md
Normal file
57
ZpcBulletinBoard/wwwroot/lib/spinkit/CHANGELOG.md
Normal file
@@ -0,0 +1,57 @@
|
||||
# 2.0.1
|
||||
|
||||
* Fixed: Chase spinner's HTML snippet now has the correct number of children
|
||||
|
||||
# 2.0.0
|
||||
|
||||
* New: Added examples.html, with an overview of all spinners
|
||||
* New: Added a brand new chase spinner
|
||||
* New: Added spinkit.min.css
|
||||
* Fixed: `inline-block` is no longed used to position any spinners (decoupling spacing from any potential font effects)
|
||||
* Changed: Most spinners now have more distinct and shorter names
|
||||
* Changed: No positioning is now applied by default on any of the spinners (center the spinner with the utility class `sk-center`)
|
||||
* Changed: All elements now only have one single class
|
||||
* Changed: No more dependencies. gulp, npm, node, etc. is not required to build this project. There's nothing to build
|
||||
* Changed: No more SCSS. All configuration is now done through CSS vars
|
||||
* Fixed: All keyframe animations are now named after the elements/classes that are using them
|
||||
|
||||
# 1.2.5
|
||||
|
||||
* Fixed: Add folding cube spinner (11) to combined CSS file
|
||||
|
||||
# 1.2.4
|
||||
|
||||
* Fixed: Borked gulp script (#106)
|
||||
* Fixed: Moved changes made in CSS, to SCSS
|
||||
|
||||
# 1.2.3
|
||||
|
||||
* Fixed: More exact (33% -> 33.33%) cube dimensions for cube grid spinner
|
||||
* Fixed: Comment format for HTML inside CSS, for easier copy and pasting (removed * at the beginning of each row)
|
||||
|
||||
# 1.2.2
|
||||
|
||||
* Fixed: Use variable for spinner size (defaults to 40px)
|
||||
|
||||
# 1.2.1
|
||||
|
||||
* Fixed: Two spinners were slightly broken on Android
|
||||
* Changed: Bumped default top and bottom margin to 40px
|
||||
|
||||
# 1.2.0
|
||||
|
||||
* Added: Folding cube spinner
|
||||
* Fixed: Lowercase in package name
|
||||
|
||||
# 1.1.0
|
||||
|
||||
* Removed one spinner (circle with rotating circle, not polished enough)
|
||||
* Cleaned up the CSS
|
||||
* Added more SCSS variables to more easily customize spinners
|
||||
* Introduced SCSS `@for` loops to more easily change timing of spinners
|
||||
* Removed moot `version` property from bower.json
|
||||
|
||||
|
||||
# 1.0.1
|
||||
|
||||
* Fix: Missed sass variables for background-color
|
||||
20
ZpcBulletinBoard/wwwroot/lib/spinkit/LICENSE
Normal file
20
ZpcBulletinBoard/wwwroot/lib/spinkit/LICENSE
Normal file
@@ -0,0 +1,20 @@
|
||||
The MIT License (MIT)
|
||||
|
||||
Copyright (c) 2019 Tobias Ahlin
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy of
|
||||
this software and associated documentation files (the "Software"), to deal in
|
||||
the Software without restriction, including without limitation the rights to
|
||||
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
|
||||
the Software, and to permit persons to whom the Software is furnished to do so,
|
||||
subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
|
||||
FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
|
||||
COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
|
||||
IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
|
||||
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
||||
206
ZpcBulletinBoard/wwwroot/lib/spinkit/README.md
Normal file
206
ZpcBulletinBoard/wwwroot/lib/spinkit/README.md
Normal file
@@ -0,0 +1,206 @@
|
||||
# [SpinKit](http://tobiasahlin.com/spinkit/)
|
||||
|
||||
Simple loading spinners animated with CSS. See [demo](http://tobiasahlin.com/spinkit/). SpinKit only uses (`transform` and `opacity`) CSS animations to create smooth and easily customizable animations.
|
||||
|
||||
## Usage
|
||||
|
||||
- Add `spinkit.css` or `spinkit.min.css` to your project (or copy-paste the CSS that you need for your spinner—there are no dependencies between spinners, no shared classes, and no shared animations, etc, so it should be fairly straight-forward to extract only the code that you need)
|
||||
- Add a spinner to your project by copy-pasting HTML from `spinkit.css` or `examples.html`
|
||||
- Add the `sk-center` utility class to the spinner to center it (it sets `margin` to `auto`)
|
||||
- By default, the `width` and `height` of all spinners are set to `40px`. `background-color` is set to `#333`.
|
||||
- Configure the spinner by overwriting the CSS variables, primarily `--sk-size` (spinner width & height) and `--sk-color` (spinner color). If you need broader browser support, remove the CSS variables.
|
||||
|
||||
You can include SpinKit to your project with `bower`:
|
||||
|
||||
```bash
|
||||
$ bower install spinkit
|
||||
```
|
||||
|
||||
or npm:
|
||||
|
||||
```bash
|
||||
$ npm install spinkit
|
||||
```
|
||||
|
||||
## Spinners
|
||||
|
||||
Given that you have included `spinkit.min.css` in your project, these snippets will produce the different spinners:
|
||||
|
||||
### Plane
|
||||
|
||||
```html
|
||||
<div class="sk-plane"></div>
|
||||
```
|
||||
|
||||
### Chase
|
||||
|
||||
```html
|
||||
<div class="sk-chase">
|
||||
<div class="sk-chase-dot"></div>
|
||||
<div class="sk-chase-dot"></div>
|
||||
<div class="sk-chase-dot"></div>
|
||||
<div class="sk-chase-dot"></div>
|
||||
<div class="sk-chase-dot"></div>
|
||||
<div class="sk-chase-dot"></div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Bounce
|
||||
|
||||
```html
|
||||
<div class="sk-bounce">
|
||||
<div class="sk-bounce-dot"></div>
|
||||
<div class="sk-bounce-dot"></div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Wave
|
||||
|
||||
```html
|
||||
<div class="sk-wave">
|
||||
<div class="sk-wave-rect"></div>
|
||||
<div class="sk-wave-rect"></div>
|
||||
<div class="sk-wave-rect"></div>
|
||||
<div class="sk-wave-rect"></div>
|
||||
<div class="sk-wave-rect"></div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Pulse
|
||||
|
||||
```html
|
||||
<div class="sk-pulse"></div>
|
||||
```
|
||||
|
||||
### Flow
|
||||
|
||||
```html
|
||||
<div class="sk-flow">
|
||||
<div class="sk-flow-dot"></div>
|
||||
<div class="sk-flow-dot"></div>
|
||||
<div class="sk-flow-dot"></div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Swing
|
||||
|
||||
```html
|
||||
<div class="sk-swing">
|
||||
<div class="sk-swing-dot"></div>
|
||||
<div class="sk-swing-dot"></div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Circle
|
||||
|
||||
```html
|
||||
<div class="sk-circle">
|
||||
<div class="sk-circle-dot"></div>
|
||||
<div class="sk-circle-dot"></div>
|
||||
<div class="sk-circle-dot"></div>
|
||||
<div class="sk-circle-dot"></div>
|
||||
<div class="sk-circle-dot"></div>
|
||||
<div class="sk-circle-dot"></div>
|
||||
<div class="sk-circle-dot"></div>
|
||||
<div class="sk-circle-dot"></div>
|
||||
<div class="sk-circle-dot"></div>
|
||||
<div class="sk-circle-dot"></div>
|
||||
<div class="sk-circle-dot"></div>
|
||||
<div class="sk-circle-dot"></div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Circle Fade
|
||||
|
||||
```html
|
||||
<div class="sk-circle-fade">
|
||||
<div class="sk-circle-fade-dot"></div>
|
||||
<div class="sk-circle-fade-dot"></div>
|
||||
<div class="sk-circle-fade-dot"></div>
|
||||
<div class="sk-circle-fade-dot"></div>
|
||||
<div class="sk-circle-fade-dot"></div>
|
||||
<div class="sk-circle-fade-dot"></div>
|
||||
<div class="sk-circle-fade-dot"></div>
|
||||
<div class="sk-circle-fade-dot"></div>
|
||||
<div class="sk-circle-fade-dot"></div>
|
||||
<div class="sk-circle-fade-dot"></div>
|
||||
<div class="sk-circle-fade-dot"></div>
|
||||
<div class="sk-circle-fade-dot"></div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Grid
|
||||
|
||||
```html
|
||||
<div class="sk-grid">
|
||||
<div class="sk-grid-cube"></div>
|
||||
<div class="sk-grid-cube"></div>
|
||||
<div class="sk-grid-cube"></div>
|
||||
<div class="sk-grid-cube"></div>
|
||||
<div class="sk-grid-cube"></div>
|
||||
<div class="sk-grid-cube"></div>
|
||||
<div class="sk-grid-cube"></div>
|
||||
<div class="sk-grid-cube"></div>
|
||||
<div class="sk-grid-cube"></div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Fold
|
||||
|
||||
```html
|
||||
<div class="sk-fold">
|
||||
<div class="sk-fold-cube"></div>
|
||||
<div class="sk-fold-cube"></div>
|
||||
<div class="sk-fold-cube"></div>
|
||||
<div class="sk-fold-cube"></div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Wander
|
||||
|
||||
```html
|
||||
<div class="sk-wander">
|
||||
<div class="sk-wander-cube"></div>
|
||||
<div class="sk-wander-cube"></div>
|
||||
<div class="sk-wander-cube"></div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Web browser compatibility
|
||||
|
||||
SpinKit uses CSS animations and variables:
|
||||
|
||||
- CSS keyframes animations [are at +96.5% global support](http://caniuse.com/#feat=css-animation)
|
||||
- CSS variables [are at +91.8% global support](https://caniuse.com/#feat=css-variables)
|
||||
|
||||
### Implementing a fallback spinner
|
||||
|
||||
How do you know if you need to provide a fallback? You can check for animation support with [Modernizr](http://modernizr.com), or manually check for the `animation` property, and replace the spinner with a GIF if it's not supported:
|
||||
|
||||
```javascript
|
||||
function browserSupportsCSSProperty(propertyName) {
|
||||
var elm = document.createElement('div');
|
||||
propertyName = propertyName.toLowerCase();
|
||||
|
||||
if (elm.style[propertyName] != undefined)
|
||||
return true;
|
||||
|
||||
var propertyNameCapital = propertyName.charAt(0).toUpperCase() + propertyName.substr(1),
|
||||
domPrefixes = 'Webkit Moz ms O'.split(' ');
|
||||
|
||||
for (var i = 0; i < domPrefixes.length; i++) {
|
||||
if (elm.style[domPrefixes[i] + propertyNameCapital] != undefined)
|
||||
return true;
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
```
|
||||
|
||||
Use it to check for `animation` support:
|
||||
|
||||
```javascript
|
||||
if (!browserSupportsCSSProperty('animation')) {
|
||||
// fallback…
|
||||
}
|
||||
```
|
||||
19
ZpcBulletinBoard/wwwroot/lib/spinkit/bower.json
Normal file
19
ZpcBulletinBoard/wwwroot/lib/spinkit/bower.json
Normal file
@@ -0,0 +1,19 @@
|
||||
{
|
||||
"name": "SpinKit",
|
||||
"homepage": "https://github.com/tobiasahlin/SpinKit",
|
||||
"authors": [
|
||||
"Tobias Ahlin"
|
||||
],
|
||||
"description": "A collection of loading indicators animated with CSS",
|
||||
"main": "css/spinkit.css",
|
||||
"keywords": [
|
||||
"css",
|
||||
"scss",
|
||||
"web"
|
||||
],
|
||||
"license": "MIT",
|
||||
"ignore": [
|
||||
"**/.*",
|
||||
"node_modules"
|
||||
]
|
||||
}
|
||||
133
ZpcBulletinBoard/wwwroot/lib/spinkit/examples.html
Normal file
133
ZpcBulletinBoard/wwwroot/lib/spinkit/examples.html
Normal file
@@ -0,0 +1,133 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>SpinKit Examples</title>
|
||||
<link rel="stylesheet" type="text/css" href="spinkit.css">
|
||||
<style>
|
||||
.example {
|
||||
margin: 50px 100px;
|
||||
padding: 100px;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="example">
|
||||
<div class="sk-plane"></div>
|
||||
</div>
|
||||
|
||||
<div class="example">
|
||||
<div class="sk-chase">
|
||||
<div class="sk-chase-dot"></div>
|
||||
<div class="sk-chase-dot"></div>
|
||||
<div class="sk-chase-dot"></div>
|
||||
<div class="sk-chase-dot"></div>
|
||||
<div class="sk-chase-dot"></div>
|
||||
<div class="sk-chase-dot"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="example">
|
||||
<div class="sk-bounce">
|
||||
<div class="sk-bounce-dot"></div>
|
||||
<div class="sk-bounce-dot"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="example">
|
||||
<div class="sk-wave">
|
||||
<div class="sk-wave-rect"></div>
|
||||
<div class="sk-wave-rect"></div>
|
||||
<div class="sk-wave-rect"></div>
|
||||
<div class="sk-wave-rect"></div>
|
||||
<div class="sk-wave-rect"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="example">
|
||||
<div class="sk-pulse"></div>
|
||||
</div>
|
||||
|
||||
<div class="example">
|
||||
<div class="sk-flow">
|
||||
<div class="sk-flow-dot"></div>
|
||||
<div class="sk-flow-dot"></div>
|
||||
<div class="sk-flow-dot"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="example">
|
||||
<div class="sk-swing">
|
||||
<div class="sk-swing-dot"></div>
|
||||
<div class="sk-swing-dot"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="example">
|
||||
<div class="sk-circle">
|
||||
<div class="sk-circle-dot"></div>
|
||||
<div class="sk-circle-dot"></div>
|
||||
<div class="sk-circle-dot"></div>
|
||||
<div class="sk-circle-dot"></div>
|
||||
<div class="sk-circle-dot"></div>
|
||||
<div class="sk-circle-dot"></div>
|
||||
<div class="sk-circle-dot"></div>
|
||||
<div class="sk-circle-dot"></div>
|
||||
<div class="sk-circle-dot"></div>
|
||||
<div class="sk-circle-dot"></div>
|
||||
<div class="sk-circle-dot"></div>
|
||||
<div class="sk-circle-dot"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="example">
|
||||
<div class="sk-circle-fade">
|
||||
<div class="sk-circle-fade-dot"></div>
|
||||
<div class="sk-circle-fade-dot"></div>
|
||||
<div class="sk-circle-fade-dot"></div>
|
||||
<div class="sk-circle-fade-dot"></div>
|
||||
<div class="sk-circle-fade-dot"></div>
|
||||
<div class="sk-circle-fade-dot"></div>
|
||||
<div class="sk-circle-fade-dot"></div>
|
||||
<div class="sk-circle-fade-dot"></div>
|
||||
<div class="sk-circle-fade-dot"></div>
|
||||
<div class="sk-circle-fade-dot"></div>
|
||||
<div class="sk-circle-fade-dot"></div>
|
||||
<div class="sk-circle-fade-dot"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="example">
|
||||
<div class="sk-grid">
|
||||
<div class="sk-grid-cube"></div>
|
||||
<div class="sk-grid-cube"></div>
|
||||
<div class="sk-grid-cube"></div>
|
||||
<div class="sk-grid-cube"></div>
|
||||
<div class="sk-grid-cube"></div>
|
||||
<div class="sk-grid-cube"></div>
|
||||
<div class="sk-grid-cube"></div>
|
||||
<div class="sk-grid-cube"></div>
|
||||
<div class="sk-grid-cube"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="example">
|
||||
<div class="sk-fold">
|
||||
<div class="sk-fold-cube"></div>
|
||||
<div class="sk-fold-cube"></div>
|
||||
<div class="sk-fold-cube"></div>
|
||||
<div class="sk-fold-cube"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="example">
|
||||
<div class="sk-wander">
|
||||
<div class="sk-wander-cube"></div>
|
||||
<div class="sk-wander-cube"></div>
|
||||
<div class="sk-wander-cube"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
25
ZpcBulletinBoard/wwwroot/lib/spinkit/package.json
Normal file
25
ZpcBulletinBoard/wwwroot/lib/spinkit/package.json
Normal file
@@ -0,0 +1,25 @@
|
||||
{
|
||||
"name": "spinkit",
|
||||
"version": "2.0.1",
|
||||
"description": "A collection of loading indicators animated with CSS",
|
||||
"keywords": [
|
||||
"css",
|
||||
"spinkit",
|
||||
"spinner",
|
||||
"loading",
|
||||
"ui"
|
||||
],
|
||||
"scripts": {
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/tobiasahlin/SpinKit.git"
|
||||
},
|
||||
"author": "Tobias Ahlin Bjerrome",
|
||||
"license": "MIT",
|
||||
"bugs": {
|
||||
"url": "https://github.com/tobiasahlin/SpinKit/issues"
|
||||
},
|
||||
"homepage": "https://github.com/tobiasahlin/SpinKit"
|
||||
}
|
||||
575
ZpcBulletinBoard/wwwroot/lib/spinkit/spinkit.css
Normal file
575
ZpcBulletinBoard/wwwroot/lib/spinkit/spinkit.css
Normal file
@@ -0,0 +1,575 @@
|
||||
/* Config */
|
||||
:root {
|
||||
--sk-size: 40px;
|
||||
--sk-color: #333;
|
||||
}
|
||||
|
||||
|
||||
/* Utility class for centering */
|
||||
.sk-center { margin: auto; }
|
||||
|
||||
|
||||
/* Plane
|
||||
|
||||
<div class="sk-plane"></div>
|
||||
*/
|
||||
.sk-plane {
|
||||
width: var(--sk-size);
|
||||
height: var(--sk-size);
|
||||
background-color: var(--sk-color);
|
||||
animation: sk-plane 1.2s infinite ease-in-out;
|
||||
}
|
||||
|
||||
@keyframes sk-plane {
|
||||
0% {
|
||||
transform: perspective(120px) rotateX(0deg) rotateY(0deg);
|
||||
} 50% {
|
||||
transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
|
||||
} 100% {
|
||||
transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Chase
|
||||
|
||||
<div class="sk-chase">
|
||||
<div class="sk-chase-dot"></div>
|
||||
<div class="sk-chase-dot"></div>
|
||||
<div class="sk-chase-dot"></div>
|
||||
<div class="sk-chase-dot"></div>
|
||||
<div class="sk-chase-dot"></div>
|
||||
<div class="sk-chase-dot"></div>
|
||||
</div>
|
||||
*/
|
||||
.sk-chase {
|
||||
width: var(--sk-size);
|
||||
height: var(--sk-size);
|
||||
position: relative;
|
||||
animation: sk-chase 2.5s infinite linear both;
|
||||
}
|
||||
|
||||
.sk-chase-dot {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
animation: sk-chase-dot 2.0s infinite ease-in-out both;
|
||||
}
|
||||
|
||||
.sk-chase-dot:before {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 25%;
|
||||
height: 25%;
|
||||
background-color: var(--sk-color);
|
||||
border-radius: 100%;
|
||||
animation: sk-chase-dot-before 2.0s infinite ease-in-out both;
|
||||
}
|
||||
|
||||
.sk-chase-dot:nth-child(1) { animation-delay: -1.1s; }
|
||||
.sk-chase-dot:nth-child(2) { animation-delay: -1.0s; }
|
||||
.sk-chase-dot:nth-child(3) { animation-delay: -0.9s; }
|
||||
.sk-chase-dot:nth-child(4) { animation-delay: -0.8s; }
|
||||
.sk-chase-dot:nth-child(5) { animation-delay: -0.7s; }
|
||||
.sk-chase-dot:nth-child(6) { animation-delay: -0.6s; }
|
||||
.sk-chase-dot:nth-child(1):before { animation-delay: -1.1s; }
|
||||
.sk-chase-dot:nth-child(2):before { animation-delay: -1.0s; }
|
||||
.sk-chase-dot:nth-child(3):before { animation-delay: -0.9s; }
|
||||
.sk-chase-dot:nth-child(4):before { animation-delay: -0.8s; }
|
||||
.sk-chase-dot:nth-child(5):before { animation-delay: -0.7s; }
|
||||
.sk-chase-dot:nth-child(6):before { animation-delay: -0.6s; }
|
||||
|
||||
@keyframes sk-chase {
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
@keyframes sk-chase-dot {
|
||||
80%, 100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
@keyframes sk-chase-dot-before {
|
||||
50% {
|
||||
transform: scale(0.4);
|
||||
} 100%, 0% {
|
||||
transform: scale(1.0);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Bounce
|
||||
|
||||
<div class="sk-bounce">
|
||||
<div class="sk-bounce-dot"></div>
|
||||
<div class="sk-bounce-dot"></div>
|
||||
</div>
|
||||
*/
|
||||
.sk-bounce {
|
||||
width: var(--sk-size);
|
||||
height: var(--sk-size);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.sk-bounce-dot {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
background-color: var(--sk-color);
|
||||
opacity: 0.6;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
animation: sk-bounce 2s infinite cubic-bezier(0.455, 0.03, 0.515, 0.955);
|
||||
}
|
||||
|
||||
.sk-bounce-dot:nth-child(2) { animation-delay: -1.0s; }
|
||||
|
||||
@keyframes sk-bounce {
|
||||
0%, 100% {
|
||||
transform: scale(0);
|
||||
} 45%, 55% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Wave
|
||||
|
||||
<div class="sk-wave">
|
||||
<div class="sk-wave-rect"></div>
|
||||
<div class="sk-wave-rect"></div>
|
||||
<div class="sk-wave-rect"></div>
|
||||
<div class="sk-wave-rect"></div>
|
||||
<div class="sk-wave-rect"></div>
|
||||
</div>
|
||||
*/
|
||||
.sk-wave {
|
||||
width: var(--sk-size);
|
||||
height: var(--sk-size);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.sk-wave-rect {
|
||||
background-color: var(--sk-color);
|
||||
height: 100%;
|
||||
width: 15%;
|
||||
animation: sk-wave 1.2s infinite ease-in-out;
|
||||
}
|
||||
|
||||
.sk-wave-rect:nth-child(1) { animation-delay: -1.2s; }
|
||||
.sk-wave-rect:nth-child(2) { animation-delay: -1.1s; }
|
||||
.sk-wave-rect:nth-child(3) { animation-delay: -1.0s; }
|
||||
.sk-wave-rect:nth-child(4) { animation-delay: -0.9s; }
|
||||
.sk-wave-rect:nth-child(5) { animation-delay: -0.8s; }
|
||||
|
||||
@keyframes sk-wave {
|
||||
0%, 40%, 100% {
|
||||
transform: scaleY(0.4);
|
||||
} 20% {
|
||||
transform: scaleY(1);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Pulse
|
||||
|
||||
<div class="sk-pulse"></div>
|
||||
*/
|
||||
.sk-pulse {
|
||||
width: var(--sk-size);
|
||||
height: var(--sk-size);
|
||||
background-color: var(--sk-color);
|
||||
border-radius: 100%;
|
||||
animation: sk-pulse 1.2s infinite cubic-bezier(0.455, 0.03, 0.515, 0.955);
|
||||
}
|
||||
|
||||
@keyframes sk-pulse {
|
||||
0% {
|
||||
transform: scale(0);
|
||||
} 100% {
|
||||
transform: scale(1);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Flow
|
||||
|
||||
<div class="sk-flow">
|
||||
<div class="sk-flow-dot"></div>
|
||||
<div class="sk-flow-dot"></div>
|
||||
<div class="sk-flow-dot"></div>
|
||||
</div>
|
||||
*/
|
||||
.sk-flow {
|
||||
width: calc(var(--sk-size) * 1.3);
|
||||
height: calc(var(--sk-size) * 1.3);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.sk-flow-dot {
|
||||
width: 25%;
|
||||
height: 25%;
|
||||
background-color: var(--sk-color);
|
||||
border-radius: 50%;
|
||||
animation: sk-flow 1.4s cubic-bezier(0.455, 0.03, 0.515, 0.955) 0s infinite both;
|
||||
}
|
||||
|
||||
.sk-flow-dot:nth-child(1) { animation-delay: -0.30s; }
|
||||
.sk-flow-dot:nth-child(2) { animation-delay: -0.15s; }
|
||||
|
||||
@keyframes sk-flow {
|
||||
0%, 80%, 100% {
|
||||
transform: scale(0.3); }
|
||||
40% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Swing
|
||||
|
||||
<div class="sk-swing">
|
||||
<div class="sk-swing-dot"></div>
|
||||
<div class="sk-swing-dot"></div>
|
||||
</div>
|
||||
*/
|
||||
.sk-swing {
|
||||
width: var(--sk-size);
|
||||
height: var(--sk-size);
|
||||
position: relative;
|
||||
animation: sk-swing 1.8s infinite linear;
|
||||
}
|
||||
|
||||
.sk-swing-dot {
|
||||
width: 45%;
|
||||
height: 45%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: auto;
|
||||
background-color: var(--sk-color);
|
||||
border-radius: 100%;
|
||||
animation: sk-swing-dot 2s infinite ease-in-out;
|
||||
}
|
||||
|
||||
.sk-swing-dot:nth-child(2) {
|
||||
top: auto;
|
||||
bottom: 0;
|
||||
animation-delay: -1s;
|
||||
}
|
||||
|
||||
@keyframes sk-swing {
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes sk-swing-dot {
|
||||
0%, 100% {
|
||||
transform: scale(0.2); }
|
||||
50% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Circle
|
||||
|
||||
<div class="sk-circle">
|
||||
<div class="sk-circle-dot"></div>
|
||||
<div class="sk-circle-dot"></div>
|
||||
<div class="sk-circle-dot"></div>
|
||||
<div class="sk-circle-dot"></div>
|
||||
<div class="sk-circle-dot"></div>
|
||||
<div class="sk-circle-dot"></div>
|
||||
<div class="sk-circle-dot"></div>
|
||||
<div class="sk-circle-dot"></div>
|
||||
<div class="sk-circle-dot"></div>
|
||||
<div class="sk-circle-dot"></div>
|
||||
<div class="sk-circle-dot"></div>
|
||||
<div class="sk-circle-dot"></div>
|
||||
</div>
|
||||
*/
|
||||
.sk-circle {
|
||||
width: var(--sk-size);
|
||||
height: var(--sk-size);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.sk-circle-dot {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.sk-circle-dot:before {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 15%;
|
||||
height: 15%;
|
||||
background-color: var(--sk-color);
|
||||
border-radius: 100%;
|
||||
animation: sk-circle 1.2s infinite ease-in-out both;
|
||||
}
|
||||
|
||||
.sk-circle-dot:nth-child(1) { transform: rotate(30deg); }
|
||||
.sk-circle-dot:nth-child(2) { transform: rotate(60deg); }
|
||||
.sk-circle-dot:nth-child(3) { transform: rotate(90deg); }
|
||||
.sk-circle-dot:nth-child(4) { transform: rotate(120deg); }
|
||||
.sk-circle-dot:nth-child(5) { transform: rotate(150deg); }
|
||||
.sk-circle-dot:nth-child(6) { transform: rotate(180deg); }
|
||||
.sk-circle-dot:nth-child(7) { transform: rotate(210deg); }
|
||||
.sk-circle-dot:nth-child(8) { transform: rotate(240deg); }
|
||||
.sk-circle-dot:nth-child(9) { transform: rotate(270deg); }
|
||||
.sk-circle-dot:nth-child(10) { transform: rotate(300deg); }
|
||||
.sk-circle-dot:nth-child(11) { transform: rotate(330deg); }
|
||||
.sk-circle-dot:nth-child(1):before { animation-delay: -1.1s; }
|
||||
.sk-circle-dot:nth-child(2):before { animation-delay: -1s; }
|
||||
.sk-circle-dot:nth-child(3):before { animation-delay: -0.9s; }
|
||||
.sk-circle-dot:nth-child(4):before { animation-delay: -0.8s; }
|
||||
.sk-circle-dot:nth-child(5):before { animation-delay: -0.7s; }
|
||||
.sk-circle-dot:nth-child(6):before { animation-delay: -0.6s; }
|
||||
.sk-circle-dot:nth-child(7):before { animation-delay: -0.5s; }
|
||||
.sk-circle-dot:nth-child(8):before { animation-delay: -0.4s; }
|
||||
.sk-circle-dot:nth-child(9):before { animation-delay: -0.3s; }
|
||||
.sk-circle-dot:nth-child(10):before { animation-delay: -0.2s; }
|
||||
.sk-circle-dot:nth-child(11):before { animation-delay: -0.1s; }
|
||||
|
||||
@keyframes sk-circle {
|
||||
0%, 80%, 100% {
|
||||
transform: scale(0); }
|
||||
40% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Circle Fade
|
||||
|
||||
<div class="sk-circle-fade">
|
||||
<div class="sk-circle-fade-dot"></div>
|
||||
<div class="sk-circle-fade-dot"></div>
|
||||
<div class="sk-circle-fade-dot"></div>
|
||||
<div class="sk-circle-fade-dot"></div>
|
||||
<div class="sk-circle-fade-dot"></div>
|
||||
<div class="sk-circle-fade-dot"></div>
|
||||
<div class="sk-circle-fade-dot"></div>
|
||||
<div class="sk-circle-fade-dot"></div>
|
||||
<div class="sk-circle-fade-dot"></div>
|
||||
<div class="sk-circle-fade-dot"></div>
|
||||
<div class="sk-circle-fade-dot"></div>
|
||||
<div class="sk-circle-fade-dot"></div>
|
||||
</div>
|
||||
*/
|
||||
.sk-circle-fade {
|
||||
width: var(--sk-size);
|
||||
height: var(--sk-size);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.sk-circle-fade-dot {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.sk-circle-fade-dot:before {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 15%;
|
||||
height: 15%;
|
||||
background-color: var(--sk-color);
|
||||
border-radius: 100%;
|
||||
animation: sk-circle-fade 1.2s infinite ease-in-out both;
|
||||
}
|
||||
|
||||
.sk-circle-fade-dot:nth-child(1) { transform: rotate(30deg); }
|
||||
.sk-circle-fade-dot:nth-child(2) { transform: rotate(60deg); }
|
||||
.sk-circle-fade-dot:nth-child(3) { transform: rotate(90deg); }
|
||||
.sk-circle-fade-dot:nth-child(4) { transform: rotate(120deg); }
|
||||
.sk-circle-fade-dot:nth-child(5) { transform: rotate(150deg); }
|
||||
.sk-circle-fade-dot:nth-child(6) { transform: rotate(180deg); }
|
||||
.sk-circle-fade-dot:nth-child(7) { transform: rotate(210deg); }
|
||||
.sk-circle-fade-dot:nth-child(8) { transform: rotate(240deg); }
|
||||
.sk-circle-fade-dot:nth-child(9) { transform: rotate(270deg); }
|
||||
.sk-circle-fade-dot:nth-child(10) { transform: rotate(300deg); }
|
||||
.sk-circle-fade-dot:nth-child(11) { transform: rotate(330deg); }
|
||||
.sk-circle-fade-dot:nth-child(1):before { animation-delay: -1.1s; }
|
||||
.sk-circle-fade-dot:nth-child(2):before { animation-delay: -1.0s; }
|
||||
.sk-circle-fade-dot:nth-child(3):before { animation-delay: -0.9s; }
|
||||
.sk-circle-fade-dot:nth-child(4):before { animation-delay: -0.8s; }
|
||||
.sk-circle-fade-dot:nth-child(5):before { animation-delay: -0.7s; }
|
||||
.sk-circle-fade-dot:nth-child(6):before { animation-delay: -0.6s; }
|
||||
.sk-circle-fade-dot:nth-child(7):before { animation-delay: -0.5s; }
|
||||
.sk-circle-fade-dot:nth-child(8):before { animation-delay: -0.4s; }
|
||||
.sk-circle-fade-dot:nth-child(9):before { animation-delay: -0.3s; }
|
||||
.sk-circle-fade-dot:nth-child(10):before { animation-delay: -0.2s; }
|
||||
.sk-circle-fade-dot:nth-child(11):before { animation-delay: -0.1s; }
|
||||
|
||||
@keyframes sk-circle-fade {
|
||||
0%, 39%, 100% {
|
||||
opacity: 0;
|
||||
transform: scale(0.6);
|
||||
} 40% {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Grid
|
||||
|
||||
<div class="sk-grid">
|
||||
<div class="sk-grid-cube"></div>
|
||||
<div class="sk-grid-cube"></div>
|
||||
<div class="sk-grid-cube"></div>
|
||||
<div class="sk-grid-cube"></div>
|
||||
<div class="sk-grid-cube"></div>
|
||||
<div class="sk-grid-cube"></div>
|
||||
<div class="sk-grid-cube"></div>
|
||||
<div class="sk-grid-cube"></div>
|
||||
<div class="sk-grid-cube"></div>
|
||||
</div>
|
||||
*/
|
||||
.sk-grid {
|
||||
width: var(--sk-size);
|
||||
height: var(--sk-size);
|
||||
/* Cube positions
|
||||
* 1 2 3
|
||||
* 4 5 6
|
||||
* 7 8 9
|
||||
*/
|
||||
}
|
||||
.sk-grid-cube {
|
||||
width: 33.33%;
|
||||
height: 33.33%;
|
||||
background-color: var(--sk-color);
|
||||
float: left;
|
||||
animation: sk-grid 1.3s infinite ease-in-out;
|
||||
}
|
||||
.sk-grid-cube:nth-child(1) { animation-delay: 0.2s; }
|
||||
.sk-grid-cube:nth-child(2) { animation-delay: 0.3s; }
|
||||
.sk-grid-cube:nth-child(3) { animation-delay: 0.4s; }
|
||||
.sk-grid-cube:nth-child(4) { animation-delay: 0.1s; }
|
||||
.sk-grid-cube:nth-child(5) { animation-delay: 0.2s; }
|
||||
.sk-grid-cube:nth-child(6) { animation-delay: 0.3s; }
|
||||
.sk-grid-cube:nth-child(7) { animation-delay: 0.0s; }
|
||||
.sk-grid-cube:nth-child(8) { animation-delay: 0.1s; }
|
||||
.sk-grid-cube:nth-child(9) { animation-delay: 0.2s; }
|
||||
|
||||
@keyframes sk-grid {
|
||||
0%, 70%, 100% {
|
||||
transform: scale3D(1, 1, 1);
|
||||
} 35% {
|
||||
transform: scale3D(0, 0, 1);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Fold
|
||||
|
||||
<div class="sk-fold">
|
||||
<div class="sk-fold-cube"></div>
|
||||
<div class="sk-fold-cube"></div>
|
||||
<div class="sk-fold-cube"></div>
|
||||
<div class="sk-fold-cube"></div>
|
||||
</div>
|
||||
*/
|
||||
.sk-fold {
|
||||
width: var(--sk-size);
|
||||
height: var(--sk-size);
|
||||
position: relative;
|
||||
transform: rotateZ(45deg);
|
||||
}
|
||||
.sk-fold-cube {
|
||||
float: left;
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
position: relative;
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.sk-fold-cube:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--sk-color);
|
||||
animation: sk-fold 2.4s infinite linear both;
|
||||
transform-origin: 100% 100%;
|
||||
}
|
||||
.sk-fold-cube:nth-child(2) { transform: scale(1.1) rotateZ(90deg); }
|
||||
.sk-fold-cube:nth-child(4) { transform: scale(1.1) rotateZ(180deg); }
|
||||
.sk-fold-cube:nth-child(3) { transform: scale(1.1) rotateZ(270deg); }
|
||||
.sk-fold-cube:nth-child(2):before { animation-delay: 0.3s; }
|
||||
.sk-fold-cube:nth-child(4):before { animation-delay: 0.6s; }
|
||||
.sk-fold-cube:nth-child(3):before { animation-delay: 0.9s; }
|
||||
|
||||
@keyframes sk-fold {
|
||||
0%, 10% {
|
||||
transform: perspective(140px) rotateX(-180deg);
|
||||
opacity: 0;
|
||||
} 25%, 75% {
|
||||
transform: perspective(140px) rotateX(0deg);
|
||||
opacity: 1;
|
||||
} 90%, 100% {
|
||||
transform: perspective(140px) rotateY(180deg);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Wander
|
||||
|
||||
<div class="sk-wander">
|
||||
<div class="sk-wander-cube"></div>
|
||||
<div class="sk-wander-cube"></div>
|
||||
<div class="sk-wander-cube"></div>
|
||||
<div class="sk-wander-cube"></div>
|
||||
</div>
|
||||
*/
|
||||
.sk-wander {
|
||||
width: var(--sk-size);
|
||||
height: var(--sk-size);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.sk-wander-cube {
|
||||
background-color: var(--sk-color);
|
||||
width: 20%;
|
||||
height: 20%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
--sk-wander-distance: calc(var(--sk-size) * 0.75);
|
||||
animation: sk-wander 2.0s ease-in-out -2.0s infinite both;
|
||||
}
|
||||
.sk-wander-cube:nth-child(2) { animation-delay: -0.5s; }
|
||||
.sk-wander-cube:nth-child(3) { animation-delay: -1.0s; }
|
||||
|
||||
@keyframes sk-wander {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
} 25% {
|
||||
transform: translateX(var(--sk-wander-distance)) rotate(-90deg) scale(0.6);
|
||||
} 50% { /* Make FF rotate in the right direction */
|
||||
transform: translateX(var(--sk-wander-distance)) translateY(var(--sk-wander-distance)) rotate(-179deg);
|
||||
} 50.1% {
|
||||
transform: translateX(var(--sk-wander-distance)) translateY(var(--sk-wander-distance)) rotate(-180deg);
|
||||
} 75% {
|
||||
transform: translateX(0) translateY(var(--sk-wander-distance)) rotate(-270deg) scale(0.6);
|
||||
} 100% {
|
||||
transform: rotate(-360deg);
|
||||
}
|
||||
}
|
||||
1
ZpcBulletinBoard/wwwroot/lib/spinkit/spinkit.min.css
vendored
Normal file
1
ZpcBulletinBoard/wwwroot/lib/spinkit/spinkit.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user