@khanacademy/wonder-blocks-progress-spinner 1.1.34 → 1.1.35
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md
CHANGED
package/dist/index.js
CHANGED
|
@@ -142,6 +142,14 @@ const StyledPath = Object(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODU
|
|
|
142
142
|
/**
|
|
143
143
|
* A circular progress spinner. Used for indicating loading progress. Should
|
|
144
144
|
* be used by default in most places where a loading indicator is needed.
|
|
145
|
+
*
|
|
146
|
+
* ### Usage
|
|
147
|
+
*
|
|
148
|
+
* ```js
|
|
149
|
+
* import {CircularSpinner} from "@khanacademy/wonder-blocks-progress-spinner";
|
|
150
|
+
*
|
|
151
|
+
* <CircularSpinner />
|
|
152
|
+
* ```
|
|
145
153
|
*/
|
|
146
154
|
class CircularSpinner extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
|
|
147
155
|
render() {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@khanacademy/wonder-blocks-progress-spinner",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.35",
|
|
4
4
|
"design": "v1",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"access": "public"
|
|
@@ -17,7 +17,7 @@
|
|
|
17
17
|
"dependencies": {
|
|
18
18
|
"@babel/runtime": "^7.18.6",
|
|
19
19
|
"@khanacademy/wonder-blocks-color": "^1.2.0",
|
|
20
|
-
"@khanacademy/wonder-blocks-core": "^4.
|
|
20
|
+
"@khanacademy/wonder-blocks-core": "^4.4.0",
|
|
21
21
|
"@khanacademy/wonder-blocks-spacing": "^3.0.5"
|
|
22
22
|
},
|
|
23
23
|
"peerDependencies": {
|
|
@@ -4,7 +4,7 @@ exports[`wonder-blocks-progress-spinner example 1 1`] = `
|
|
|
4
4
|
<div
|
|
5
5
|
className=""
|
|
6
6
|
style={
|
|
7
|
-
|
|
7
|
+
{
|
|
8
8
|
"alignItems": "stretch",
|
|
9
9
|
"borderStyle": "solid",
|
|
10
10
|
"borderWidth": 0,
|
|
@@ -32,17 +32,17 @@ exports[`wonder-blocks-progress-spinner example 1 1`] = `
|
|
|
32
32
|
d="M88.38 46.91a3.818 3.818 0 1 1 7.602 0h.006c.008.362.012.725.012 1.09 0 26.51-21.49 48-48 48S0 74.51 0 48 21.49 0 48 0c.365 0 .728.004 1.09.012v.005a3.818 3.818 0 1 1 0 7.602v.032c-.362-.01-.725-.015-1.09-.015C25.708 7.636 7.636 25.708 7.636 48c0 22.292 18.072 40.364 40.364 40.364 22.292 0 40.364-18.072 40.364-40.364 0-.365-.005-.728-.015-1.09h.032z"
|
|
33
33
|
fillRule="nonzero"
|
|
34
34
|
style={
|
|
35
|
-
|
|
35
|
+
{
|
|
36
36
|
"animationDuration": "1.1s",
|
|
37
37
|
"animationIterationCount": "infinite",
|
|
38
|
-
"animationName":
|
|
39
|
-
"0%":
|
|
38
|
+
"animationName": {
|
|
39
|
+
"0%": {
|
|
40
40
|
"transform": "rotate(0deg)",
|
|
41
41
|
},
|
|
42
|
-
"100%":
|
|
42
|
+
"100%": {
|
|
43
43
|
"transform": "rotate(360deg)",
|
|
44
44
|
},
|
|
45
|
-
"50%":
|
|
45
|
+
"50%": {
|
|
46
46
|
"transform": "rotate(180deg)",
|
|
47
47
|
},
|
|
48
48
|
},
|
|
@@ -60,7 +60,7 @@ exports[`wonder-blocks-progress-spinner example 2 1`] = `
|
|
|
60
60
|
<div
|
|
61
61
|
className=""
|
|
62
62
|
style={
|
|
63
|
-
|
|
63
|
+
{
|
|
64
64
|
"alignItems": "stretch",
|
|
65
65
|
"borderStyle": "solid",
|
|
66
66
|
"borderWidth": 0,
|
|
@@ -79,7 +79,7 @@ exports[`wonder-blocks-progress-spinner example 2 1`] = `
|
|
|
79
79
|
<div
|
|
80
80
|
className=""
|
|
81
81
|
style={
|
|
82
|
-
|
|
82
|
+
{
|
|
83
83
|
"alignItems": "stretch",
|
|
84
84
|
"borderStyle": "solid",
|
|
85
85
|
"borderWidth": 0,
|
|
@@ -98,7 +98,7 @@ exports[`wonder-blocks-progress-spinner example 2 1`] = `
|
|
|
98
98
|
<div
|
|
99
99
|
className=""
|
|
100
100
|
style={
|
|
101
|
-
|
|
101
|
+
{
|
|
102
102
|
"alignItems": "center",
|
|
103
103
|
"borderStyle": "solid",
|
|
104
104
|
"borderWidth": 0,
|
|
@@ -122,7 +122,7 @@ exports[`wonder-blocks-progress-spinner example 2 1`] = `
|
|
|
122
122
|
<div
|
|
123
123
|
className=""
|
|
124
124
|
style={
|
|
125
|
-
|
|
125
|
+
{
|
|
126
126
|
"alignItems": "stretch",
|
|
127
127
|
"borderStyle": "solid",
|
|
128
128
|
"borderWidth": 0,
|
|
@@ -150,17 +150,17 @@ exports[`wonder-blocks-progress-spinner example 2 1`] = `
|
|
|
150
150
|
d="M88.38 46.91a3.818 3.818 0 1 1 7.602 0h.006c.008.362.012.725.012 1.09 0 26.51-21.49 48-48 48S0 74.51 0 48 21.49 0 48 0c.365 0 .728.004 1.09.012v.005a3.818 3.818 0 1 1 0 7.602v.032c-.362-.01-.725-.015-1.09-.015C25.708 7.636 7.636 25.708 7.636 48c0 22.292 18.072 40.364 40.364 40.364 22.292 0 40.364-18.072 40.364-40.364 0-.365-.005-.728-.015-1.09h.032z"
|
|
151
151
|
fillRule="nonzero"
|
|
152
152
|
style={
|
|
153
|
-
|
|
153
|
+
{
|
|
154
154
|
"animationDuration": "1.1s",
|
|
155
155
|
"animationIterationCount": "infinite",
|
|
156
|
-
"animationName":
|
|
157
|
-
"0%":
|
|
156
|
+
"animationName": {
|
|
157
|
+
"0%": {
|
|
158
158
|
"transform": "rotate(0deg)",
|
|
159
159
|
},
|
|
160
|
-
"100%":
|
|
160
|
+
"100%": {
|
|
161
161
|
"transform": "rotate(360deg)",
|
|
162
162
|
},
|
|
163
|
-
"50%":
|
|
163
|
+
"50%": {
|
|
164
164
|
"transform": "rotate(180deg)",
|
|
165
165
|
},
|
|
166
166
|
},
|
|
@@ -175,7 +175,7 @@ exports[`wonder-blocks-progress-spinner example 2 1`] = `
|
|
|
175
175
|
<span
|
|
176
176
|
className=""
|
|
177
177
|
style={
|
|
178
|
-
|
|
178
|
+
{
|
|
179
179
|
"MozOsxFontSmoothing": "grayscale",
|
|
180
180
|
"WebkitFontSmoothing": "antialiased",
|
|
181
181
|
}
|
|
@@ -187,7 +187,7 @@ exports[`wonder-blocks-progress-spinner example 2 1`] = `
|
|
|
187
187
|
<div
|
|
188
188
|
className=""
|
|
189
189
|
style={
|
|
190
|
-
|
|
190
|
+
{
|
|
191
191
|
"alignItems": "center",
|
|
192
192
|
"borderStyle": "solid",
|
|
193
193
|
"borderWidth": 0,
|
|
@@ -211,7 +211,7 @@ exports[`wonder-blocks-progress-spinner example 2 1`] = `
|
|
|
211
211
|
<div
|
|
212
212
|
className=""
|
|
213
213
|
style={
|
|
214
|
-
|
|
214
|
+
{
|
|
215
215
|
"alignItems": "stretch",
|
|
216
216
|
"borderStyle": "solid",
|
|
217
217
|
"borderWidth": 0,
|
|
@@ -239,17 +239,17 @@ exports[`wonder-blocks-progress-spinner example 2 1`] = `
|
|
|
239
239
|
d="M44.19 23.455a1.91 1.91 0 1 1 3.801 0h.003c.004.18.006.363.006.545 0 13.255-10.745 24-24 24S0 37.255 0 24 10.745 0 24 0c.182 0 .364.002.545.006V.01a1.91 1.91 0 1 1 0 3.801v.015A20.564 20.564 0 0 0 24 3.818C12.854 3.818 3.818 12.854 3.818 24c0 11.146 9.036 20.182 20.182 20.182 11.146 0 20.182-9.036 20.182-20.182 0-.182-.003-.364-.007-.545h.015z"
|
|
240
240
|
fillRule="nonzero"
|
|
241
241
|
style={
|
|
242
|
-
|
|
242
|
+
{
|
|
243
243
|
"animationDuration": "1.1s",
|
|
244
244
|
"animationIterationCount": "infinite",
|
|
245
|
-
"animationName":
|
|
246
|
-
"0%":
|
|
245
|
+
"animationName": {
|
|
246
|
+
"0%": {
|
|
247
247
|
"transform": "rotate(0deg)",
|
|
248
248
|
},
|
|
249
|
-
"100%":
|
|
249
|
+
"100%": {
|
|
250
250
|
"transform": "rotate(360deg)",
|
|
251
251
|
},
|
|
252
|
-
"50%":
|
|
252
|
+
"50%": {
|
|
253
253
|
"transform": "rotate(180deg)",
|
|
254
254
|
},
|
|
255
255
|
},
|
|
@@ -264,7 +264,7 @@ exports[`wonder-blocks-progress-spinner example 2 1`] = `
|
|
|
264
264
|
<span
|
|
265
265
|
className=""
|
|
266
266
|
style={
|
|
267
|
-
|
|
267
|
+
{
|
|
268
268
|
"MozOsxFontSmoothing": "grayscale",
|
|
269
269
|
"WebkitFontSmoothing": "antialiased",
|
|
270
270
|
}
|
|
@@ -276,7 +276,7 @@ exports[`wonder-blocks-progress-spinner example 2 1`] = `
|
|
|
276
276
|
<div
|
|
277
277
|
className=""
|
|
278
278
|
style={
|
|
279
|
-
|
|
279
|
+
{
|
|
280
280
|
"alignItems": "center",
|
|
281
281
|
"borderStyle": "solid",
|
|
282
282
|
"borderWidth": 0,
|
|
@@ -300,7 +300,7 @@ exports[`wonder-blocks-progress-spinner example 2 1`] = `
|
|
|
300
300
|
<div
|
|
301
301
|
className=""
|
|
302
302
|
style={
|
|
303
|
-
|
|
303
|
+
{
|
|
304
304
|
"alignItems": "stretch",
|
|
305
305
|
"borderStyle": "solid",
|
|
306
306
|
"borderWidth": 0,
|
|
@@ -328,17 +328,17 @@ exports[`wonder-blocks-progress-spinner example 2 1`] = `
|
|
|
328
328
|
d="M10.598.943c-.093-.449-.362-.748-.732-.875a1.314 1.314 0 0 0-.723-.033C3.83 1.417 0 6.317 0 11.864 0 18.538 5.398 24 12 24c6.598 0 12-5.471 12-12.16a1.333 1.333 0 0 0-.154-.548c-.193-.368-.544-.606-1.023-.606-.472 0-.825.229-1.035.585-.117.2-.169.39-.189.582-.124 5.472-4.294 9.73-9.599 9.73-5.349 0-9.599-4.3-9.599-9.72 0-4.46 3.036-8.299 7.28-9.444.127-.036.291-.107.458-.232.373-.28.57-.711.46-1.244z"
|
|
329
329
|
fillRule="nonzero"
|
|
330
330
|
style={
|
|
331
|
-
|
|
331
|
+
{
|
|
332
332
|
"animationDuration": "1.1s",
|
|
333
333
|
"animationIterationCount": "infinite",
|
|
334
|
-
"animationName":
|
|
335
|
-
"0%":
|
|
334
|
+
"animationName": {
|
|
335
|
+
"0%": {
|
|
336
336
|
"transform": "rotate(0deg)",
|
|
337
337
|
},
|
|
338
|
-
"100%":
|
|
338
|
+
"100%": {
|
|
339
339
|
"transform": "rotate(360deg)",
|
|
340
340
|
},
|
|
341
|
-
"50%":
|
|
341
|
+
"50%": {
|
|
342
342
|
"transform": "rotate(180deg)",
|
|
343
343
|
},
|
|
344
344
|
},
|
|
@@ -353,7 +353,7 @@ exports[`wonder-blocks-progress-spinner example 2 1`] = `
|
|
|
353
353
|
<span
|
|
354
354
|
className=""
|
|
355
355
|
style={
|
|
356
|
-
|
|
356
|
+
{
|
|
357
357
|
"MozOsxFontSmoothing": "grayscale",
|
|
358
358
|
"WebkitFontSmoothing": "antialiased",
|
|
359
359
|
}
|
|
@@ -365,7 +365,7 @@ exports[`wonder-blocks-progress-spinner example 2 1`] = `
|
|
|
365
365
|
<div
|
|
366
366
|
className=""
|
|
367
367
|
style={
|
|
368
|
-
|
|
368
|
+
{
|
|
369
369
|
"alignItems": "center",
|
|
370
370
|
"borderStyle": "solid",
|
|
371
371
|
"borderWidth": 0,
|
|
@@ -389,7 +389,7 @@ exports[`wonder-blocks-progress-spinner example 2 1`] = `
|
|
|
389
389
|
<div
|
|
390
390
|
className=""
|
|
391
391
|
style={
|
|
392
|
-
|
|
392
|
+
{
|
|
393
393
|
"alignItems": "stretch",
|
|
394
394
|
"borderStyle": "solid",
|
|
395
395
|
"borderWidth": 0,
|
|
@@ -417,17 +417,17 @@ exports[`wonder-blocks-progress-spinner example 2 1`] = `
|
|
|
417
417
|
d="M7.237.741C7.165.393 6.95.154 6.656.053A1.01 1.01 0 0 0 6.18.01c-.053.009-.053.009-.087.017C2.553.949 0 4.214 0 7.91 0 12.36 3.598 16 8 16c4.4 0 8-3.647 8-8.112a1.02 1.02 0 0 0-.118-.423.877.877 0 0 0-.808-.48.909.909 0 0 0-.81.46c-.09.151-.13.296-.146.455-.08 3.493-2.737 6.207-6.118 6.207-3.41 0-6.118-2.74-6.118-6.196 0-2.843 1.936-5.291 4.644-6.022.1-.028.224-.082.352-.177a.928.928 0 0 0 .36-.97z"
|
|
418
418
|
fillRule="nonzero"
|
|
419
419
|
style={
|
|
420
|
-
|
|
420
|
+
{
|
|
421
421
|
"animationDuration": "1.1s",
|
|
422
422
|
"animationIterationCount": "infinite",
|
|
423
|
-
"animationName":
|
|
424
|
-
"0%":
|
|
423
|
+
"animationName": {
|
|
424
|
+
"0%": {
|
|
425
425
|
"transform": "rotate(0deg)",
|
|
426
426
|
},
|
|
427
|
-
"100%":
|
|
427
|
+
"100%": {
|
|
428
428
|
"transform": "rotate(360deg)",
|
|
429
429
|
},
|
|
430
|
-
"50%":
|
|
430
|
+
"50%": {
|
|
431
431
|
"transform": "rotate(180deg)",
|
|
432
432
|
},
|
|
433
433
|
},
|
|
@@ -442,7 +442,7 @@ exports[`wonder-blocks-progress-spinner example 2 1`] = `
|
|
|
442
442
|
<span
|
|
443
443
|
className=""
|
|
444
444
|
style={
|
|
445
|
-
|
|
445
|
+
{
|
|
446
446
|
"MozOsxFontSmoothing": "grayscale",
|
|
447
447
|
"WebkitFontSmoothing": "antialiased",
|
|
448
448
|
}
|
|
@@ -455,7 +455,7 @@ exports[`wonder-blocks-progress-spinner example 2 1`] = `
|
|
|
455
455
|
<div
|
|
456
456
|
className=""
|
|
457
457
|
style={
|
|
458
|
-
|
|
458
|
+
{
|
|
459
459
|
"alignItems": "stretch",
|
|
460
460
|
"background": "#0b2149",
|
|
461
461
|
"borderStyle": "solid",
|
|
@@ -476,7 +476,7 @@ exports[`wonder-blocks-progress-spinner example 2 1`] = `
|
|
|
476
476
|
<div
|
|
477
477
|
className=""
|
|
478
478
|
style={
|
|
479
|
-
|
|
479
|
+
{
|
|
480
480
|
"alignItems": "center",
|
|
481
481
|
"borderStyle": "solid",
|
|
482
482
|
"borderWidth": 0,
|
|
@@ -500,7 +500,7 @@ exports[`wonder-blocks-progress-spinner example 2 1`] = `
|
|
|
500
500
|
<div
|
|
501
501
|
className=""
|
|
502
502
|
style={
|
|
503
|
-
|
|
503
|
+
{
|
|
504
504
|
"alignItems": "stretch",
|
|
505
505
|
"borderStyle": "solid",
|
|
506
506
|
"borderWidth": 0,
|
|
@@ -528,17 +528,17 @@ exports[`wonder-blocks-progress-spinner example 2 1`] = `
|
|
|
528
528
|
d="M88.38 46.91a3.818 3.818 0 1 1 7.602 0h.006c.008.362.012.725.012 1.09 0 26.51-21.49 48-48 48S0 74.51 0 48 21.49 0 48 0c.365 0 .728.004 1.09.012v.005a3.818 3.818 0 1 1 0 7.602v.032c-.362-.01-.725-.015-1.09-.015C25.708 7.636 7.636 25.708 7.636 48c0 22.292 18.072 40.364 40.364 40.364 22.292 0 40.364-18.072 40.364-40.364 0-.365-.005-.728-.015-1.09h.032z"
|
|
529
529
|
fillRule="nonzero"
|
|
530
530
|
style={
|
|
531
|
-
|
|
531
|
+
{
|
|
532
532
|
"animationDuration": "1.1s",
|
|
533
533
|
"animationIterationCount": "infinite",
|
|
534
|
-
"animationName":
|
|
535
|
-
"0%":
|
|
534
|
+
"animationName": {
|
|
535
|
+
"0%": {
|
|
536
536
|
"transform": "rotate(0deg)",
|
|
537
537
|
},
|
|
538
|
-
"100%":
|
|
538
|
+
"100%": {
|
|
539
539
|
"transform": "rotate(360deg)",
|
|
540
540
|
},
|
|
541
|
-
"50%":
|
|
541
|
+
"50%": {
|
|
542
542
|
"transform": "rotate(180deg)",
|
|
543
543
|
},
|
|
544
544
|
},
|
|
@@ -553,7 +553,7 @@ exports[`wonder-blocks-progress-spinner example 2 1`] = `
|
|
|
553
553
|
<span
|
|
554
554
|
className=""
|
|
555
555
|
style={
|
|
556
|
-
|
|
556
|
+
{
|
|
557
557
|
"MozOsxFontSmoothing": "grayscale",
|
|
558
558
|
"WebkitFontSmoothing": "antialiased",
|
|
559
559
|
}
|
|
@@ -565,7 +565,7 @@ exports[`wonder-blocks-progress-spinner example 2 1`] = `
|
|
|
565
565
|
<div
|
|
566
566
|
className=""
|
|
567
567
|
style={
|
|
568
|
-
|
|
568
|
+
{
|
|
569
569
|
"alignItems": "center",
|
|
570
570
|
"borderStyle": "solid",
|
|
571
571
|
"borderWidth": 0,
|
|
@@ -589,7 +589,7 @@ exports[`wonder-blocks-progress-spinner example 2 1`] = `
|
|
|
589
589
|
<div
|
|
590
590
|
className=""
|
|
591
591
|
style={
|
|
592
|
-
|
|
592
|
+
{
|
|
593
593
|
"alignItems": "stretch",
|
|
594
594
|
"borderStyle": "solid",
|
|
595
595
|
"borderWidth": 0,
|
|
@@ -617,17 +617,17 @@ exports[`wonder-blocks-progress-spinner example 2 1`] = `
|
|
|
617
617
|
d="M44.19 23.455a1.91 1.91 0 1 1 3.801 0h.003c.004.18.006.363.006.545 0 13.255-10.745 24-24 24S0 37.255 0 24 10.745 0 24 0c.182 0 .364.002.545.006V.01a1.91 1.91 0 1 1 0 3.801v.015A20.564 20.564 0 0 0 24 3.818C12.854 3.818 3.818 12.854 3.818 24c0 11.146 9.036 20.182 20.182 20.182 11.146 0 20.182-9.036 20.182-20.182 0-.182-.003-.364-.007-.545h.015z"
|
|
618
618
|
fillRule="nonzero"
|
|
619
619
|
style={
|
|
620
|
-
|
|
620
|
+
{
|
|
621
621
|
"animationDuration": "1.1s",
|
|
622
622
|
"animationIterationCount": "infinite",
|
|
623
|
-
"animationName":
|
|
624
|
-
"0%":
|
|
623
|
+
"animationName": {
|
|
624
|
+
"0%": {
|
|
625
625
|
"transform": "rotate(0deg)",
|
|
626
626
|
},
|
|
627
|
-
"100%":
|
|
627
|
+
"100%": {
|
|
628
628
|
"transform": "rotate(360deg)",
|
|
629
629
|
},
|
|
630
|
-
"50%":
|
|
630
|
+
"50%": {
|
|
631
631
|
"transform": "rotate(180deg)",
|
|
632
632
|
},
|
|
633
633
|
},
|
|
@@ -642,7 +642,7 @@ exports[`wonder-blocks-progress-spinner example 2 1`] = `
|
|
|
642
642
|
<span
|
|
643
643
|
className=""
|
|
644
644
|
style={
|
|
645
|
-
|
|
645
|
+
{
|
|
646
646
|
"MozOsxFontSmoothing": "grayscale",
|
|
647
647
|
"WebkitFontSmoothing": "antialiased",
|
|
648
648
|
}
|
|
@@ -654,7 +654,7 @@ exports[`wonder-blocks-progress-spinner example 2 1`] = `
|
|
|
654
654
|
<div
|
|
655
655
|
className=""
|
|
656
656
|
style={
|
|
657
|
-
|
|
657
|
+
{
|
|
658
658
|
"alignItems": "center",
|
|
659
659
|
"borderStyle": "solid",
|
|
660
660
|
"borderWidth": 0,
|
|
@@ -678,7 +678,7 @@ exports[`wonder-blocks-progress-spinner example 2 1`] = `
|
|
|
678
678
|
<div
|
|
679
679
|
className=""
|
|
680
680
|
style={
|
|
681
|
-
|
|
681
|
+
{
|
|
682
682
|
"alignItems": "stretch",
|
|
683
683
|
"borderStyle": "solid",
|
|
684
684
|
"borderWidth": 0,
|
|
@@ -706,17 +706,17 @@ exports[`wonder-blocks-progress-spinner example 2 1`] = `
|
|
|
706
706
|
d="M10.598.943c-.093-.449-.362-.748-.732-.875a1.314 1.314 0 0 0-.723-.033C3.83 1.417 0 6.317 0 11.864 0 18.538 5.398 24 12 24c6.598 0 12-5.471 12-12.16a1.333 1.333 0 0 0-.154-.548c-.193-.368-.544-.606-1.023-.606-.472 0-.825.229-1.035.585-.117.2-.169.39-.189.582-.124 5.472-4.294 9.73-9.599 9.73-5.349 0-9.599-4.3-9.599-9.72 0-4.46 3.036-8.299 7.28-9.444.127-.036.291-.107.458-.232.373-.28.57-.711.46-1.244z"
|
|
707
707
|
fillRule="nonzero"
|
|
708
708
|
style={
|
|
709
|
-
|
|
709
|
+
{
|
|
710
710
|
"animationDuration": "1.1s",
|
|
711
711
|
"animationIterationCount": "infinite",
|
|
712
|
-
"animationName":
|
|
713
|
-
"0%":
|
|
712
|
+
"animationName": {
|
|
713
|
+
"0%": {
|
|
714
714
|
"transform": "rotate(0deg)",
|
|
715
715
|
},
|
|
716
|
-
"100%":
|
|
716
|
+
"100%": {
|
|
717
717
|
"transform": "rotate(360deg)",
|
|
718
718
|
},
|
|
719
|
-
"50%":
|
|
719
|
+
"50%": {
|
|
720
720
|
"transform": "rotate(180deg)",
|
|
721
721
|
},
|
|
722
722
|
},
|
|
@@ -731,7 +731,7 @@ exports[`wonder-blocks-progress-spinner example 2 1`] = `
|
|
|
731
731
|
<span
|
|
732
732
|
className=""
|
|
733
733
|
style={
|
|
734
|
-
|
|
734
|
+
{
|
|
735
735
|
"MozOsxFontSmoothing": "grayscale",
|
|
736
736
|
"WebkitFontSmoothing": "antialiased",
|
|
737
737
|
}
|
|
@@ -743,7 +743,7 @@ exports[`wonder-blocks-progress-spinner example 2 1`] = `
|
|
|
743
743
|
<div
|
|
744
744
|
className=""
|
|
745
745
|
style={
|
|
746
|
-
|
|
746
|
+
{
|
|
747
747
|
"alignItems": "center",
|
|
748
748
|
"borderStyle": "solid",
|
|
749
749
|
"borderWidth": 0,
|
|
@@ -767,7 +767,7 @@ exports[`wonder-blocks-progress-spinner example 2 1`] = `
|
|
|
767
767
|
<div
|
|
768
768
|
className=""
|
|
769
769
|
style={
|
|
770
|
-
|
|
770
|
+
{
|
|
771
771
|
"alignItems": "stretch",
|
|
772
772
|
"borderStyle": "solid",
|
|
773
773
|
"borderWidth": 0,
|
|
@@ -795,17 +795,17 @@ exports[`wonder-blocks-progress-spinner example 2 1`] = `
|
|
|
795
795
|
d="M7.237.741C7.165.393 6.95.154 6.656.053A1.01 1.01 0 0 0 6.18.01c-.053.009-.053.009-.087.017C2.553.949 0 4.214 0 7.91 0 12.36 3.598 16 8 16c4.4 0 8-3.647 8-8.112a1.02 1.02 0 0 0-.118-.423.877.877 0 0 0-.808-.48.909.909 0 0 0-.81.46c-.09.151-.13.296-.146.455-.08 3.493-2.737 6.207-6.118 6.207-3.41 0-6.118-2.74-6.118-6.196 0-2.843 1.936-5.291 4.644-6.022.1-.028.224-.082.352-.177a.928.928 0 0 0 .36-.97z"
|
|
796
796
|
fillRule="nonzero"
|
|
797
797
|
style={
|
|
798
|
-
|
|
798
|
+
{
|
|
799
799
|
"animationDuration": "1.1s",
|
|
800
800
|
"animationIterationCount": "infinite",
|
|
801
|
-
"animationName":
|
|
802
|
-
"0%":
|
|
801
|
+
"animationName": {
|
|
802
|
+
"0%": {
|
|
803
803
|
"transform": "rotate(0deg)",
|
|
804
804
|
},
|
|
805
|
-
"100%":
|
|
805
|
+
"100%": {
|
|
806
806
|
"transform": "rotate(360deg)",
|
|
807
807
|
},
|
|
808
|
-
"50%":
|
|
808
|
+
"50%": {
|
|
809
809
|
"transform": "rotate(180deg)",
|
|
810
810
|
},
|
|
811
811
|
},
|
|
@@ -820,7 +820,7 @@ exports[`wonder-blocks-progress-spinner example 2 1`] = `
|
|
|
820
820
|
<span
|
|
821
821
|
className=""
|
|
822
822
|
style={
|
|
823
|
-
|
|
823
|
+
{
|
|
824
824
|
"MozOsxFontSmoothing": "grayscale",
|
|
825
825
|
"WebkitFontSmoothing": "antialiased",
|
|
826
826
|
}
|
|
@@ -833,7 +833,7 @@ exports[`wonder-blocks-progress-spinner example 2 1`] = `
|
|
|
833
833
|
<div
|
|
834
834
|
className=""
|
|
835
835
|
style={
|
|
836
|
-
|
|
836
|
+
{
|
|
837
837
|
"alignItems": "stretch",
|
|
838
838
|
"borderStyle": "solid",
|
|
839
839
|
"borderWidth": 0,
|
|
@@ -852,7 +852,7 @@ exports[`wonder-blocks-progress-spinner example 2 1`] = `
|
|
|
852
852
|
<span
|
|
853
853
|
className=""
|
|
854
854
|
style={
|
|
855
|
-
|
|
855
|
+
{
|
|
856
856
|
"MozOsxFontSmoothing": "grayscale",
|
|
857
857
|
"WebkitFontSmoothing": "antialiased",
|
|
858
858
|
}
|
|
@@ -862,7 +862,7 @@ exports[`wonder-blocks-progress-spinner example 2 1`] = `
|
|
|
862
862
|
<div
|
|
863
863
|
className=""
|
|
864
864
|
style={
|
|
865
|
-
|
|
865
|
+
{
|
|
866
866
|
"alignItems": "stretch",
|
|
867
867
|
"borderStyle": "solid",
|
|
868
868
|
"borderWidth": 0,
|
|
@@ -890,17 +890,17 @@ exports[`wonder-blocks-progress-spinner example 2 1`] = `
|
|
|
890
890
|
d="M7.237.741C7.165.393 6.95.154 6.656.053A1.01 1.01 0 0 0 6.18.01c-.053.009-.053.009-.087.017C2.553.949 0 4.214 0 7.91 0 12.36 3.598 16 8 16c4.4 0 8-3.647 8-8.112a1.02 1.02 0 0 0-.118-.423.877.877 0 0 0-.808-.48.909.909 0 0 0-.81.46c-.09.151-.13.296-.146.455-.08 3.493-2.737 6.207-6.118 6.207-3.41 0-6.118-2.74-6.118-6.196 0-2.843 1.936-5.291 4.644-6.022.1-.028.224-.082.352-.177a.928.928 0 0 0 .36-.97z"
|
|
891
891
|
fillRule="nonzero"
|
|
892
892
|
style={
|
|
893
|
-
|
|
893
|
+
{
|
|
894
894
|
"animationDuration": "1.1s",
|
|
895
895
|
"animationIterationCount": "infinite",
|
|
896
|
-
"animationName":
|
|
897
|
-
"0%":
|
|
896
|
+
"animationName": {
|
|
897
|
+
"0%": {
|
|
898
898
|
"transform": "rotate(0deg)",
|
|
899
899
|
},
|
|
900
|
-
"100%":
|
|
900
|
+
"100%": {
|
|
901
901
|
"transform": "rotate(360deg)",
|
|
902
902
|
},
|
|
903
|
-
"50%":
|
|
903
|
+
"50%": {
|
|
904
904
|
"transform": "rotate(180deg)",
|
|
905
905
|
},
|
|
906
906
|
},
|
|
@@ -0,0 +1,182 @@
|
|
|
1
|
+
// @flow
|
|
2
|
+
import * as React from "react";
|
|
3
|
+
import {StyleSheet, css} from "aphrodite";
|
|
4
|
+
import type {StoryComponentType} from "@storybook/react";
|
|
5
|
+
|
|
6
|
+
import Color from "@khanacademy/wonder-blocks-color";
|
|
7
|
+
import {View} from "@khanacademy/wonder-blocks-core";
|
|
8
|
+
import {CircularSpinner} from "@khanacademy/wonder-blocks-progress-spinner";
|
|
9
|
+
import Spacing from "@khanacademy/wonder-blocks-spacing";
|
|
10
|
+
import {Body, LabelLarge} from "@khanacademy/wonder-blocks-typography";
|
|
11
|
+
|
|
12
|
+
import ComponentInfo from "../../../../../.storybook/components/component-info.js";
|
|
13
|
+
import {name, version} from "../../../package.json";
|
|
14
|
+
|
|
15
|
+
export default {
|
|
16
|
+
title: "ProgressSpinner/CircularSpinner",
|
|
17
|
+
component: CircularSpinner,
|
|
18
|
+
parameters: {
|
|
19
|
+
componentSubtitle: ((
|
|
20
|
+
<ComponentInfo name={name} version={version} />
|
|
21
|
+
): any),
|
|
22
|
+
docs: {
|
|
23
|
+
description: {
|
|
24
|
+
component: null,
|
|
25
|
+
},
|
|
26
|
+
source: {
|
|
27
|
+
// See https://github.com/storybookjs/storybook/issues/12596
|
|
28
|
+
excludeDecorators: true,
|
|
29
|
+
},
|
|
30
|
+
},
|
|
31
|
+
},
|
|
32
|
+
decorators: [
|
|
33
|
+
(Story: any): React.Element<typeof View> => (
|
|
34
|
+
<View style={styles.example}>
|
|
35
|
+
<Story />
|
|
36
|
+
</View>
|
|
37
|
+
),
|
|
38
|
+
],
|
|
39
|
+
};
|
|
40
|
+
|
|
41
|
+
export const Default: StoryComponentType = (args) => (
|
|
42
|
+
<CircularSpinner {...args} />
|
|
43
|
+
);
|
|
44
|
+
|
|
45
|
+
export const Sizes: StoryComponentType = () => (
|
|
46
|
+
<table>
|
|
47
|
+
<tbody>
|
|
48
|
+
<tr>
|
|
49
|
+
<th>
|
|
50
|
+
<LabelLarge>xsmall</LabelLarge>
|
|
51
|
+
</th>
|
|
52
|
+
<th>
|
|
53
|
+
<LabelLarge>small</LabelLarge>
|
|
54
|
+
</th>
|
|
55
|
+
<th>
|
|
56
|
+
<LabelLarge>medium</LabelLarge>
|
|
57
|
+
</th>
|
|
58
|
+
<th>
|
|
59
|
+
<LabelLarge>large</LabelLarge>
|
|
60
|
+
</th>
|
|
61
|
+
</tr>
|
|
62
|
+
<tr>
|
|
63
|
+
<td>
|
|
64
|
+
<CircularSpinner size={"xsmall"} style={styles.distanced} />
|
|
65
|
+
</td>
|
|
66
|
+
<td>
|
|
67
|
+
<CircularSpinner size={"small"} style={styles.distanced} />
|
|
68
|
+
</td>
|
|
69
|
+
<td>
|
|
70
|
+
<CircularSpinner size={"medium"} style={styles.distanced} />
|
|
71
|
+
</td>
|
|
72
|
+
<td>
|
|
73
|
+
<CircularSpinner size={"large"} style={styles.distanced} />
|
|
74
|
+
</td>
|
|
75
|
+
</tr>
|
|
76
|
+
<tr className={css(styles.darkBackground)}>
|
|
77
|
+
<td>
|
|
78
|
+
<CircularSpinner
|
|
79
|
+
light={true}
|
|
80
|
+
size={"xsmall"}
|
|
81
|
+
style={styles.distanced}
|
|
82
|
+
/>
|
|
83
|
+
</td>
|
|
84
|
+
<td>
|
|
85
|
+
<CircularSpinner
|
|
86
|
+
light={true}
|
|
87
|
+
size={"small"}
|
|
88
|
+
style={styles.distanced}
|
|
89
|
+
/>
|
|
90
|
+
</td>
|
|
91
|
+
<td>
|
|
92
|
+
<CircularSpinner
|
|
93
|
+
light={true}
|
|
94
|
+
size={"medium"}
|
|
95
|
+
style={styles.distanced}
|
|
96
|
+
/>
|
|
97
|
+
</td>
|
|
98
|
+
<td>
|
|
99
|
+
<CircularSpinner
|
|
100
|
+
light={true}
|
|
101
|
+
size={"large"}
|
|
102
|
+
style={styles.distanced}
|
|
103
|
+
/>
|
|
104
|
+
</td>
|
|
105
|
+
</tr>
|
|
106
|
+
</tbody>
|
|
107
|
+
</table>
|
|
108
|
+
);
|
|
109
|
+
|
|
110
|
+
Sizes.parameters = {
|
|
111
|
+
docs: {
|
|
112
|
+
storyDescription: `The available sizes for progress spinner are
|
|
113
|
+
\`"xsmall"\`, \`"small"\`, \`"medium"\`, and \`"large"\`.
|
|
114
|
+
This is set with the \`size\` prop.`,
|
|
115
|
+
},
|
|
116
|
+
};
|
|
117
|
+
|
|
118
|
+
export const Light: StoryComponentType = () => <CircularSpinner light={true} />;
|
|
119
|
+
|
|
120
|
+
Light.parameters = {
|
|
121
|
+
backgrounds: {
|
|
122
|
+
default: "darkBlue",
|
|
123
|
+
},
|
|
124
|
+
docs: {
|
|
125
|
+
storyDescription: `This is a progress spinner with its \`light\`
|
|
126
|
+
prop set to true. This is for use on dark backgrounds.`,
|
|
127
|
+
},
|
|
128
|
+
};
|
|
129
|
+
|
|
130
|
+
export const Inline: StoryComponentType = () => (
|
|
131
|
+
<Body>
|
|
132
|
+
Inline inside{" "}
|
|
133
|
+
<CircularSpinner size="xsmall" style={{display: "inline"}} /> some text.
|
|
134
|
+
</Body>
|
|
135
|
+
);
|
|
136
|
+
|
|
137
|
+
Inline.parameters = {
|
|
138
|
+
docs: {
|
|
139
|
+
storyDescription: `Circular spinners also work inline.`,
|
|
140
|
+
},
|
|
141
|
+
};
|
|
142
|
+
|
|
143
|
+
export const WithStyle: StoryComponentType = () => {
|
|
144
|
+
const spinnerStyle = {
|
|
145
|
+
border: `solid 5px ${Color.teal}`,
|
|
146
|
+
borderRadius: "50%",
|
|
147
|
+
backgroundColor: Color.offWhite,
|
|
148
|
+
};
|
|
149
|
+
|
|
150
|
+
return <CircularSpinner style={spinnerStyle} />;
|
|
151
|
+
};
|
|
152
|
+
|
|
153
|
+
WithStyle.parameters = {
|
|
154
|
+
docs: {
|
|
155
|
+
storyDescription: `\`<CircularSpinner>\` has \`style\` prop
|
|
156
|
+
that can be used to apply styles to the spinner's container.
|
|
157
|
+
Here, it has been given a style that includes \`border\` that
|
|
158
|
+
is \`solid 5px \${Color.teal}\` as well as a \`borderRadius\`
|
|
159
|
+
of \`50%\`.`,
|
|
160
|
+
},
|
|
161
|
+
};
|
|
162
|
+
|
|
163
|
+
const styles = StyleSheet.create({
|
|
164
|
+
darkBackground: {
|
|
165
|
+
background: Color.darkBlue,
|
|
166
|
+
padding: Spacing.xLarge_32,
|
|
167
|
+
width: "100%",
|
|
168
|
+
alignItems: "center",
|
|
169
|
+
justifyContent: "center",
|
|
170
|
+
},
|
|
171
|
+
distanced: {
|
|
172
|
+
margin: Spacing.large_24,
|
|
173
|
+
},
|
|
174
|
+
example: {
|
|
175
|
+
alignItems: "center",
|
|
176
|
+
justifyContent: "center",
|
|
177
|
+
},
|
|
178
|
+
row: {
|
|
179
|
+
flexDirection: "row",
|
|
180
|
+
marginBottom: Spacing.xLarge_32,
|
|
181
|
+
},
|
|
182
|
+
});
|
|
@@ -58,6 +58,14 @@ type DefaultProps = {|
|
|
|
58
58
|
/**
|
|
59
59
|
* A circular progress spinner. Used for indicating loading progress. Should
|
|
60
60
|
* be used by default in most places where a loading indicator is needed.
|
|
61
|
+
*
|
|
62
|
+
* ### Usage
|
|
63
|
+
*
|
|
64
|
+
* ```js
|
|
65
|
+
* import {CircularSpinner} from "@khanacademy/wonder-blocks-progress-spinner";
|
|
66
|
+
*
|
|
67
|
+
* <CircularSpinner />
|
|
68
|
+
* ```
|
|
61
69
|
*/
|
|
62
70
|
export default class CircularSpinner extends React.Component<Props> {
|
|
63
71
|
static defaultProps: DefaultProps = {
|