teratail
回答率
85.30%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問html/css/jsでグルグルアニメーションの仕方について(ローディングじゃないよ！)

編集履歴

質問編集履歴

6

urlの修正

2017/07/05 09:28

投稿

tama_yn0815
tama_yn0815

スコア143

title CHANGED
File without changes
body CHANGED
@@ -108,5 +108,5 @@
108
108
  '.dqDot' -> こいつは、ドット要素
109
109
 
110
110
  ###動きのイメージ
111
- https://jsfiddle.net/uvehm6ny/11/
111
+ https://jsfiddle.net/8sree1an/
112
112
  ↑作ってみました！

5

追記

2017/07/05 09:28

投稿

tama_yn0815
tama_yn0815

スコア143

title CHANGED
File without changes
body CHANGED
@@ -105,4 +105,8 @@
105
105
  ###補足情報(言語/FW/ツール等のバージョンなど)
106
106
  javascriptは、ライブラリとして、jQueryのみ利用可能です。
107
107
  '#dqModal' -> こいつは、ドット要素の親
108
- '.dqDot' -> こいつは、ドット要素
108
+ '.dqDot' -> こいつは、ドット要素
109
+
110
+ ###動きのイメージ
111
+ https://jsfiddle.net/uvehm6ny/11/
112
+ ↑作ってみました！

4

htmlの修正

2017/07/05 09:11

投稿

tama_yn0815
tama_yn0815

スコア143

title CHANGED
File without changes
body CHANGED
@@ -37,108 +37,8 @@
37
37
  </style>
38
38
  <div class="dqWrap">
39
39
  <div id="dqModal">
