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

編集履歴

質問編集履歴

6

urlの修正

2017/07/05 09:28

投稿

tama_yn0815
tama_yn0815

スコア143

test CHANGED
File without changes
test CHANGED
@@ -218,6 +218,6 @@
218
218
 
219
219
  ###動きのイメージ
220
220
 
221
- https://jsfiddle.net/uvehm6ny/11/
221
+ https://jsfiddle.net/8sree1an/
222
222
 
223
223
  ↑作ってみました！

5

追記

2017/07/05 09:28

投稿

tama_yn0815
tama_yn0815

スコア143

test CHANGED
File without changes
test CHANGED
@@ -213,3 +213,11 @@
213
213
  '#dqModal' -> こいつは、ドット要素の親
214
214
 
215
215
  '.dqDot' -> こいつは、ドット要素
216
+
217
+
218
+
219
+ ###動きのイメージ
220
+
221
+ https://jsfiddle.net/uvehm6ny/11/
222
+
223
+ ↑作ってみました！

4

htmlの修正

2017/07/05 09:11

投稿

tama_yn0815
tama_yn0815

スコア143

test CHANGED
File without changes
test CHANGED
@@ -76,209 +76,9 @@
76
76
 
77
77
  <div id="dqModal">
78
78
 
79
- <span class="dqDot" id="dqDot_001"></span>
80
-
81
- <span class="dqDot" id="dqDot_002"></span>
82
-
83
- <span class="dqDot" id="dqDot_003"></span>
84
-
85
- <span class="dqDot" id="dqDot_004"></span>
86
-
87
- <span class="dqDot" id="dqDot_005"></span>
88
-
89
- <span class="dqDot" id="dqDot_006"></span>
90
-
91
- <span class="dqDot" id="dqDot_007"></span>
92
-
93
- <span class="dqDot" id="dqDot_008"></span>
94
-
95
- <span class="dqDot" id="dqDot_009"></span>
96
-
97
- <span class="dqDot" id="dqDot_010"></span>
98
-
99
- <span class="dqDot" id="dqDot_011"></span>
100
-
101
- <span class="dqDot" id="dqDot_012"></span>
102
-
103
- <span class="dqDot" id="dqDot_013"></span>
104
-
105
- <span class="dqDot" id="dqDot_014"></span>
106
-
107
- <span class="dqDot" id="dqDot_015"></span>
108
-
109
- <span class="dqDot" id="dqDot_016"></span>
110
-
111
- <span class="dqDot" id="dqDot_017"></span>
112
-
113
- <span class="dqDot" id="dqDot_018"></span>
114
-
115
- <span class="dqDot" id="dqDot_019"></span>
116
-
117
- <span class="dqDot" id="dqDot_020"></span>
118
-
119
- <span class="dqDot" id="dqDot_021"></span>
120
-
121
- <span class="dqDot" id="dqDot_022"></span>
122
-
123
- <span class="dqDot" id="dqDot_023"></span>
124
-
125
- <span class="dqDot" id="dqDot_024"></span>
126
-
127
- <span class="dqDot" id="dqDot_025"></span>
128
-
129
- <span class="dqDot" id="dqDot_026"></span>
130
-
131
- <span class="dqDot" id="dqDot_027"></span>
132
-
133
- <span class="dqDot" id="dqDot_028"></span>
134
-
135
- <span class="dqDot" id="dqDot_029"></span>
136
-
137
- <span class="dqDot" id="dqDot_030"></span>
138
-
139
- <span class="dqDot" id="dqDot_031"></span>
140
-
141
- <span class="dqDot" id="dqDot_032"></span>
142
-
143
- <span class="dqDot" id="dqDot_033"></span>
144
-
145
- <span class="dqDot" id="dqDot_034"></span>
146
-
147
- <span class="dqDot" id="dqDot_035"></span>
148
-
149
- <span class="dqDot" id="dqDot_036"></span>
150
-
151
- <span class="dqDot" id="dqDot_037"></span>
152
-
153
- <span class="dqDot" id="dqDot_038"></span>
154
-
155
- <span class="dqDot" id="dqDot_039"></span>
156
-
157
- <span class="dqDot" id="dqDot_040"></span>
158
-
159
- <span class="dqDot" id="dqDot_041"></span>
160
-
161
- <span class="dqDot" id="dqDot_042"></span>
162
-
163
- <span class="dqDot" id="dqDot_043"></span>
164
-
165
- <span class="dqDot" id="dqDot_044"></span>
166
-
167
- <span class="dqDot" id="dqDot_045"></span>
168
-
169
- <span class="dqDot" id="dqDot_046"></span>
170
-
171
- <span class="dqDot" id="dqDot_047"></span>
172
-
173
- <span class="dqDot" id="dqDot_048"></span>
174
-
175
- <span class="dqDot" id="dqDot_049"></span>
176
-
177
- <span class="dqDot" id="dqDot_050"></span>
178
-
179
- <span class="dqDot" id="dqDot_051"></span>
180
-
181
- <span class="dqDot" id="dqDot_052"></span>
182
-
183
- <span class="dqDot" id="dqDot_053"></span>
184
-
185
- <span class="dqDot" id="dqDot_054"></span>
186
-
187
- <span class="dqDot" id="dqDot_055"></span>
188
-
189
- <span class="dqDot" id="dqDot_056"></span>
190
-
191
- <span class="dqDot" id="dqDot_057"></span>
192
-
193
- <span class="dqDot" id="dqDot_058"></span>
194
-
195
- <span class="dqDot" id="dqDot_059"></span>
196
-
197
- <span class="dqDot" id="dqDot_060"></span>
198
-
199
- <span class="dqDot" id="dqDot_061"></span>
200
-
201
- <span class="dqDot" id="dqDot_062"></span>
202
-
203
- <span class="dqDot" id="dqDot_063"></span>
204
-
205
- <span class="dqDot" id="dqDot_064"></span>
206
-
207
- <span class="dqDot" id="dqDot_065"></span>
208
-
209
- <span class="dqDot" id="dqDot_066"></span>
210
-
211
- <span class="dqDot" id="dqDot_067"></span>
212
-
213
- <span class="dqDot" id="dqDot_068"></span>
214
-
215
- <span class="dqDot" id="dqDot_069"></span>
216
-
217
- <span class="dqDot" id="dqDot_070"></span>
218
-
219
- <span class="dqDot" id="dqDot_071"></span>
220
-
221
- <span class="dqDot" id="dqDot_072"></span>
222
-
223
- <span class="dqDot" id="dqDot_073"></span>
224
-
225
- <span class="dqDot" id="dqDot_074"></span>
226
-
227
- <span class="dqDot" id="dqDot_075"></span>
228
-
229
- <span class="dqDot" id="dqDot_076"></span>
230
-
231
- <span class="dqDot" id="dqDot_077"></span>
232
-
233
- <span class="dqDot" id="dqDot_078"></span>
234
-
235
- <span class="dqDot" id="dqDot_079"></span>
236
-
237
- <span class="dqDot" id="dqDot_080"></span>
238
-
239
- <span class="dqDot" id="dqDot_081"></span>
240
-
241
- <span class="dqDot" id="dqDot_082"></span>
242
-
243
- <span class="dqDot" id="dqDot_083"></span>
244
-
245
- <span class="dqDot" id="dqDot_084"></span>
246
-
247
- <span class="dqDot" id="dqDot_085"></span>
248
-
249
- <span class="dqDot" id="dqDot_086"></span>
250
-
251
- <span class="dqDot" id="dqDot_087"></span>
252
-
253
- <span class="dqDot" id="dqDot_088"></span>
254
-
255
- <span class="dqDot" id="dqDot_089"></span>
256
-
257
- <span class="dqDot" id="dqDot_090"></span>
258
-
259
- <span class="dqDot" id="dqDot_091"></span>
260
-
261
- <span class="dqDot" id="dqDot_092"></span>
262
-
263
- <span class="dqDot" id="dqDot_093"></span>
264
-
265
- <span class="dqDot" id="dqDot_094"></span>
266
-
267
- <span class="dqDot" id="dqDot_095"></span>
268
-
269
- <span class="dqDot" id="dqDot_096"></span>
270
-
271
- <span class="dqDot" id="dqDot_097"></span>
272
-
273
- <span class="dqDot" id="dqDot_098"></span>
274
-
275
- <span class="dqDot" id="dqDot_099"></span>
276
-
277
- <span class="dqDot" id="dqDot_100"></span>
278
-
279
- </div>
280
-
281
- </div>
79
+ <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>
80
+
81
+ </div></div>
282
82
 