40
- <span class="dqDot" id="dqDot_001"></span>
41
- <span class="dqDot" id="dqDot_002"></span>
42
- <span class="dqDot" id="dqDot_003"></span>
43
- <span class="dqDot" id="dqDot_004"></span>
44
- <span class="dqDot" id="dqDot_005"></span>
45
- <span class="dqDot" id="dqDot_006"></span>
46
- <span class="dqDot" id="dqDot_007"></span>
47
- <span class="dqDot" id="dqDot_008"></span>
48
- <span class="dqDot" id="dqDot_009"></span>
49
- <span class="dqDot" id="dqDot_010"></span>
50
- <span class="dqDot" id="dqDot_011"></span>
51
- <span class="dqDot" id="dqDot_012"></span>
52
- <span class="dqDot" id="dqDot_013"></span>
53
- <span class="dqDot" id="dqDot_014"></span>
54
- <span class="dqDot" id="dqDot_015"></span>
55
- <span class="dqDot" id="dqDot_016"></span>
56
- <span class="dqDot" id="dqDot_017"></span>
57
- <span class="dqDot" id="dqDot_018"></span>
58
- <span class="dqDot" id="dqDot_019"></span>
59
- <span class="dqDot" id="dqDot_020"></span>
60
- <span class="dqDot" id="dqDot_021"></span>
61
- <span class="dqDot" id="dqDot_022"></span>
62
- <span class="dqDot" id="dqDot_023"></span>
63
- <span class="dqDot" id="dqDot_024"></span>
64
- <span class="dqDot" id="dqDot_025"></span>
65
- <span class="dqDot" id="dqDot_026"></span>
66
- <span class="dqDot" id="dqDot_027"></span>
67
- <span class="dqDot" id="dqDot_028"></span>
68
- <span class="dqDot" id="dqDot_029"></span>
69
- <span class="dqDot" id="dqDot_030"></span>
70
- <span class="dqDot" id="dqDot_031"></span>
71
- <span class="dqDot" id="dqDot_032"></span>
72
- <span class="dqDot" id="dqDot_033"></span>
73
- <span class="dqDot" id="dqDot_034"></span>
74
- <span class="dqDot" id="dqDot_035"></span>
75
- <span class="dqDot" id="dqDot_036"></span>
76
- <span class="dqDot" id="dqDot_037"></span>
77
- <span class="dqDot" id="dqDot_038"></span>
78
- <span class="dqDot" id="dqDot_039"></span>
79
- <span class="dqDot" id="dqDot_040"></span>
80
- <span class="dqDot" id="dqDot_041"></span>
81
- <span class="dqDot" id="dqDot_042"></span>
82
- <span class="dqDot" id="dqDot_043"></span>
83
- <span class="dqDot" id="dqDot_044"></span>
84
- <span class="dqDot" id="dqDot_045"></span>
85
- <span class="dqDot" id="dqDot_046"></span>
86
- <span class="dqDot" id="dqDot_047"></span>
87
- <span class="dqDot" id="dqDot_048"></span>
88
- <span class="dqDot" id="dqDot_049"></span>
89
- <span class="dqDot" id="dqDot_050"></span>
90
- <span class="dqDot" id="dqDot_051"></span>
91
- <span class="dqDot" id="dqDot_052"></span>
92
- <span class="dqDot" id="dqDot_053"></span>
93
- <span class="dqDot" id="dqDot_054"></span>
94
- <span class="dqDot" id="dqDot_055"></span>
95
- <span class="dqDot" id="dqDot_056"></span>
96
- <span class="dqDot" id="dqDot_057"></span>
97
- <span class="dqDot" id="dqDot_058"></span>
98
- <span class="dqDot" id="dqDot_059"></span>
99
- <span class="dqDot" id="dqDot_060"></span>
100
- <span class="dqDot" id="dqDot_061"></span>
101
- <span class="dqDot" id="dqDot_062"></span>
102
- <span class="dqDot" id="dqDot_063"></span>
103
- <span class="dqDot" id="dqDot_064"></span>
104
- <span class="dqDot" id="dqDot_065"></span>
105
- <span class="dqDot" id="dqDot_066"></span>
106
- <span class="dqDot" id="dqDot_067"></span>
107
- <span class="dqDot" id="dqDot_068"></span>
108
- <span class="dqDot" id="dqDot_069"></span>
109
- <span class="dqDot" id="dqDot_070"></span>
110
- <span class="dqDot" id="dqDot_071"></span>
111
- <span class="dqDot" id="dqDot_072"></span>
112
- <span class="dqDot" id="dqDot_073"></span>
113
- <span class="dqDot" id="dqDot_074"></span>
114
- <span class="dqDot" id="dqDot_075"></span>
115
- <span class="dqDot" id="dqDot_076"></span>
116
- <span class="dqDot" id="dqDot_077"></span>
117
- <span class="dqDot" id="dqDot_078"></span>
118
- <span class="dqDot" id="dqDot_079"></span>
119
- <span class="dqDot" id="dqDot_080"></span>
120
- <span class="dqDot" id="dqDot_081"></span>
121
- <span class="dqDot" id="dqDot_082"></span>
122
- <span class="dqDot" id="dqDot_083"></span>
123
- <span class="dqDot" id="dqDot_084"></span>
124
- <span class="dqDot" id="dqDot_085"></span>
125
- <span class="dqDot" id="dqDot_086"></span>
126
- <span class="dqDot" id="dqDot_087"></span>
127
- <span class="dqDot" id="dqDot_088"></span>
128
- <span class="dqDot" id="dqDot_089"></span>
129
- <span class="dqDot" id="dqDot_090"></span>
130
- <span class="dqDot" id="dqDot_091"></span>
131
- <span class="dqDot" id="dqDot_092"></span>
132
- <span class="dqDot" id="dqDot_093"></span>
133
- <span class="dqDot" id="dqDot_094"></span>
134
- <span class="dqDot" id="dqDot_095"></span>
135
- <span class="dqDot" id="dqDot_096"></span>
136
- <span class="dqDot" id="dqDot_097"></span>
137
- <span class="dqDot" id="dqDot_098"></span>
138
- <span class="dqDot" id="dqDot_099"></span>
139
- <span class="dqDot" id="dqDot_100"></span>
140
- </div>
141
- </div>
40
+ <span class="dqDot" id="dqDot_001"></span><span class="dqDot" id="dqDot_002"></span><span class="dqDot" id="dqDot_003"></span><span class="dqDot" id="dqDot_004"></span><span class="dqDot" id="dqDot_005"></span><span class="dqDot" id="dqDot_006"></span><span class="dqDot" id="dqDot_007"></span><span class="dqDot" id="dqDot_008"></span><span class="dqDot" id="dqDot_009"></span><span class="dqDot" id="dqDot_010"></span><span class="dqDot" id="dqDot_011"></span><span class="dqDot" id="dqDot_012"></span><span class="dqDot" id="dqDot_013"></span><span class="dqDot" id="dqDot_014"></span><span class="dqDot" id="dqDot_015"></span><span class="dqDot" id="dqDot_016"></span><span class="dqDot" id="dqDot_017"></span><span class="dqDot" id="dqDot_018"></span><span class="dqDot" id="dqDot_019"></span><span class="dqDot" id="dqDot_020"></span><span class="dqDot" id="dqDot_021"></span><span class="dqDot" id="dqDot_022"></span><span class="dqDot" id="dqDot_023"></span><span class="dqDot" id="dqDot_024"></span><span class="dqDot" id="dqDot_025"></span><span class="dqDot" id="dqDot_026"></span><span class="dqDot" id="dqDot_027"></span><span class="dqDot" id="dqDot_028"></span><span class="dqDot" id="dqDot_029"></span><span class="dqDot" id="dqDot_030"></span><span class="dqDot" id="dqDot_031"></span><span class="dqDot" id="dqDot_032"></span><span class="dqDot" id="dqDot_033"></span><span class="dqDot" id="dqDot_034"></span><span class="dqDot" id="dqDot_035"></span><span class="dqDot" id="dqDot_036"></span><span class="dqDot" id="dqDot_037"></span><span class="dqDot" id="dqDot_038"></span><span class="dqDot" id="dqDot_039"></span><span class="dqDot" id="dqDot_040"></span><span class="dqDot" id="dqDot_041"></span><span class="dqDot" id="dqDot_042"></span><span class="dqDot" id="dqDot_043"></span><span class="dqDot" id="dqDot_044"></span><span class="dqDot" id="dqDot_045"></span><span class="dqDot" id="dqDot_046"></span><span class="dqDot" id="dqDot_047"></span><span class="dqDot" id="dqDot_048"></span><span class="dqDot" id="dqDot_049"></span><span class="dqDot" id="dqDot_050"></span><span class="dqDot" id="dqDot_051"></span><span class="dqDot" id="dqDot_052"></span><span class="dqDot" id="dqDot_053"></span><span class="dqDot" id="dqDot_054"></span><span class="dqDot" id="dqDot_055"></span><span class="dqDot" id="dqDot_056"></span><span class="dqDot" id="dqDot_057"></span><span class="dqDot" id="dqDot_058"></span><span class="dqDot" id="dqDot_059"></span><span class="dqDot" id="dqDot_060"></span><span class="dqDot" id="dqDot_061"></span><span class="dqDot" id="dqDot_062"></span><span class="dqDot" id="dqDot_063"></span><span class="dqDot" id="dqDot_064"></span><span class="dqDot" id="dqDot_065"></span><span class="dqDot" id="dqDot_066"></span><span class="dqDot" id="dqDot_067"></span><span class="dqDot" id="dqDot_068"></span><span class="dqDot" id="dqDot_069"></span><span class="dqDot" id="dqDot_070"></span><span class="dqDot" id="dqDot_071"></span><span class="dqDot" id="dqDot_072"></span><span class="dqDot" id="dqDot_073"></span><span class="dqDot" id="dqDot_074"></span><span class="dqDot" id="dqDot_075"></span><span class="dqDot" id="dqDot_076"></span><span class="dqDot" id="dqDot_077"></span><span class="dqDot" id="dqDot_078"></span><span class="dqDot" id="dqDot_079"></span><span class="dqDot" id="dqDot_080"></span><span class="dqDot" id="dqDot_081"></span><span class="dqDot" id="dqDot_082"></span><span class="dqDot" id="dqDot_083"></span><span class="dqDot" id="dqDot_084"></span><span class="dqDot" id="dqDot_085"></span><span class="dqDot" id="dqDot_086"></span><span class="dqDot" id="dqDot_087"></span><span class="dqDot" id="dqDot_088"></span><span class="dqDot" id="dqDot_089"></span><span class="dqDot" id="dqDot_090"></span><span class="dqDot" id="dqDot_091"></span><span class="dqDot" id="dqDot_092"></span><span class="dqDot" id="dqDot_093"></span><span class="dqDot" id="dqDot_094"></span><span class="dqDot" id="dqDot_095"></span><span class="dqDot" id="dqDot_096"></span><span class="dqDot" id="dqDot_097"></span><span class="dqDot" id="dqDot_098"></span><span class="dqDot" id="dqDot_099"></span><span class="dqDot" id="dqDot_100"></span>
41
+ </div></div>
142
42
  ```
143
43
  ```javascript
144
44
  function dqLikeAnimate(){

3

htmlの修正

2017/07/05 06:24

投稿

tama_yn0815
tama_yn0815

スコア143

title CHANGED
File without changes
body CHANGED
@@ -35,6 +35,7 @@
35
35
  .dqWrap{width:500px;height:500px;margin:0 auto;}
36
36
  span.dqDot{display:inline-block;width:50px;height:50px;background-color:#111; vertical-align:bottom;}
37
37
  </style>
38
+ <div class="dqWrap">
38
39
  <div id="dqModal">
39
40
  <span class="dqDot" id="dqDot_001"></span>
40
41
  <span class="dqDot" id="dqDot_002"></span>
@@ -46,8 +47,98 @@
46
47
  <span class="dqDot" id="dqDot_008"></span>
47
48
  <span class="dqDot" id="dqDot_009"></span>
48
49
  <span class="dqDot" id="dqDot_010"></span>
50
+ <span class="dqDot" id="dqDot_011"></span>
51
+ <span class="dqDot" id="dqDot_012"></span>
52
+ <span class="dqDot" id="dqDot_013"></span>
53
+ <span class="dqDot" id="dqDot_014"></span>
54
+ <span class="dqDot" id="dqDot_015"></span>
55
+ <span class="dqDot" id="dqDot_016"></span>
56
+ <span class="dqDot" id="dqDot_017"></span>
57
+ <span class="dqDot" id="dqDot_018"></span>
58
+ <span class="dqDot" id="dqDot_019"></span>
59
+ <span class="dqDot" id="dqDot_020"></span>
60
+ <span class="dqDot" id="dqDot_021"></span>
61
+ <span class="dqDot" id="dqDot_022"></span>
62
+ <span class="dqDot" id="dqDot_023"></span>
63
+ <span class="dqDot" id="dqDot_024"></span>
64
+ <span class="dqDot" id="dqDot_025"></span>
65
+ <span class="dqDot" id="dqDot_026"></span>
66
+ <span class="dqDot" id="dqDot_027"></span>
67
+ <span class="dqDot" id="dqDot_028"></span>
68
+ <span class="dqDot" id="dqDot_029"></span>
69
+ <span class="dqDot" id="dqDot_030"></span>
70
+ <span class="dqDot" id="dqDot_031"></span>
71
+ <span class="dqDot" id="dqDot_032"></span>
72
+ <span class="dqDot" id="dqDot_033"></span>
73
+ <span class="dqDot" id="dqDot_034"></span>
74
+ <span class="dqDot" id="dqDot_035"></span>
75
+ <span class="dqDot" id="dqDot_036"></span>
76
+ <span class="dqDot" id="dqDot_037"></span>
77
+ <span class="dqDot" id="dqDot_038"></span>
78
+ <span class="dqDot" id="dqDot_039"></span>
79
+ <span class="dqDot" id="dqDot_040"></span>
80
+ <span class="dqDot" id="dqDot_041"></span>
81
+ <span class="dqDot" id="dqDot_042"></span>
82
+ <span class="dqDot" id="dqDot_043"></span>
83
+ <span class="dqDot" id="dqDot_044"></span>
84
+ <span class="dqDot" id="dqDot_045"></span>
85
+ <span class="dqDot" id="dqDot_046"></span>
86
+ <span class="dqDot" id="dqDot_047"></span>
87
+ <span class="dqDot" id="dqDot_048"></span>
88
+ <span class="dqDot" id="dqDot_049"></span>
89
+ <span class="dqDot" id="dqDot_050"></span>
90
+ <span class="dqDot" id="dqDot_051"></span>
91
+ <span class="dqDot" id="dqDot_052"></span>
92
+ <span class="dqDot" id="dqDot_053"></span>
93
+ <span class="dqDot" id="dqDot_054"></span>
94
+ <span class="dqDot" id="dqDot_055"></span>
95
+ <span class="dqDot" id="dqDot_056"></span>
96
+ <span class="dqDot" id="dqDot_057"></span>
97
+ <span class="dqDot" id="dqDot_058"></span>
98
+ <span class="dqDot" id="dqDot_059"></span>
99
+ <span class="dqDot" id="dqDot_060"></span>
100
+ <span class="dqDot" id="dqDot_061"></span>
101
+ <span class="dqDot" id="dqDot_062"></span>
102
+ <span class="dqDot" id="dqDot_063"></span>
103
+ <span class="dqDot" id="dqDot_064"></span>
104
+ <span class="dqDot" id="dqDot_065"></span>
105
+ <span class="dqDot" id="dqDot_066"></span>
106
+ <span class="dqDot" id="dqDot_067"></span>
107
+ <span class="dqDot" id="dqDot_068"></span>
108
+ <span class="dqDot" id="dqDot_069"></span>
109
+ <span class="dqDot" id="dqDot_070"></span>
110
+ <span class="dqDot" id="dqDot_071"></span>
111
+ <span class="dqDot" id="dqDot_072"></span>
112
+ <span class="dqDot" id="dqDot_073"></span>
113
+ <span class="dqDot" id="dqDot_074"></span>
114
+ <span class="dqDot" id="dqDot_075"></span>
115
+ <span class="dqDot" id="dqDot_076"></span>
116
+ <span class="dqDot" id="dqDot_077"></span>
117
+ <span class="dqDot" id="dqDot_078"></span>
118
+ <span class="dqDot" id="dqDot_079"></span>
119
+ <span class="dqDot" id="dqDot_080"></span>
120
+ <span class="dqDot" id="dqDot_081"></span>
121
+ <span class="dqDot" id="dqDot_082"></span>
122
+ <span class="dqDot" id="dqDot_083"></span>
123
+ <span class="dqDot" id="dqDot_084"></span>
124
+ <span class="dqDot" id="dqDot_085"></span>
125
+ <span class="dqDot" id="dqDot_086"></span>
126
+ <span class="dqDot" id="dqDot_087"></span>
127
+ <span class="dqDot" id="dqDot_088"></span>
128
+ <span class="dqDot" id="dqDot_089"></span>
129
+ <span class="dqDot" id="dqDot_090"></span>
130
+ <span class="dqDot" id="dqDot_091"></span>
131
+ <span class="dqDot" id="dqDot_092"></span>
132
+ <span class="dqDot" id="dqDot_093"></span>
133
+ <span class="dqDot" id="dqDot_094"></span>
134
+ <span class="dqDot" id="dqDot_095"></span>
135
+ <span class="dqDot" id="dqDot_096"></span>
136
+ <span class="dqDot" id="dqDot_097"></span>
137
+ <span class="dqDot" id="dqDot_098"></span>
138
+ <span class="dqDot" id="dqDot_099"></span>
49
- /*以下、100まで続きます。*/
139
+ <span class="dqDot" id="dqDot_100"></span>
50
140
  </div>
141
+ </div>
51
142
  ```
52
143
  ```javascript
53
144
  function dqLikeAnimate(){

2

htmlとstyleの追加

2017/07/05 06:06

投稿

tama_yn0815
tama_yn0815

スコア143

title CHANGED
File without changes
body CHANGED
@@ -30,8 +30,27 @@
30
30
 
31
31
 
32
32
  ###該当のソースコード
33
+ ```html
34
+ <style>
35
+ .dqWrap{width:500px;height:500px;margin:0 auto;}
36
+ span.dqDot{display:inline-block;width:50px;height:50px;background-color:#111; vertical-align:bottom;}
37
+ </style>
38
+ <div id="dqModal">
39
+ <span class="dqDot" id="dqDot_001"></span>
40
+ <span class="dqDot" id="dqDot_002"></span>
41
+ <span class="dqDot" id="dqDot_003"></span>
42
+ <span class="dqDot" id="dqDot_004"></span>
43
+ <span class="dqDot" id="dqDot_005"></span>
44
+ <span class="dqDot" id="dqDot_006"></span>
45
+ <span class="dqDot" id="dqDot_007"></span>
46
+ <span class="dqDot" id="dqDot_008"></span>
47
+ <span class="dqDot" id="dqDot_009"></span>
48
+ <span class="dqDot" id="dqDot_010"></span>
49
+ /*以下、100まで続きます。*/
50
+ </div>
51
+ ```
33
52
  ```javascript
34
- function qLikeAnimate(){
53
+ function dqLikeAnimate(){
35
54
  this.options = {
36
55
  speed: 1000,
37
56
  delayTime: 20,

1

文言修正

2017/07/05 05:51

投稿

tama_yn0815
tama_yn0815

スコア143

title CHANGED
File without changes
body CHANGED
@@ -31,7 +31,7 @@
31
31
 
32
32
  ###該当のソースコード
33
33
  ```javascript
34
- function JLJS_sqLikeAnimate(){
34
+ function qLikeAnimate(){
35
35
  this.options = {
36
36
  speed: 1000,
37
37
  delayTime: 20,
@@ -39,7 +39,7 @@
39
39
  target: $()
40
40
  };
41
41
  }
42
- JLJS_sqLikeAnimate.prototype = {
42
+ dqLikeAnimate.prototype = {
43
43
  init: function(){
44
44
  return this;
45
45
  },
@@ -82,7 +82,7 @@
82
82
  }
83
83
  };
84
84
  $(function(){
85
- var animated = new JLJS_sqLikeAnimate();
85
+ var animated = new dqLikeAnimate();
86
86
  animated.setup({
87
87
  target: $('#dqModal').find('.dqDot')
88
88
  });