283
83
  ```
284
84
 

3

htmlの修正

2017/07/05 06:24

投稿

tama_yn0815
tama_yn0815

スコア143

test CHANGED
File without changes
test CHANGED
@@ -72,6 +72,8 @@
72
72
 
73
73
  </style>
74
74
 
75
+ <div class="dqWrap">
76
+
75
77
  <div id="dqModal">
76
78
 
77
79
  <span class="dqDot" id="dqDot_001"></span>
@@ -94,10 +96,190 @@
94
96
 
95
97
  <span class="dqDot" id="dqDot_010"></span>
96
98
 
99
+ <span class="dqDot" id="dqDot_011"></span>
100
+
101
+ <span class="dqDot" id="dqDot_012"></span>
102
+
103
+ <span class="dqDot" id="dqDot_013"></span>
104
+
105
+ <span class="dqDot" id="dqDot_014"></span>
106
+
107
+ <span class="dqDot" id="dqDot_015"></span>
108
+
109
+ <span class="dqDot" id="dqDot_016"></span>
110
+
111
+ <span class="dqDot" id="dqDot_017"></span>
112
+
113
+ <span class="dqDot" id="dqDot_018"></span>
114
+
115
+ <span class="dqDot" id="dqDot_019"></span>
116
+
117
+ <span class="dqDot" id="dqDot_020"></span>
118
+
119
+ <span class="dqDot" id="dqDot_021"></span>
120
+
121
+ <span class="dqDot" id="dqDot_022"></span>
122
+
123
+ <span class="dqDot" id="dqDot_023"></span>
124
+
125
+ <span class="dqDot" id="dqDot_024"></span>
126
+
127
+ <span class="dqDot" id="dqDot_025"></span>
128
+
129
+ <span class="dqDot" id="dqDot_026"></span>
130
+
131
+ <span class="dqDot" id="dqDot_027"></span>
132
+
133
+ <span class="dqDot" id="dqDot_028"></span>
134
+
135
+ <span class="dqDot" id="dqDot_029"></span>
136
+
137
+ <span class="dqDot" id="dqDot_030"></span>
138
+
139
+ <span class="dqDot" id="dqDot_031"></span>
140
+
141
+ <span class="dqDot" id="dqDot_032"></span>
142
+
143
+ <span class="dqDot" id="dqDot_033"></span>
144
+
145
+ <span class="dqDot" id="dqDot_034"></span>
146
+
147
+ <span class="dqDot" id="dqDot_035"></span>
148
+
149
+ <span class="dqDot" id="dqDot_036"></span>
150
+
151
+ <span class="dqDot" id="dqDot_037"></span>
152
+
153
+ <span class="dqDot" id="dqDot_038"></span>
154
+
155
+ <span class="dqDot" id="dqDot_039"></span>
156
+
157
+ <span class="dqDot" id="dqDot_040"></span>
158
+
159
+ <span class="dqDot" id="dqDot_041"></span>
160
+
161
+ <span class="dqDot" id="dqDot_042"></span>
162
+
163
+ <span class="dqDot" id="dqDot_043"></span>
164
+
165
+ <span class="dqDot" id="dqDot_044"></span>
166
+
167
+ <span class="dqDot" id="dqDot_045"></span>
168
+
169
+ <span class="dqDot" id="dqDot_046"></span>
170
+
171
+ <span class="dqDot" id="dqDot_047"></span>
172
+
173
+ <span class="dqDot" id="dqDot_048"></span>
174
+
175
+ <span class="dqDot" id="dqDot_049"></span>
176
+
177
+ <span class="dqDot" id="dqDot_050"></span>
178
+
179
+ <span class="dqDot" id="dqDot_051"></span>
180
+
181
+ <span class="dqDot" id="dqDot_052"></span>
182
+
183
+ <span class="dqDot" id="dqDot_053"></span>
184
+
185
+ <span class="dqDot" id="dqDot_054"></span>
186
+
187
+ <span class="dqDot" id="dqDot_055"></span>
188
+
189
+ <span class="dqDot" id="dqDot_056"></span>
190
+
191
+ <span class="dqDot" id="dqDot_057"></span>
192
+
193
+ <span class="dqDot" id="dqDot_058"></span>
194
+
195
+ <span class="dqDot" id="dqDot_059"></span>
196
+
197
+ <span class="dqDot" id="dqDot_060"></span>
198
+
199
+ <span class="dqDot" id="dqDot_061"></span>
200
+
201
+ <span class="dqDot" id="dqDot_062"></span>
202
+
203
+ <span class="dqDot" id="dqDot_063"></span>
204
+
205
+ <span class="dqDot" id="dqDot_064"></span>
206
+
207
+ <span class="dqDot" id="dqDot_065"></span>
208
+
209
+ <span class="dqDot" id="dqDot_066"></span>
210
+
211
+ <span class="dqDot" id="dqDot_067"></span>
212
+
213
+ <span class="dqDot" id="dqDot_068"></span>
214
+
215
+ <span class="dqDot" id="dqDot_069"></span>
216
+
217
+ <span class="dqDot" id="dqDot_070"></span>
218
+
219
+ <span class="dqDot" id="dqDot_071"></span>
220
+
221
+ <span class="dqDot" id="dqDot_072"></span>
222
+
223
+ <span class="dqDot" id="dqDot_073"></span>
224
+
225
+ <span class="dqDot" id="dqDot_074"></span>
226
+
227
+ <span class="dqDot" id="dqDot_075"></span>
228
+
229
+ <span class="dqDot" id="dqDot_076"></span>
230
+
231
+ <span class="dqDot" id="dqDot_077"></span>
232
+
233
+ <span class="dqDot" id="dqDot_078"></span>
234
+
235
+ <span class="dqDot" id="dqDot_079"></span>
236
+
237
+ <span class="dqDot" id="dqDot_080"></span>
238
+
239
+ <span class="dqDot" id="dqDot_081"></span>
240
+
241
+ <span class="dqDot" id="dqDot_082"></span>
242
+
243
+ <span class="dqDot" id="dqDot_083"></span>
244
+
245
+ <span class="dqDot" id="dqDot_084"></span>
246
+
247
+ <span class="dqDot" id="dqDot_085"></span>
248
+
249
+ <span class="dqDot" id="dqDot_086"></span>
250
+
251
+ <span class="dqDot" id="dqDot_087"></span>
252
+
253
+ <span class="dqDot" id="dqDot_088"></span>
254
+
255
+ <span class="dqDot" id="dqDot_089"></span>
256
+
257
+ <span class="dqDot" id="dqDot_090"></span>
258
+
259
+ <span class="dqDot" id="dqDot_091"></span>
260
+
261
+ <span class="dqDot" id="dqDot_092"></span>
262
+
263
+ <span class="dqDot" id="dqDot_093"></span>
264
+
265
+ <span class="dqDot" id="dqDot_094"></span>
266
+
267
+ <span class="dqDot" id="dqDot_095"></span>
268
+
269
+ <span class="dqDot" id="dqDot_096"></span>
270
+
271
+ <span class="dqDot" id="dqDot_097"></span>
272
+
273
+ <span class="dqDot" id="dqDot_098"></span>
274
+
275
+ <span class="dqDot" id="dqDot_099"></span>
276
+
97
- /*以下、100まで続きます。*/
277
+ <span class="dqDot" id="dqDot_100"></span>
98
278
 
99
279
  </div>
100
280
 
281
+ </div>
282
+
101
283
  ```
102
284
 
103
285
  ```javascript

2

htmlとstyleの追加

2017/07/05 06:06

投稿

tama_yn0815
tama_yn0815

スコア143

test CHANGED
File without changes
test CHANGED
@@ -62,9 +62,47 @@
62
62
 
63
63
  ###該当のソースコード
64
64
 
65
+ ```html
66
+
67
+ <style>
68
+
69
+ .dqWrap{width:500px;height:500px;margin:0 auto;}
70
+
71
+ span.dqDot{display:inline-block;width:50px;height:50px;background-color:#111; vertical-align:bottom;}
72
+
73
+ </style>
74
+
75
+ <div id="dqModal">
76
+
77
+ <span class="dqDot" id="dqDot_001"></span>
78
+
79
+ <span class="dqDot" id="dqDot_002"></span>
80
+
81
+ <span class="dqDot" id="dqDot_003"></span>
82
+
83
+ <span class="dqDot" id="dqDot_004"></span>
84
+
85
+ <span class="dqDot" id="dqDot_005"></span>
86
+
87
+ <span class="dqDot" id="dqDot_006"></span>
88
+
89
+ <span class="dqDot" id="dqDot_007"></span>
90
+
91
+ <span class="dqDot" id="dqDot_008"></span>
92
+
93
+ <span class="dqDot" id="dqDot_009"></span>
94
+
95
+ <span class="dqDot" id="dqDot_010"></span>
96
+
97
+ /*以下、100まで続きます。*/
98
+
99
+ </div>
100
+
101
+ ```
102
+
65
103
  ```javascript
66
104
 
67
- function qLikeAnimate(){
105
+ function dqLikeAnimate(){
68
106
 
69
107
  this.options = {
70
108
 

1

文言修正

2017/07/05 05:51

投稿

tama_yn0815
tama_yn0815

スコア143

test CHANGED
File without changes
test CHANGED
@@ -64,7 +64,7 @@
64
64
 
65
65
  ```javascript
66
66
 
67
- function JLJS_sqLikeAnimate(){
67
+ function qLikeAnimate(){
68
68
 
69
69
  this.options = {
70
70
 
@@ -80,7 +80,7 @@
80
80
 
81
81
  }
82
82
 
83
- JLJS_sqLikeAnimate.prototype = {
83
+ dqLikeAnimate.prototype = {
84
84
 
85
85
  init: function(){
86
86
 
@@ -166,7 +166,7 @@
166
166
 
167
167
  $(function(){
168
168
 
169
- var animated = new JLJS_sqLikeAnimate();
169
+ var animated = new dqLikeAnimate();
170
170
 
171
171
  animated.setup({
172
172